Цель заброшена

Автор не отписывался в цели 4 года 11 месяцев 25 дней

Общая

Step 2. Практика верстки

Описание появится по ходу выполнения шагов.

Задание 2. Практика верстки. 2-4 месяца

После того, как вёрстка освоена хотя бы в основных моментах, самое время попробовать применить все полученные знания на практике.

Пройдите небольшой опрос — в конце опроса вы найдёте ссылку на чат для участников второго этапа. Теперь каждый день, когда вы будете делать задания, мы просим присылать небольшое саммари по итогу дня: над чем вы работали, что получилось, с какими трудностями столкнулись. А так же задавайте вопросы и помогайте другим участникам. Описание задания Макет страниц по поиску номеров в отеле: https://www.figma.com/file/MumYcKVk9RkKZEG6dR5E3A/. В макете на первой вкладке представлен UI Kit. UI Kit — набор всех элементов со всех страниц во всех состояниях.Дополнительно почитать, что такое UI Kit можно из статей:

а на второй вкладке сами страницы по поиску номеров отеля.

Прошлая версия задания: ранее здесь требовалось сверстать макет резюме и макет UI Kit, сейчас эти макеты заменены одним проектом, описанным выше. Тем, кто уже начал делать прошлую версию, можно продолжать работать по ней.

Требования к верстке:

  • Вся вёрстка должна быть выложена на Github в ваш публичный репозиторий, результатом задачи будет как раз этот репозиторий. Под каждый проект создаём новый репозиторий. Присылать ссылку на него необязательно, это можно будет сделать только в пятом задании в личные сообщения организатору.
  • Для второго задания выделить отдельный репозиторий (мы потом отдельные issues можем туда делать). Макет опубликовать через Github Pages: https://youtu.be/9h1UiqBuxO0, чтобы мы могли быстро проверить конечный результат.
  • Ссылку на Github Pages добавить в Readme проекта, чтобы мы при проверке могли быстро перейти к самой вёрстке.
  • С начала работы коммиты в репозиторий делать как можно чаще, минимум раз в день, когда было что-то сделано, а лучше чаще (для каждого нового блока). Не надо копить многодневную работу и сваливать это одним коммитом, для таких вещей лучше использовать ветки. Не бойтесь незаконченные изменения коммитить, в этом нет ничего страшного.
  • Все коммиты должны иметь осмысленные названия.
  • Ориентироваться на последние версии Chrome и Firefox. На Safari и старые IE можно забить для этих заданий
  • Все отступы и размеры элементов должны быть соблюдены, для этого во время работы используйте расширениеPerfectPixel.
  • Все шрифты должны быть подключены и сгенерированы в форматах .ttf, .woff, .svg в сервисеFont2Web. https://google-webfonts-helper.herokuapp.com/fonts
  • Количество картинок должно быть минимальным: если элемент состоит из текста, он должен быть текстовым, если элемент — это просто круг, сделать его чистым css, без картинок.
  • Все страницы должны быть по максимуму responsive (здесь примеры чем responsive отличается от adaptive и liquid). Можно максимальной ширину сделать 1920, а минимальной 320 В нынешнем макете ширина некоторых инпутов — 320, ширина карточек вместе с тенями и отступами — 410. Как быть на экранах от 320 до 410 пикселей и не быть съеденным дизайнером? Убирать отступы? Ужимать элементы? Склоняюсь ко второму варианту + к уборке теней + к переносу поля «выезд» на новую строку. Ужимать элементы, в том числе иногда вынося некоторые подэдементы на новые строки. Тени лучше целиком не убирать, но можно уменьшать. А как поступать с фоновым изображением? Ужимать, конечно же, а между этими значениями подстраиваться под ширину страницы.
  • Компонентность. В стандартах будет требоваться использование БЭМ, так что предлагаем сразу его использовать. Необходимо настроить Parcel или Webpack и шаблоны, чтобы каждый БЭМ-овский блок находился в отдельной папке (там будет шаблон самого блока и все его стили, скрипты и картинки). Затем в index.pug вы будете просто подключать самые верхние блоки, а они уже будут внутри себя импортировать вложенные блоки, где надо. Каждый отдельный элемент лучше делать отдельным БЭМ-блоком. Мы сделали небольшой туториал по компонентнуой архитектуре, где вы можете понять основные принципы.
  • Использовать в макетах препроцессоры по максимуму. Вам в любом случае надо будет это сделать для соблюдения предыдущего требования про компонентность, импорты и вставки компонентов друг в друга вы на сыром HTML не сделаете :) Подключайте Parcel (или Webpack), он же нужен будет для 4-го задания, и через него настройте сборку Pug (замена HTML) и SCSS (замена CSS). Конкретно эти технологии просто рекомендации, можете использовать другие препроцессоры, главное, чтобы они позволяли вам сделать вкладываемые компоненты с чёткими контрактами.
  • Небольшие расхождения в PerfectPixel допускаются в местах, где есть неточности в макете (пример: разная ширина у одинаковых блоков).
  • Макет был подобран так, чтобы вы явно почувствовали типичную проблему верстки — когда есть несколько (от 3-х до 100) страниц верстки, в которых используются часто похожие (совсем похожие или с небольшими отличиями) блоки.
  • UI-Kit — это единый макет дизайна и единая страница верстки, с которой берут типовые блоки и используют в конечных страницах.
  • В этом задании вам нужно сверстать все элементы из макета, разбив на компоненты. То есть прямо по макету накидать на одной странице все компоненты
  • Сделать отдельно сами страницы проекта по поиску номеров в отеле, где эти блоки будут использоваться. Обратите внимание, что некоторые блоки будут в немного измененных модификациях (в разных местах будут разный цвет, разные масштабы или еще что-то подобное).
  • Так же такие вещи,как бегунки, календари и дропдауны должны быть сделаны через js, можете подключать какие угодно jQuery-плагины для этого ( Можно без плагинов обойтись? Мне удобнее закойдить все отдельными скриптами. Можно, конечно, без плагиноввообще ради этого макет и подбирался, чтобы был опыт экспериментов с подключением jQuery и его плагинов).

Задание вам даст

  • Понимание, как верстать большие макеты с большим количеством одинаковых элементов.
  • Навыки проектировать компонентную архитектуру, где каждый блок можно переиспользовать.
  • Работу с препроцессорами Pug и SCSS
  • Базовые знания БЭМ.
  • Навыки отзывчивой вёрстки.
  • Самые базовые навыки работы с JavaScript.
  • Базовые знания систем сборок Parcel или WebPack по выбору.

Getting Started with WebPack — начать рекомендуем с официальной документации по вебпаку, там отличный обзор всех нужных концепций.

Курсы:

Статьи:

Туториалы:

  • Умение подключать и настраивать шрифты так, чтобы они корректно отображались в разных браузерах.
  • Умение искать, подключать и настраивать JavaScript-библиотеки и jQuery-плагины в частности.
  • Навыки работы с макетами в Figma - Старт в Figma для верстальщиков (статья от HTML Academy): https://bitly.su/eHx9Ei

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

Дополнительные ссылки:

  1. Обзор редакторов кода и плагины к ним: https://htmlacademy.ru/blog/40-editors-for-the-coders (рекомендуем использовать VSCode или WebStorm)
  2. Словарь терминов по фронтенду (так же стоит посмотреть MDN Web Docs Glossary: Definitions of Web-related terms)
  3. Подкасты:
    1. Frontend Weekend: https://soundcloud.com/frontend-weekend
    2. Frontend Юность: https://soundcloud.com/frontend_u
    3. LoftBlog: https://soundcloud.com/loftblog

 Критерий завершения

материал пройден

  • 1491
  • 20 июня 2019, 14:52
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?