Проект #2

Портал «Music Box»

Верстальщик

Во втором проекте вы создадите две страницы музыкального портала «Music Box». Проект является логическим продолжением первого проекта. В нём вы вернётесь к созданию вёрстки по методологиям OOCSS и Atomic CSS. В процессе выполнения вы используете полученные знания из курсов по адаптивности и SASS. Адаптивность макету вам нужно будет реализовать самим. В проекте вы сможете поработать непосредственно с файлом макета в сервисе Figma.

2-4
недели

Цель

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

Второй проект с точки зрения настройки окружения более богат для студента. Помимо работы с Git и Surge студентам будет необходимо настроить работу своего проекта с препроцессором SASS.

Полноценная экосистема, которая создаётся во втором проекте позволит использовать её не только в рамках текущих заданий, но и при создании собственных проектов. Работая с утилитой npm студенты добавят в свой проект возможность компиляции SASS в CSS и деплоя на сервис Surge.

Ко второму проекту многие студенты решаются на установку Linux (Ubuntu, Mint, Manjaro) в качестве второй операционной системы. Это позволяет познакомиться с принципами работы с этой операционной системой. При работе с Linux студенты столкнутся с механизмами установки приложений через пакетный менеджер, работе с терминалом и работой с файловой системой.

Большое внимание во втором проекте уделяется организации файловой структуры. В отличие от первого проекта студентам необходимо иметь не только файл стилей и файл с разметкой, но и отдельно хранить файлы SASS. Взаимодействие между этими файлами — важная черта проекта. Необходимо правильно подключать файлы препроцессора, чтобы, в конечном итоге, получить корректный CSS файл.

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

Работать с макетом студент будет в онлайн среде Figma, которая предоставляет широкий набор возможностей как для дизайнеров, так и для верстальщиков. С помощью Figma студент сможет увидеть макет в нескольких разрешениях, а так же измерить ширину и отступы любого элемента.

Вёрстка

Во втором проекте студенты вернутся к концепциям, которые изучали в первом проекте. Это смесь таких подходов, как OOCSS и Atomic CSS. Они позволяют сделать максимально переиспользуемый CSS, создавая скорее собственный фреймворк.

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

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

  • Модульность блоков. Любой блок в проекте является самостоятельной единицей, который можно переносить или удалять без последствий для других блоков и вёрстки всего проекта в целом.
  • Переиспользование классов. Как и в первом проекте одной из основных задач является создание классов, которые можно использовать как в данных в этом проекте блоках, так и при создании абсолютно новых.
  • Вёрстка с учётом будущих изменений. Главной особенностью хорошего верстальщика является то, что он умеет «смотреть в завтрашний день» и выполнять такую вёрстку, которая учитывает будущие желания заказчика. Будь то добавление текста или новых элементов в уже существующие блоки.

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

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

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

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

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

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

Описание

Во втором проекте студент сверстает два макета музыкального портала «Music Box». Портал предоставляет доступ к онлайн прослушиванию музыки.

Музыкальный портал «Music Box»

Morten Harket на «Music Box»

Наставники

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

Впечатления

Очень понравился проект, получил много полезных знаний. Большое спасибо Никите, буду с нетерпением ждать новых проектов!

Спасибо, очень интересный проект с точки зрения возможности потренировать различные способы и инструменты верстки. Мое резюме пополнилось новыми навыками!) Отдельное спасибо Никите за его терпеливость и труд!:)

Спасибо за проект! Сильная прокачка во многих аспектах, здесь тебе и адаптивная верстка, и использование sass, и баланс между AtomicCSS и OOCSS. Мой первоначальный вариант проекта сильно изменился и упростился - это отлично. Я доволен работой Никиты и потраченными временем и силами:)

Мне очень понравился проект. Понравилось работать с Никитой) Он очень подробно объясняет. Спасибо) Жду дальнейших проектов).

Спасибо Никите за проект. Самое интересное начинается на стадии сдачи проекта, именно там получаешь максимальный буст. Жду с нетерпением третий проект :)

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

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

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

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

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

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

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

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

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

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

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

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