Проект #1

Когнитивные искажения

Верстальщик

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

2-4
недели

Цель

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

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

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

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

Вёрстка

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

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

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

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

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

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

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

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

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

  1. Визуальное соответствие шаблону. Первый проект не рассчитывает на полное соответствие всех высот и размеров. При этом основные концепции должны быть сохранены.
  2. Проверка архитектуры вёрстки. Один из самых долгих этапов при работе с ментором. На этом этапе зачастую происходит переделывание общей структуры вёрстки и созданию такой, которая позволяет с лёгкостью добавлять и удалять элементы.
  3. Проверка классов, которые используются в проекте. Их именование и смысловая нагрузка. Как показывает практика, это может являться проблемой и для тех, кто с вёрсткой знаком много лет. Мы серьёзно относимся к тому, как именуются классы и какую смысловую нагрузку они в себе несут.
  4. Соответствие принципу максимальной переиспользуемости CSS-кода.

Описание

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

Лендинг об когнитивных искажениях

Наставники

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

Впечатления

Спасибо за проект! Всегда нравился hexlet с уклоном на фундаментальные знания. Даже в верстке ты делаешь проект не для заучивания каких-то инструментов, которые меняют шрифт, отступ и тд. А для понимания разных подходов, как можно упростить верстку и тд.

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

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

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

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

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

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

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

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

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

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

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

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

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