Когнитивные искажения
Создайте и опубликуйте свою первую вёрстку. В первом проекте вы примените знания, пройденные в курсах. Используете позиционирование и встретитесь с основными задачами, которые решаются с помощью Flex. Во время вёрстки вы узнаете о распространённых когнитивных искажениях и научитесь их преодолевать.
Цель
Настройка окружения
Для многих студентов первый проект является первой возможностью сверстать полноценный макет. Попробовав себя в упражнениях на протяжении нескольких курсов пришла пора с нуля создать свой первый лендинг.
В первом проекте создаётся полноценная файловая структура, которая может использоваться и вне первого проекта. Студенты учатся работе с Git: выложат свой проект на GitHub и сделают первый деплой используя сервис Surge.
Помимо вёрстки студенты познакомятся с утилитой npm, через которую они будут взаимодействовать с Surge на протяжении всех шагов и при работе с комментариями ментора.
Вёрстка
Первый проект строится на создании вёрстки простого лендинга. Основная задача студента — сформировать аккуратную и поддерживаемую вёрстку. В этом ему помогут подходы OOCSS и Atomic CSS, смесь которых студент будет использовать.
Немаловажным фактором в процессе создания лендинга является именование классов. Это один из самых сложных процессов, в котором студенту необходимо постоянно думать о согласовании имён классов с уже существующими и поддержании единства.
В процессе вёрстки студент опирается на несколько основных принципов:
- Модульность блоков. Любой блок в лендинге является самостоятельной единицей, который можно переносить или удалять без последствий для других блоков.
- Переиспользование классов. Первый проект нацелен на то, чтобы классы были едины для всего проекта. Это отличительная черта подходов OOCSS и Atomic CSS.
- Вёрстка с учётом будущих изменений. Главной особенностью хорошего верстальщика является то, что он умеет «смотреть в завтрашний день» и выполнять такую вёрстку, которая учитывает будущие желания заказчика. Будь то добавление текста или новых элементов в уже существующие блоки.
У меня есть опыт в вёрстке, можно пропустить первый проект? Кажется, он слишком лёгкий для меня.
Проекты пропускать нельзя. Каждый проект на Хекслете важен. На нём закладываются знания, с которыми человек идет дальше: работа над структурой кода, именование и так далее. Даже если вы уже имеете опыт вёрстки, первый проект будет полезным.
Дело в том, что менторы оценивают код каждого студента индивидуально. В зависимости от уровня подготовки и качества кода они могут предложить дополнительные задачи. Поэтому не надейтесь на лёгкую прогулку: даже если вы выполните все задания быстро и без затруднений, ментор предложит вам более сложные задачи.
Проверки ментора
Проверка проекта идет по пунктам указанным ниже. Если на верхнем уровне есть серьезные проблемы, то проверка останавливается до исправления.
- Визуальное соответствие шаблону. Первый проект не рассчитывает на полное соответствие всех высот и размеров. При этом основные концепции должны быть сохранены.
- Проверка архитектуры вёрстки. Один из самых долгих этапов при работе с ментором. На этом этапе зачастую происходит переделывание общей структуры вёрстки и созданию такой, которая позволяет с лёгкостью добавлять и удалять элементы.
- Проверка классов, которые используются в проекте. Их именование и смысловая нагрузка. Как показывает практика, это может являться проблемой и для тех, кто с вёрсткой знаком много лет. Мы серьёзно относимся к тому, как именуются классы и какую смысловую нагрузку они в себе несут.
- Соответствие принципу максимальной переиспользуемости CSS-кода.
Описание
Первый проект является лендингом, описывающий распространённые когнитивные искажения в программировании. Это самые распространённые проблемы, с которыми сталкиваются многие разработчики в самые различные периоды своей карьеры. Как же с ними бороться и какие они бывают вы узнаете из лендинга и сможете помочь узнать об этом большему количеству людей. Ведь лендинг не будет храниться на вашем компьютере, а вы выложите его на доступный хостинг и каждый сможет его увидеть по вашей ссылке.
Наставники




Впечатления

Спасибо за проект! Всегда нравился hexlet с уклоном на фундаментальные знания. Даже в верстке ты делаешь проект не для заучивания каких-то инструментов, которые меняют шрифт, отступ и тд. А для понимания разных подходов, как можно упростить верстку и тд.
Сложновато было морально, когда ты разработчик с опытом и тебе нужно менять подход в верстке. Но это наоборот разбудило во мне желание учиться дальше!
Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.
Проекты дают опыт разработки в реальной среде. Проходите каждый проект сразу после изучения курсов, которые стоят в учебном плане перед ним, — это отличный способ глубже разобраться в материале.
Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.
Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».
Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться.
Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.
Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.