Мессенджер «Hexlet Chat»
Создайте свои компоненты и утилиты используя все доступные средства. При выполнении проекта вы используете все знания, которые приобрели в профессии. Структурно проект имеет две страницы и 5 различных экранов. Проект адаптируется под мобильные и десктопные устройства. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma.
Цель
Настройка окружения
Этот проект — самый обширный в области настройки окружения. Студенты создадут рабочую среду с использованием:
- Git
- SASS
- Pug
- Bootstrap
- Gulp
- Surge
Используя таск-менеджер Gulp создастся рабочая среда, которая будет автоматически компилировать Pug, SASS, минифицировать HTML и оптимизировать изображения. Большое внимание уделяется организации файловой структуры. Помимо рабочей директории весь проект будет собираться в отдельную директорию, которая является рабочей версией, готовой к деплою на сервер Surge.
Центральным местом хранения файлов и директорий проекте является Github. По своей структуре Github не просто сервис для хранения кода, а самая настоящая социальная сеть. В ней можно найти единомышленников и новых знакомых. Наличие портфолио на Github ценят работодатели и повышают ваши шансы на получение работы. Третий проект станет отличным дополнением к портфолио студента.
Работать с макетом студент будет в онлайн среде Figma, которая предоставляет широкий набор возможностей как для дизайнеров, так и для верстальщиков. С помощью Figma студент сможет увидеть макет в нескольких разрешениях, а также измерить ширину и отступы любого элемента.
Вёрстка
В проекте студенты создадут пользовательские компоненты и утилиты на основе Bootstrap. Именование основывается на концепциях OOCSS и Atomic CSS, используемыех в первом и втором проекте.
Центральной темой третьего проекта является создание своих компонентов, используя миксины и переменные Bootstrap. Это позволит масштабировать и обновлять версии Bootstrap без боязни переопределения собственных стилей.
Весь проект автоматизируется с помощью таск-менеджера Gulp, который следит за изменениями в файлах и автоматически компилирует их. С его помощью студенты автоматизируют работу с SASS, Pug, JavaScript и изображениями.
В процессе вёрстки студент опирается на несколько основных принципов:
Модульность пользовательских компонентов. Новые компоненты не должны быть привязаны к любым частям вёрстки и могут быть перенесены в любую область сетки при любом разрешении.
Изолированность пользовательских утилит. Новые утилиты не должны быть привязаны к компонентам и смогут использоваться в любом месте проекта.
Вёрстка с учётом будущих изменений. Хороший верстальщик следит за возможностями будущих изменений. Будь то добавление текста или новых элементов в уже существующие компоненты. Такие изменения не должны приводить к «поломке» вёрстки.
Проверки наставника
Проверка проекта идет по пунктам указанным ниже. Если на верхнем уровне есть серьезные проблемы, то проверка останавливается до исправления.
Визуальное соответствие шаблону. В проекте студент чётко придерживается заданного макета и учитывает все отступы и размеры.
Проверка архитектуры вёрстки. Один из самых долгих этапов при работе с ментором. На этом этапе зачастую происходит переделывание общей структуры вёрстки и создание такой, которая позволяет с лёгкостью добавлять и удалять элементы.
Проверка пользовательских компонентов и утилит. Созданные студентами модули используют возможности Bootstrap и не перезаписывают CSS.
Соответствие принципу максимальной переиспользуемости CSS-кода.
Описание
В проекте студенты создадут проект онлайн-чата, в котором пользователи могут обмениваться сообщениями и вести список контактов. Проект имеет две основные страницы:
- Основная версия чата. В ней доступны просмотр контактов, доступных чатов и профиль пользователя.
- Диалоговая версия чата. Помимо существующих страниц добавится текущий чат с сообщениями и возможностью написать сообщение.
