Урок 12. «Завершение сайта и публикация» — HTML и CSS

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

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

Цель урока

Закончить вёрстку сайта по макету и опубликовать его.

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

Третий экран: flex, выравнивание по центру по обеим осям, flex-direction.
Рамка border вокруг текста.
Шрифт Roboto Light с fonts.google.com.
Публикация: перетаскиваем папку проекта в репозиторий имя_пользователя.github.io.

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

flex-direction меняет главную ось: элементы встают не в строку, а в столбец.
Онлайн-шрифт подключают ссылкой в head, а затем указывают в font-family.

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

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

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