Технология верстки 2021: создание простого лендинга (часть 5)

У вашего броузера проблема в совместимости с HTML5

В этой части мы полностью адаптируем первую секцию нашего лендинга.

СОДЕРЖАНИЕ:
00:00 Адаптация класса контейнера, выбор брейкпоинтов.
05:53 Строим план адаптации первого блока. Переменные в PostCSS. Настройка Webpack для работы с ними (postcss-simple-vars).
10:00 Добавляем коммит, меняем имя/емейл автора коммита.
11:14 Продолжаем адаптацию. Активно используем медиа-запросы. Проблема горизонтального скролла.
15:33 Решаем вопрос с галочками. Не нужно бояться !important - иногда можно использовать.
23:47 Слишком длинная надпись на нижней кнопке блока. Проблема пограничных пикселей между брейкпоинтами. Особенности работы min- и max-width.
27:34 Добиваем галочки.
29:38 Затуп нижней кнопки.
32:06 Касание краёв текста с границами экрана. Окончательная адаптация галочек.
36:51 Проверяем нашу верстку.
38:03 Призыв к самостоятельной работе + философское заключение.

Исходники к ролику (PSD-файл с дизайном находится там же):
https://github.com/makewebme/website-landing-technology-2021

????????????
Стань спонсором канала и получи бонусы: https://www.youtube.com/channel/UCt36CWL85NGtOgUMZ2X6x5g/join

????????????
Avocode - лучше обезболивающее для того, кому приходится верстать из PSD, AI, XD, Sketch и Figma. Регистрируйся и получи скидку 10% на первую покупку, введя в соответствующем поле промо-код ‘nikita’: https://avocode.com/pricing

Обучающие ролики по Avocode: http://makeweb.me/avocode-lessons-yt-desc

✊✊✊
Персональные уроки по веб-разработке: http://makeweb.me/lessons-video
Отзывы: http://makeweb.me/lessons-feedback
Связаться: https://vk.com/write-96139053 / [email protected]

✍✍✍
Присоединяйся к нашему Telegram-чату тут http://makeweb.me/telegram-mw-1 или, если не работает, тут http://makeweb.me/telegram-mw-2
Или по имени чата в поиске - @makewebme