Урок 23 · CSS

Одна страница из карточек, меню и формы

Отдельные приёмы имеют смысл, когда стоят на одной странице и не спорят друг с другом.

Почему это следующий шаг

Это последний CSS-урок маршрута перед JavaScript. Здесь ничего нового ради новизны: только сборка.

Как сделать

Возьми шаблон HTML, меню, три карточки и короткую форму. Подключи один файл стилей. Сначала мобильная колонка, потом ряд карточек и строка меню. Проверь фокус, тёмные цвета если они есть, и ширину 360 и 1200 пикселей. Не добавляй новый декоративный блок, пока эти части не ровные.

/* порядок в файле */
/* 1. переменные */
/* 2. базовая типографика */
/* 3. шапка и меню */
/* 4. карточки */
/* 5. форма */
/* 6. широкая сетка */

Что проверить

• Один CSS-файл, а не стили в каждом теге.
• На 360px нет горизонтальной прокрутки.
• Карточки, меню и форма выглядят частями одного сайта.