Целью домашнего задания является подготовка статический верстки сайта (так называемой «рыбы»). Верстку можно размещать в обычных html файлах, в директории public. Также возможно сразу размещать верстку в шаблонах Django. Во втором случае понадобится создать примитивные view и роутинг в urls.py самостоятельно. Подробнее работа с роутингом и шаблонизацей обсуждается в ДЗ2.
В файле base.html нужно создать основную верстку (любой) страницы. Для упрощения задачи нужно скачать и использовать CSS библиотеку Bootstrap. Файлы (как свои CSS стили, так и файлы Bootstrap) нужно разместить в директории static.
При верстке страницы важно обратить внимание на:
- Терпимые отступы (padding/margin) между блоками;
- Юзерблок в шапке (для авторизованного и неавторизованного пользователя);
- Поисковая строка и логотип;
- Блоки в правой колонке.
В файле index.html нужно создать верстку для списка вопросов. Основную верстку (layout) можно просто скопировать из base.html. При использовании шаблонизатора - вам необходимо унаследовать (extends) шаблон от базового.
Обратить внимание на:
- Терпимые отступы (padding/margin) между блоками;
- Аватарки;
- Кнопки лайков;
- Тэги, счетчики ответов, остальные ссылки;
- Пагинатор (список номеров страниц).
HTML разместить в файле question.html.
Обратить внимание на:
- Список тегов у вопроса;
- Листинг ответов по верстки аналогичен листингу вопросов;
- Пагинатор ответов (список номеров страниц).
HTML разместить в файле ask.html.
Обратить внимание на:
- Вывод сообщения об ошибках формы и подсказок к полям. В верстке должны отображаться ошибки, чтобы было понятно как они сверстаны. Можно найти пример на макетах ниже;
- Ширину полей ввода;
- Максимальную длину полей ввода.
HTML разместить в файлах login.html и signup.html соответственно.
Обратить внимание на:
- Вывод сообщения об ошибках формы и подсказок к полям. В верстке должны отображаться ошибки, чтобы было понятно как они сверстаны. Можно найти пример на макетах ниже;
- Ширину полей ввода;
- Максимальную длину полей ввода.
Подробное описание страниц и блоков в техническом задании.
Верстка общего вида (layout) страницы - 4:
- общий вид: 2 колонки, header, footer - 1;
- правая колонка - 1;
- блок авторизованного юзера - 1;
- поисковая строка и логотип - 1.
Верстка листинга вопросов - 3:
- общий вид (паддинги, аватарка) - 1;
- кнопки лайков - 1;
- теги, счетчики ответов, остальное - 1.
Верстка страницы вопроса - 3:
- общий вид - 1;
- чекбокс “правильный ответ”, кнопки лайков - 1;
- форма ответа - 1.
Верстка формы добавления вопроса - 3:
- общий вид - 2;
- сообщения об ошибках - 1.
Верстка форм логина и регистрации - 3:
- общий вид - 2;
- аватарка и сообщения об ошибках - 1.
- Общая информация про Bootstrap;
- Сетка Bootstrap;
- Готовые блоки в Bootstrap;
- Верстка форм в Bootstrap;
- Основы шаблонизатора Django;
- Как отрисовать шаблон.