BLACK FRIDAY

осталось 5 дней

Скидка 10% и подарок на выбор — при покупке одной программы
При покупке двух программ  — вторая со скидкой 50%
Проект модуля #1

Мессенджер «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

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

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

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

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

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

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

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

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

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

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

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

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