Урок 4. «Вёрстка страницы блога» — HTML и CSS
Курс: Веб-программирование, урок 4 из 12
Тема по программе: Вёрстка страницы блога
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта
Тема по программе: Вёрстка страницы блога
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта
Это сокращённое описание урока. Полные материалы — в курсе «Веб-программирование». Первый урок курса целиком можно скачать бесплатно в разделе «Бесплатно».
Цель урока
Сверстать простую страницу блога.
Что делаем на уроке
- Центрируем div и задаём ему ширину 70 %.
- Текст-«рыба» вместо настоящего текста.
- Шрифт абзацев: размер и гарнитура.
- Тень box-shadow и внутренний отступ.
- Заголовок по центру (text-align: center) с отступом снизу.
Что объяснить детям
- Текст-«рыба» — бессмысленный текст-заполнитель, чтобы оценить вид страницы, пока нет настоящих текстов.
- Ширина в процентах считается от родительского элемента, поэтому блок подстраивается под окно.
Что в полном комплекте
- 12 конспектов занятий со скриншотами — по одному на урок
- Методика проведения с подробным описанием хода урока
- Готовые файлы проекта к модулям 2 и 3 — если группа отстаёт, не нужно собирать проект с нуля
Предыдущий урок — Знакомство с CSS. Следующий — Фотогалерея: разметка. Все уроки курса: Что такое веб-разработка · Основные HTML-теги · Знакомство с CSS · Фотогалерея: разметка · Фотогалерея: отступы и стили · Позиционирование: display и flex · Галерея: анимация и публикация · Знакомство с Photoshop · Разметка сайта по макету · Вёрстка экранов на flexbox · Завершение сайта и публикация.
