Цель заброшена
Автор не отписывался в цели 5 лет 15 дней
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 — начать рекомендуем с официальной документации по вебпаку, там отличный обзор всех нужных концепций.
Курсы:
- курс от 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.
Туториалы:
- Умение подключать и настраивать шрифты так, чтобы они корректно отображались в разных браузерах.
- Умение искать, подключать и настраивать JavaScript-библиотеки и jQuery-плагины в частности.
- Навыки работы с макетами в Figma - Старт в Figma для верстальщиков (статья от HTML Academy): https://bitly.su/eHx9Ei
Если вы уверенно владеете этими темами, то можете пропускать данное задание и приступать к следующему.
Дополнительные ссылки:
- Обзор редакторов кода и плагины к ним: https://htmlacademy.ru/blog/40-editors-for-the-coders (рекомендуем использовать VSCode или WebStorm)
- Словарь терминов по фронтенду (так же стоит посмотреть MDN Web Docs Glossary: Definitions of Web-related terms)
- Подкасты:
- Frontend Weekend: https://soundcloud.com/frontend-weekend
- Frontend Юность: https://soundcloud.com/frontend_u
- LoftBlog: https://soundcloud.com/loftblog
Критерий завершения
материал пройден
- 1512
- 20 июня 2019, 14:52
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением