Урок 10. «Разметка сайта по макету» — HTML и CSS

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

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

Цель урока

Сделать HTML-разметку сайта по дизайн-макету.

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

Подключаем стили, создаём main.
Три экрана — три контейнера: div.container*3 и классы first, second, third.
Первый экран: надпись и контейнер с тремя строками текста.
Второй экран: заголовок и галерея в общем контейнере, текстовый блок.
Третий экран: контейнер с двумя абзацами.
Начало стилей: сброс отступов и подключение шрифта.

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

Имена классов дают по смыслу: через месяц должно быть понятно, что это за блок.
Связанные элементы — например, заголовок и галерею — кладут в общий контейнер.

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

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

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