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

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

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

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

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

• Что такое UI-kit и с чем его нужно есть!
• Understanding UI Kits

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

Прошлая версия задания: ранее здесь требовалось сверстать макет резюме и макет 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 — начать рекомендуем с официальной документации по вебпаку, там отличный обзор всех нужных концепций.

Курсы:

• курс от LoftBlog
• курс от WebForMyself
• курс от LearnJavaScript
• курс от Jack Coder
• курс от Дмитрия Лаврика

Статьи:

• Установка и настройка Webpack 4 для работы с проектом
• Как подружить Webpack + jQuery + jQuery plugins?
• A Beginner’s Guide to Webpack 4 and Module Bundling
• Простой статический сайт на Webpack 4
• A tale of Webpack 4 and how to finally configure it in the right way. Updated.

Туториалы:

• From apprentice to master
• Webpack 4 Tutorial: from 0 Conf to Production Mode

• Умение подключать и настраивать шрифты так, чтобы они корректно отображались в разных браузерах.
• Умение искать, подключать и настраивать 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