Проект ЖК «Лунное море»

Уровень: 1

Профессия Верстальщик

Создайте и опубликуйте свою первую вёрстку. В первом проекте вы примените знания, пройденные в курсах. Используете позиционирование и встретитесь с основными задачами, которые решаются с помощью Flex.

7
шагов
2-4
недели

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

Профессия Верстальщик

Цель

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

Для многих студентов первый проект является первой возможностью сверстать полноценный макет. Попробовав себя в упражнениях на протяжении нескольких курсов пришла пора с нуля создать свой первый лендинг.

В первом проекте создаётся полноценная файловая структура, которая может использоваться и вне первого проекта. Студенты учатся работе с Git: выложат свой проект на GitHub и сделают первый деплой используя сервис Surge.

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

Вёрстка

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

Немаловажным фактором в процессе создания лендинга является именование классов. Это один из самых сложных процессов, в котором студенту необходимо постоянно думать о согласовании имён классов с уже существующими и поддержании единства.

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

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

У меня есть опыт в вёрстке, можно пропустить первый проект? Кажется, он слишком лёгкий для меня.

Проекты пропускать нельзя. Каждый проект на Хекслете важен. На нём закладываются знания, с которыми человек идет дальше: работа над структурой кода, именование и так далее. Даже если вы уже имеете опыт вёрстки, первый проект будет полезным.

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

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

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

  1. Визуальное соответствие шаблону. Первый проект не рассчитывает на полное соответствие всех высот и размеров. При этом основные концепции должны быть сохранены.

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

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

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

Описание

В рамках первого проекта необходимо сверстать лендинг жилого комплекса «Лунное море».

ЖК «Лунное море»

Проект ЖК «Лунное море»

Создайте рабочее приложение, которое станет частью вашего портфолио.

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

Впечатления

Лично убедился, что участие в проекте - необходимая и бесценная вещь, которая помогла мне собрать все пазлики обучения в единую целостную картину. Курсы и практические задания становятся похожими на детскую игру в песочнице, когда работаешь над выполнением реальной задачи в 'полевых' условиях.

Спасибо Никите за терпение, обратную связь и высокий уровень профессионализма.

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

На днях я завершил проект, и остался очень доволен!

С HTML и CSS я хорошо знаком, изучал эту тему еще до прохождения курсов по верстке, и я успел сверстать пару небольших страниц по макетам. Но все это было без какого-либо фидбека, и в стиле "лишь бы работало". Поэтому этот проект для меня очень важен (как, собственно, и все другие проекты) - тут есть обратная связь от ментора.

Сам проект я сделал быстро, но это всегда только начало, потому что потом за дело берется ментор=) И огромное спасибо Никите за терпение, за развернутые ответы на все мои вопросы касательно этого проекта и не только, и за то, что умудрялся проверять мой код два раза в день=) Во время работы пришлось повозиться с классами и селекторами, некоторые блоки довольно сильно переделывал. Много узнал про организацию кода (до этого я был знаком только с методологией БЭМ), и это наверное самое главное, что я вынес из этого проекта.

С нетерпением буду ждать следующие курсы и новый проект!

Отличный проект для новичков в верстке, как я. Сделать сайт визуально, как на картинке, оказалось не сложно, но вот сделать все правильно оказалось гораздо сложнее, поэтому меня долго и упорно учили правильной организации кода, атомарности и переиспользованию кода в CSS. Я думаю, такие вещи нельзя понять делая отдельные упражнения, только выполняя комплексный проект. Спасибо Никите за терпение!

Отличный проект, который помог разложить по полочкам и закрепить пройденный материал. Благодарю Никиту за проделанную работу, помощь и терпение.

Вопросы и ответы

Какое расписание у проекта?

У проектов нет расписаний, все проекты доступны 24 часа в сутки, и вы можете заниматься в удобное для вас время.

Как оплачивается проект?

Один проект стоит $127, и оплата снимается только если вы отправите на проверку первое задание в проекте. Если вы начнете проект, но не выполните первое задание, то деньги списываться не будут. Для участия в проекте нужно иметь активную месячную или годовую подписку, и деньги за проект будут списываться с вашей привязанной карты.

Зачем нужны проекты?

Проект помогает реализовать на практике то, что вы узнали на курсах. Важный момент: написанный вами код навсегда остается в вашем репозитории на GitHub. Фактически это ваша первая работа в портфолио.

Что делает ментор в проектах?

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

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

Пишите нам на support@hexlet.io, вам ответит живой человек из команды Хекслета. Или нажмите на иконку со знаком вопроса в правом нижнем углу экрана. Там есть ответы и на другие вопросы и удобная форма для отправки сообщения нам.

Проект ЖК «Лунное море»

Создайте рабочее приложение, которое станет частью вашего портфолио.

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