Планируем дизайн

Добро пожаловать на последний урок курса CSS! Вы уже знаете достаточно, чтобы самостоятельно оформить целую веб-страницу, этим вы сейчас и займётесь.

Оформить можно одну из двух страниц:

• Вашу собственную страницу из курса HTML. Если в конце курса HTML вы сохранили её на компьютере, то в следующем упражнении вставите её код в редактор. Откройте файл index.html в текстовом редакторе (щёлкните по нему правой кнопкой мыши и выберите «Открыть с помощью»; двойной щелчок откроет его в браузере), выделите весь код (Ctrl+A, на Mac — Cmd+A) и скопируйте его (Ctrl+C, на Mac — Cmd+C).
• Нашу готовую страницу небольшого приюта для кошек, которую сейчас можно увидеть в редакторе и в предпросмотре. В ней есть шапка с навигацией, несколько разделов, карточки кошек и подвал, но пока нет стилей.

Прежде чем писать CSS, стоит составить короткий план. Так делают и дизайнеры: если несколько вещей решить заранее, вся страница выглядит цельно.

• Цвета. Выберите цвет фона, цвет текста и один-два акцентных цвета, например для шапки, заголовков или ссылок. Следите, чтобы текст хорошо выделялся на фоне: тёмный на светлом или наоборот. Простой приём: выберите один оттенок в HSL и меняйте только насыщенность и светлоту.
• Шрифт. Выберите шрифт на Google Fonts. Достаточно одного шрифта на всю страницу, максимум двух: например, один для заголовков, а другой для текста.
• Раскладка. Подумайте, как будут расположены части страницы. Например: содержимое в колонке посередине страницы, ссылки навигации в ряд друг рядом с другом (flexbox), а карточки в сетке (CSS Grid).

Лучшее место для плана — комментарий в начале таблицы стилей. Каждый раз, когда вы возвращаетесь к коду, вы сразу видите, какие цвета и шрифты использует страница. Он может выглядеть так:

/*
	Мой план
	Цвета: фон #fdf6ec, текст #3d2c2e, акцент #b8482e
	Шрифт: Nunito с Google Fonts, запасной sans-serif
	Раскладка: содержимое в колонке посередине, ссылки в ряд,
	карточки кошек в сетке
*/

В следующем упражнении вы найдёте список всего, что должна содержать таблица стилей. Проверки смотрят только на то, какие возможности CSS вы используете, но никогда — на конкретные цвета, шрифты или размеры, так что вид вашей страницы остаётся на ваше усмотрение.

Совет. Ваш код не сохраняется, когда вы покидаете упражнение. Поэтому, прежде чем продолжить, скопируйте свой план, а в следующем упражнении вставьте его поверх нашего образца.