Мессенджер «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-кода.
Описание
В проекте студенты создадут проект онлайн-чата, в котором пользователи могут обмениваться сообщениями и вести список контактов. Проект имеет две основные страницы:
- Основная версия чата. В ней доступны просмотр контактов, доступных чатов и профиль пользователя.
- Диалоговая версия чата. Помимо существующих страниц добавится текущий чат с сообщениями и возможностью написать сообщение.
Наставники
Впечатления
Уф-ф. Наконец-то получилось сдать третий проект. Делал его два месяца. Как и в других проектах, было много мест(деталей), где пришлось иной раз долго кружить в танце(разумеется, это танец с бубном). Было интересно работать с новыми для себя инструментами (Pug, Gulp, линтеры) и фреймворком Bootstrap. И, как всегда, самое полезное - это стадия ревью кода. Спасибо Никите за проект.
Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.
Проекты дают опыт разработки в реальной среде. Проходите каждый проект сразу после изучения курсов, которые стоят в учебном плане перед ним, — это отличный способ глубже разобраться в материале.
Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.
Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».
Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться.
Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.
Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.