# Неделя #3: Формирование лейаута

# Задачи на неделю:

  1. Внимательно изучить все материалы второй недели:
    • Видеокурс Построение лейаута и БЭМ-нейминг
    • Видеокурс Flexbox
    • Воркшоп Проект. Flexbox
  2. Применить свойства флексбокса для элементов главной страницы.
  3. Сверстать страницу Услуги (разметка страницы и стилизация).

# Как все успеть

# 🗓 Понедельник

Изучить видеокурс Построение лейаута и БЭМ-нейминге Данный видеокурс поможет более правильно разметить страничку, создавая необходимые для структуры блоки.

Пройти тестирование по данной теме

# 🗓 Вторник

Изучить видеокурс FlexBox

Применяем свойства флексбокса на главной странице.
Применить их необходимо к тем элементам, где был использован inline-block или абсолютное позиционирование в тех местах, где это было не нужно.

# 🗓 Среда

Пишем разметку для страницы Услуги

Стилизуем странцу Услуги (главный экран + блок с услугами)

Обратите внимание:

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

# 🗓 Четверг

Стилизум страницу Услуги (блок партнеров + футер).

Смотрим воркшоп Проект. Flexbox.

# 🗓 Пятница

Дорабатываем страницы после просмотра воркшопа

# 🗓 Выходные

Приводим верстку в состояние Perfect Pixel

Сдаем проект на проверку

# Результат

  • Полностью сверстанные 2 “внутренние” страницы сайта

  • Верстка похожа на дизайн-макет

  • Динамические элементы проекта пока можно не реализовывать. К примеру, выпадающее меню в блоке контактов.

Правило перфекциониста

Незначительное расхождение элементов в макете и элементов в верстке допускается, но в разумных пределах (до 5 пикселей, но пользоваться этим допущением стоит только по необходимости). Это касается измерений элементов (длина/ширина), а также отступов между элементами и внутренних отступов.

Также есть исключения, например, если аватар пользователя размером 30 x 30, то таким размером он и должен быть. Не стоит делать его больше или меньше без острой необходимости (к примеру, дизайнер не досмотрел и контент не умещается на экране телефона. В таких случаях стоит обсудить это с дизайнером. Но если такой возможности нет, то верстальщик всегда должен действовать во благо User eXperience).

В основном, подобные расхождения допустимы в текстовых блоках либо в тех случаях, когда у одинаковых по смыслу, назначению и отображению блоков в макете "гуляют" размеры либо отступы. Т.е из-за лени либо невнимательности дизайнера где-то у блока отступ одного размера, а где-то другого. Тогда можно брать среднее значение вместо того, чтобы создавать множество не нужных модификаторов для этого блока под каждый отступ.

# Необходимые для стилизации свойства CSS

Название Назначение
display управление моделью поведения элемента
flex управление пропорциями флекс-элементов
justify-content выравнивание элементов по главной оси
align-items выравнивание по поперечной оси
align-self выравнивание по поперечной оси отдельного элемента
flex-flow управление элементами во многострочном контейнере

# Результат

← Неделя #4: Анимированные элементы →