Когнитивные искажения
Создайте и опубликуйте свою первую вёрстку. В первом проекте вы примените знания, пройденные в курсах. Используете позиционирование и встретитесь с основными задачами, которые решаются с помощью Flex. Во время вёрстки вы узнаете о распространённых когнитивных искажениях и научитесь их преодолевать.
Цель
Настройка окружения
Для многих студентов первый проект является первой возможностью сверстать полноценный макет. Попробовав себя в упражнениях на протяжении нескольких курсов пришла пора с нуля создать свой первый лендинг.
В первом проекте создаётся полноценная файловая структура, которая может использоваться и вне первого проекта. Студенты учатся работе с Git: выложат свой проект на GitHub и сделают первый деплой используя сервис Surge.
Помимо вёрстки студенты познакомятся с утилитой npm, через которую они будут взаимодействовать с Surge на протяжении всех шагов и при работе с комментариями ментора.
Вёрстка
Первый проект строится на создании вёрстки простого лендинга. Основная задача студента — сформировать аккуратную и поддерживаемую вёрстку. В этом ему помогут подходы OOCSS и Atomic CSS, смесь которых студент будет использовать.
Немаловажным фактором в процессе создания лендинга является именование классов. Это один из самых сложных процессов, в котором студенту необходимо постоянно думать о согласовании имён классов с уже существующими и поддержании единства.
В процессе вёрстки студент опирается на несколько основных принципов:
- Модульность блоков. Любой блок в лендинге является самостоятельной единицей, который можно переносить или удалять без последствий для других блоков.
- Переиспользование классов. Первый проект нацелен на то, чтобы классы были едины для всего проекта. Это отличительная черта подходов OOCSS и Atomic CSS.
- Вёрстка с учётом будущих изменений. Главной особенностью хорошего верстальщика является то, что он умеет «смотреть в завтрашний день» и выполнять такую вёрстку, которая учитывает будущие желания заказчика. Будь то добавление текста или новых элементов в уже существующие блоки.
У меня есть опыт в вёрстке, можно пропустить первый проект? Кажется, он слишком лёгкий для меня.
Проекты пропускать нельзя. Каждый проект на Хекслете важен. На нём закладываются знания, с которыми человек идет дальше: работа над структурой кода, именование и так далее. Даже если вы уже имеете опыт вёрстки, первый проект будет полезным.
Дело в том, что менторы оценивают код каждого студента индивидуально. В зависимости от уровня подготовки и качества кода они могут предложить дополнительные задачи. Поэтому не надейтесь на лёгкую прогулку: даже если вы выполните все задания быстро и без затруднений, ментор предложит вам более сложные задачи.
Проверки ментора
Проверка проекта идет по пунктам указанным ниже. Если на верхнем уровне есть серьезные проблемы, то проверка останавливается до исправления.
- Визуальное соответствие шаблону. Первый проект не рассчитывает на полное соответствие всех высот и размеров. При этом основные концепции должны быть сохранены.
- Проверка архитектуры вёрстки. Один из самых долгих этапов при работе с ментором. На этом этапе зачастую происходит переделывание общей структуры вёрстки и созданию такой, которая позволяет с лёгкостью добавлять и удалять элементы.
- Проверка классов, которые используются в проекте. Их именование и смысловая нагрузка. Как показывает практика, это может являться проблемой и для тех, кто с вёрсткой знаком много лет. Мы серьёзно относимся к тому, как именуются классы и какую смысловую нагрузку они в себе несут.
- Соответствие принципу максимальной переиспользуемости CSS-кода.
Описание
Первый проект является лендингом, описывающий распространённые когнитивные искажения в программировании. Это самые распространённые проблемы, с которыми сталкиваются многие разработчики в самые различные периоды своей карьеры. Как же с ними бороться и какие они бывают вы узнаете из лендинга и сможете помочь узнать об этом большему количеству людей. Ведь лендинг не будет храниться на вашем компьютере, а вы выложите его на доступный хостинг и каждый сможет его увидеть по вашей ссылке.
Наставники
Впечатления
Спасибо за проект! Всегда нравился hexlet с уклоном на фундаментальные знания. Даже в верстке ты делаешь проект не для заучивания каких-то инструментов, которые меняют шрифт, отступ и тд. А для понимания разных подходов, как можно упростить верстку и тд.
Сложновато было морально, когда ты разработчик с опытом и тебе нужно менять подход в верстке. Но это наоборот разбудило во мне желание учиться дальше!
Спасибо за проект! Отличная возможность не просто сверстать по инструкциям, а и получить очень подробные комментарии ментора и улучшить свой код, разобраться в разных подходах. Только после проектов появляется ощущение, что уже что-то знаешь и умеешь.
Ох, и зря же говорят что вёрстка это самое простое в веб-программировании. Пиксель туда, блок сюда, цвет задай, размер поправь... Я долгое время не видел для себя смысла в прохождении первого проекта. Второй, вроде бы еще куда ни шло - переменные, Sass, гриды и т.п. Но, пройдя курсы по вёрстке, решил таки взяться за первый проект и не прогадал! Никита с гордостью держет планку качества курсов Хекслета, и показывает что даже такой "простой проект" может быть вмеру "глубоким" и интересным. Как уже тут говорили другие студенты - набросать макет в html это еще только самое начало. Дальше будет самое интересное.
з.ы. Предлагаю сделать бэдж с текстом "Теперь мне уже нравится, но..." и чтобы ментор мог прикреплять его в комментарии к проекту. После нескольких итерация изменений, одна эта фраза дала такой эффект, который я давно не получал!
Я давно хотел подучить вёрстку. И был очень рад, когда на любимом Хекслете появился такой раздел. Раньше я учил верстку в одной известной "Академии" :). На мой взгляд выгодное отличие, Хекслета в этом случае в том, что здесь меньше материала в виде: сделай так и так (в принципе его нет, а есть сжатая и хорошо поданная теория), а больше материала и пространства для "подумать". Когда появился первый проект, я был немного удивлен, что он такой "простенький", и все же решился его пройти. Возможно, он и правда не сложный с точки зрения верстки, но очень хорошо продуманны шаги-этапы. Здесь вы делаете деплой, что тоже здорово. Ну и самое главное, менторская поддержка, в результате которой, проект из мешанины в коде и голове, обретает стройность и структуру. Вы не просто делаете верстку, а лучше понимаете, как ее надо делать, чтобы проект был понятнее и его легче было поддерживать. И это самое главное и самое ценное. Спасибо большое Никите, за доброжелательный и терпеливый менторинг, ответы на все вопросы, и помощь в затруднениях. Едем дальше :)
Отличный проект. Сделать страницу визуально, похожую на макет, было не так сложно. Но вот сделать все правильно и в точности как на макете оказалось гораздо гораздо сложнее. Долго учился правильной организации и чистоте стилей. Понять все вещи которые проходились раньше можно только применив их в реальном проекте. Спасибо Никите за проект!.
Проекты входят в стоимость обучения в любом формате: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.
Проекты дают опыт разработки в реальной среде. Проходите каждый проект сразу после изучения курсов, которые стоят в учебном плане перед ним, — это отличный способ глубже разобраться в материале.
Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.
Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».
Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться. Попросите о помощи в нашем Slack-чате в канале #hexlet-projects.
Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.
Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.