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

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

Ролик показывает подход к верстке простого современного лендинга из PSD-дизайна с использованием Pug, SCSS, Webpack, Flexbox, Avocode. Разбираем возникающие по ходу работы ситуации несколькими способами.

СОДЕРЖАНИЕ:
00:00:00 Верстка секции How It Works.
00:04:45 Про пространства имен в CSS и как это помогает. Не втискивайтесь в методологию!
00:09:33 Верстка секции Offer.
00:22:16 Верстка секции Plus And Minus. Пример выноса общих классов из области видимости секцию в глобальную область. Теги br и интерполяция в Pug.
00:36:41 Как я думаю про CSS в плане оптимизации и поддерживаемости? Про порядок в стилях.
00:38:55 Верстка секции Reviews. Шахматный порядок блоков на CSS. Селекторы even и odd.
00:53:08 Треугольники на CSS и понимание того, как это работает.
00:57:58 Верстка секции Request Form. Вынос блока за границы секции с помощью абсолютного позиционирования. HTML-формы и input’ы.
01:00:23 Вынос и реиспользование блока HTML в виде Pug-include’а и отдельного CSS.
01:05:16 Верстаем саму форму и кнопку отправки.
01:11:15 Маленький трюк с “безопасной” подгонкой текста под ширину.
01:17:46 Верстка секции Footer.
01:22:35 Пример того, как использование Git реально спасает.

Исходники к ролику:
https://github.com/makewebme/website-tech2020-simple-landing

Основы Flexbox:
https://youtu.be/H6O90IIqrtA

Курс по Git:
https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6

????????????
Стань спонсором канала и получи бонусы: 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