Проект #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

Наставники

Аватар наставника Азамат Шарафутдинов
Азамат Шарафутдинов
HTML-верстальщик в крупной российской компании. Верстает с 2012 года. Более 100 проектов в портфолио – от Landing Page до порталов и интернет-магазинов. Не боится сложных задач, а также терминов Gulp, SASS(SCSS), PUG
Аватар наставника Анастасия Батарей
Анастасия Батарей
В веб-разработке с 2016 года. Начинала как фронтенд-разработчик, но потом с головой ушла в дизайн. Сейчас работает верстальщиком в дизайн-команде, где может совмещать свои навыки разработки и интерес к UX
Аватар наставника Анна Русяева
Анна Русяева
Начинала с вёрстки и разработки приложений на Angular, Ionic и React Native. Основала собственную веб-студию. Активно помогает ребятам в освоении профессии: наставничает на учебных проектах, читает и пишет курсы по вёрстке и JS
Аватар наставника Даниил Григорьев
Даниил Григорьев
Выпускник колледжа информационных технологий и Московского Энергетического Института. Более 4 лет трудится на должности фронтенд-разработчика в различных IT-компаниях. Пришел наставником на Хекслет, чтобы показать новобранцам, что сложные вещи на самом деле простые

Впечатления

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

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

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

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

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

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

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

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

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

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

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

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

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