# Неделя #2: Разметка и стилизация
# Задачи на неделю:
- Внимательно изучить все материалы второй недели:
- Видеокурс «CSS. Работа со стилями»
- Видеокурс «Работа со шрифтами»
- Видеокурс «Основы верстки. Блочная модель»
- Воркшоп «Проект. Стили»
- Расположить элементы главной страницы на необходимых местах при помощи свойств позиционирования или поведения блочной модели.
- Отстилизовать все элементы главной страницы.
Обратите внимание
На этом этапе файлы касающиеся тестовой страницы можно удалить (картинки и папку folder)
# Как все успеть
# 🗓 Понедельник
Посмотреть видео об инструменте Figma
Установить десктопное приложение: Figma
Изучить видеокурс CSS. Работа со стилями и пройти тест
# 🗓 Вторник
Изучить видеокурс Работа со шрифтами и пройти тест
Подключить необходимые шрифты в проект.
# 🗓 Среда
Изучить видеокурс Основы верстки. Блочная модель и пройти тест
Обязательно реализовать все примеры из данного курса, особенно то, что касается позиционирования
# 🗓 Четверг
Посмотреть воркшоп Проект. Стили
Стилизуем блоки главного экрана
Выравниваем блоки по Perfect Pixel
# 🗓 Пятница
Стилизуем блоки с основным контентом страницы: секцию с товарами/предложениями, новостями и о компании.
# Реализация
На данном этапе уже можно расположить элементы на своих местах при помощи свойства управления поведением (display) и свойств позиционирования. В будущем мы сделаем это более подходящим способом при помощи свойств флексбокса
# 🗓 Выходные
Стилизуем footer
Доводим работу до необходимого результата
Элементы считаются стилизованными, когда:
- Шрифты похожи по своему отображению, цвету и начертанию на дизайн-макет.
- Вставлены картинки, и их размер и оформление соответствуют макету (обработка изображений через свойства css).
- Блоки закрашены соответствующим фоном (если этого требует дизайн).
- Размеры и отступы элементов соответствуют дизайн-макету.
# Необходимые для стилизации свойства CSS
| Название | Назначение |
|---|---|
| width | ширина элемента |
| height | высота элемента |
| border-radius | радиус скругления уголков |
| background | управление заливкой |
| border | параметры оформления рамки |
| margin | внешние отступы |
| padding | внутренние отступы |
| display | поведения модели элемента |
| color | цвет шрифта |
| font | настройки параметров шрифта |
| text-align | выравнивание inline элементов |
| list-style | оформление маркеров списка |
| text-decoration | оформление текста |
| box-shadow | тень |
| position | управление способом позиционирования |
| overflow | работа с переполнением блока |