Урок 6. «Фотогалерея: отступы и стили» — HTML и CSS

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

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

Цель урока

Разобраться с отступами и начать оформлять галерею.

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

Сброс отступов, чтобы все браузеры показывали страницу одинаково.
margin с одним, двумя, тремя и четырьмя значениями.
margin: auto — выравнивание по горизонтали.
padding и box-sizing.
main шириной 70 % с отступом 50 px, по центру.
Светло-серый фон страницы и белый фон main.

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

Четыре значения margin идут по часовой стрелке: сверху, справа, снизу, слева.
При двух значениях первое — сверху и снизу, второе — справа и слева.

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

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

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