Проект #3

Мессенджер «Hexlet Chat»

Верстальщик

Третий проект посвящён работе с Bootstrap. Создайте свои компоненты и утилиты используя все доступные средства. При выполнении проекта вы используете все знания, которые приобрели в профессии. Структурно проект имеет две страницы и 5 различных экранов. Проект адаптируется под мобильные и десктопные устройства. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma.

2-4
недели

Цель

Настройка окружения

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

  • 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 и изображениями.

В процессе вёрстки студент опирается на несколько основных принципов:

  • Модульность пользовательских компонентов. Новые компоненты не должны быть привязаны к любым частям вёрстки и могут быть перенесены в любую область сетки при любом разрешении.

  • Изолированность пользовательских утилит. Новые утилиты не должны быть привязаны к компонентам и смогут использоваться в любом месте проекта.

  • Вёрстка с учётом будущих изменений. Хороший верстальщик следит за возможностями будущих изменений. Будь то добавление текста или новых элементов в уже существующие компоненты. Такие изменения не должны приводить к «поломке» вёрстки.

Проверки наставника

Проверка проекта идет по пунктам указанным ниже. Если на верхнем уровне есть серьезные проблемы, то проверка останавливается до исправления.

  1. Визуальное соответствие шаблону. В третьем проекте студент чётко придерживается заданного макета и учитывает все отступы и размеры.

  2. Проверка архитектуры вёрстки. Один из самых долгих этапов при работе с ментором. На этом этапе зачастую происходит переделывание общей структуры вёрстки и создание такой, которая позволяет с лёгкостью добавлять и удалять элементы.

  3. Проверка пользовательских компонентов и утилит. Созданные студентами модули используют возможности Bootstrap и не перезаписывают CSS.

  4. Соответствие принципу максимальной переиспользуемости CSS-кода.

Описание

В третьем проекте студенты создадут проект онлайн-чата, в котором пользователи могут обмениваться сообщениями и вести список контактов. Проект имеет две основные страницы:

  • Основная версия чата. В ней доступны просмотр контактов, доступных чатов и профиль пользователя.
  • Диалоговая версия чата. Помимо существующих страниц добавится текущий чат с сообщениями и возможностью написать сообщение.

Финальная версия Hexlet Chat

Наставники

Аватар эксперта Олег Титов
Олег Титов
Frontend Developer, Esagency
Аватар эксперта Дмитрий Бердников
Дмитрий Бердников
Frontend Developer, MGDes
Аватар эксперта Даниил Григорьев
Даниил Григорьев
Frontend Developer, IGA Technologies
Аватар эксперта Анастасия Батарей
Анастасия Батарей
HTML/CSS Developer, DAXX

Впечатления

Уф-ф. Наконец-то получилось сдать третий проект. Делал его два месяца. Как и в других проектах, было много мест(деталей), где пришлось иной раз долго кружить в танце(разумеется, это танец с бубном). Было интересно работать с новыми для себя инструментами (Pug, Gulp, линтеры) и фреймворком Bootstrap. И, как всегда, самое полезное - это стадия ревью кода. Спасибо Никите за проект.

Сколько стоят проекты?

Проекты входят в стоимость обучения в любом формате: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.

Зачем проходить проекты?

Проекты дают опыт разработки в реальной среде. Проходите каждый проект сразу после изучения курсов, которые стоят в учебном плане перед ним, — это отличный способ глубже разобраться в материале.

Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.

Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».

Что делать, если возникли трудности во время выполнения проекта?

Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться. Попросите о помощи в нашем Slack-чате в канале #hexlet-projects.

Кто проверяет проекты?

Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.

У меня другой вопрос

Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.