Урок 50. Обзор урока: Итоговый проект: адаптивный многостраничный сайт

Финальный проект

Это капстоун курса: новой темы нет — мы соединяем всё изученное в один работающий сайт. Семантический HTML, CSS-токены, Flexbox, Grid, адаптивные изображения, медиазапросы, доступность, валидация и чек-лист производительности — в одном многосекционном проекте.

Результат: мини-сайт из главной, страницы работ, страницы «О нас» и контактов. Все страницы открываются с диска без сервера.

Чек-лист качества

Перед сдачей проект проходит приёмку по шести критериям (подробности — в теории и справочнике):

• Семантика — теги по смыслу, один h1.
• Адаптивность — mobile-first, 320/768/1024/1440px.
• Доступность — alt, контраст, :focus-visible, клавиатура.
• Производительность — loading="lazy", width/height.
• Валидность — W3C Markup + CSS Validator.
• Именование — единый БЭМ-стиль классов.

Что применяем

• semantic HTML
• responsive layout
• multi-page site
• Flexbox
• CSS Grid
• accessibility
• validation
• performance
• deployment checklist

Разделы урока

Навигация

• ← Урок 49: Оптимизация и производительность
• План дальнейшей практики →