Урок 11. «Вёрстка экранов на flexbox» — HTML и CSS

Курс: Веб-программирование, урок 11 из 12
Тема по программе: Продолжение вёрстки экрана
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта

Это сокращённое описание урока. Полные материалы — в курсе «Веб-программирование». Первый урок курса целиком можно скачать бесплатно в разделе «Бесплатно».

Цель урока

Сверстать два экрана сайта по макету.

Что делаем на уроке

Белый текст на первом экране, надпись по центру.
Текстовый блок шириной 40 % от родителя.
Свойства line-height, text-transform: uppercase и opacity.
Второй экран: flex-контейнер и выравнивание по двум осям.
align-items: flex-start, чтобы картинки не растягивались по высоте.
«Резиновые» картинки, тени, текст галереи по разным краям.

Что объяснить детям

line-height задаёт высоту строки, text-transform: uppercase делает все буквы заглавными, opacity — прозрачность от 0 до 1.
По умолчанию flex растягивает элементы по поперечной оси (align-items: stretch), поэтому для картинок ставят flex-start.
«Резиновая» картинка подстраивается под ширину окна.

Что в полном комплекте

12 конспектов занятий со скриншотами — по одному на урок
Методика проведения с подробным описанием хода урока
Готовые файлы проекта к модулям 2 и 3 — если группа отстаёт, не нужно собирать проект с нуля

Предыдущий урок — Разметка сайта по макету. Следующий — Завершение сайта и публикация. Все уроки курса: Что такое веб-разработка · Основные HTML-теги · Знакомство с CSS · Вёрстка страницы блога · Фотогалерея: разметка · Фотогалерея: отступы и стили · Позиционирование: display и flex · Галерея: анимация и публикация · Знакомство с Photoshop · Разметка сайта по макету · Завершение сайта и публикация.