WapSter

habr, css-tricks.com, https://t.me/webstandards_ru, google: css news

@media (max-width: 800px) {
        .whatYouGet__content {
            flex-direction: column;
        }
    }

Что-то блок у тебя раздут, я про БЭМ.

Есть более удобный тэг picture. А твоя ошибка в том, что ты задаешь два параметра w и плотность нужно один из них выбирать

Вырезать эти фигуры и поиграть с z-index

Реализация на grid

Понимаю, что сейчас никто уже не пишет сайты с нуля.

вообще-то именно для этого нужны фронтендеры. VS Code, WebStorm. Тебе до портфолио ещё далеко, уже обязательны знания фреймворков, js на хорошем уровне, всякие инструменты типа webpack. А то что ты описываешь, называется верстка.

Павел Чернов,

А как формировать карточки если с сервера приходит JSON?

pos:a относительно центра блока. Еще можно кнопку и этот блок засунуть в одну обертку ограничив ее по ширине и флексом центрировать оба блока по поперечной оси.

Портфолио ага. У тебя лишняя скобка в css и название класса не соответсвует классу в html

MDN: In flexbox layouts, this property is ignored

height 100% никогда не с работает на любом элементе, если у родителя не задана в px. Используй object-fit cover

Делай просто оптимально. Для превью используй легкие, для показа уже более качественные. К тому же есть тэг picture и методы lazy-load

label
   input
   span

input ~ span {}
input:checked ~ span {}

С телефона. Синтаксис html = pug. span нужно стилизовать в виде кнопки

label строчный, соответсвенно только строчные.

https://medium.com/@pppped/how-to-code-a-responsiv...