Урок 7. «Позиционирование: display и flex» — HTML и CSS

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

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

Цель урока

Научиться позиционировать элементы на странице с помощью display и flex.

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

display: inline, block и flex.
div по умолчанию блочный — каждый начинается с новой строки.
main становится flex-контейнером, плитки выстраиваются в ряд.
Заголовок на всю ширину, плитки по центру (justify-content).
Размеры плиток через calc() — по две в строке.
Фоновые картинки background-image для плиток.

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

Строчный элемент стоит в строке с соседями, блочный начинается с новой строки.
Flex — гибкая сетка: контейнер сам расставляет вложенные элементы.
calc() считает размер прямо в CSS, например половину ширины минус отступ.

Задание

Поставить фоновое изображение в каждую плитку галереи.

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

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

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

{{title}}