Итоговый проект — адаптивный сайт-визитка
Сайт, который не стыдно отдать заказчику и открыть на любом телефоне
Что покажет проект
- Семантическую разметку страницы без ошибок валидатора
- Раскладку на Flexbox и Grid без жёстких размеров
- Mobile first: одна страница для телефона, планшета и компьютера
- Форму с подписями, проверкой и согласием на обработку персональных данных
- Доступность: заголовки, alt, контраст, работа с клавиатуры
- Опубликованный сайт по адресу в интернете
Постановка
Нужен сайт-визитка специалиста или небольшого дела: фотографа, репетитора, мастерской, кофейни — выберите сами или возьмите реального заказчика из знакомых. Посетитель за минуту должен понять, кто это, что предлагает и сколько стоит, посмотреть работы и оставить заявку. Большинство посетителей придут с телефона.
Так выглядит эталонное решение преподавателя — визитка фотографа (картинки в эталоне — схематичные заглушки):
Тот же сайт на телефоне шириной 390px — без отдельной мобильной версии, той же разметкой:
Свой проект делайте в своём дизайне и со своим содержанием: копия эталона не засчитывается.
Что должно получиться
| Требование | Модуль |
|---|---|
Скелет документа: lang, charset, viewport, свой title и description, значок вкладки | 01, 08 |
Семантика: header, nav, main, section, footer; один h1, уровни без пропусков | 02 |
| Разделы: кто вы, услуги с ценами, работы (галерея или примеры), контакты | 02 |
Форма заявки: подписи, типы полей, required, флажок согласия и ссылка на политику обработки данных | 03 |
| Один файл стилей, переменные для цветов, оформление через классы | 04 |
box-sizing: border-box, колонка по центру через max-width | 05 |
| Шапка и меню на Flexbox, карточки и галерея на Grid | 06, 07 |
Mobile first, не меньше двух медиазапросов min-width; без горизонтальной прокрутки от 320 до 1440px | 08 |
Картинки сжаты, с alt, width и height; max-width: 100% | 02, 08 |
| Видимый фокус, контраст текста не ниже 4,5 : 1, путь наверх из середины страницы | 04, 08 |
| HTML и CSS без ошибок валидатора; сайт опубликован | 01, 08 |
Порядок работы
- Сначала содержание: тексты, цены, отобранные и сжатые картинки. Вёрстка без текста — гадание.
- Затем разметка без единой строки CSS: страница должна читаться и в таком виде. Проверка валидатором.
- Затем стили для телефона: окно браузера узкое или режим устройства 390px.
- Затем медиазапросы для планшета и компьютера — по мере того как раскладка начинает выглядеть плохо при растягивании окна.
- В конце — проверка по чек-листу модуля 08 и публикация.
action адрес-заглушку и метод post; принимать заявки можно научиться в курсе «Основы Python» и по документации фреймворка.Подробные требования, что сдаётся и критерии оценивания — в задании на портале.
Курс пройден
Вы прошли курс «Основы HTML и CSS». Дальше — «Основы Python» (обработка заявок с формы на сервере), «Основы Git» (история изменений сайта) и «Основы Linux» (свой сервер с nginx).