Урок 8. «Галерея: анимация и публикация» — HTML и CSS

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

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

Цель урока

Доделать галерею и выложить сайт в интернет.

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

Тень для main.
Свой шрифт через @font-face.
Псевдокласс :hover — эффект при наведении на фото.
Плавность через transition, анимация тени для объёма.
Аккаунт на GitHub и репозиторий «имя_аккаунта.github.io».
Загружаем папку проекта — через некоторое время сайт открывается по адресу имя_аккаунта.github.io/папка_проекта.

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

Псевдокласс :hover срабатывает, когда на элемент наведена мышь.
transition делает изменения плавными, а не рывком.
GitHub Pages бесплатно публикует простые сайты прямо из репозитория.

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

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

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