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

Уровень: 1

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

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

7
шагов
2-4
недели
Иконка профессии Верстальщик

Цель

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

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

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

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

Вёрстка

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

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

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

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

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

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

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

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

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

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

Описание

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

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

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

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

Впечатления

Ох, и зря же говорят что вёрстка это самое простое в веб-программировании. Пиксель туда, блок сюда, цвет задай, размер поправь... Я долгое время не видел для себя смысла в прохождении первого проекта. Второй, вроде бы еще куда ни шло - переменные, Sass, гриды и т.п. Но, пройдя курсы по вёрстке, решил таки взяться за первый проект и не прогадал! Никита с гордостью держет планку качества курсов Хекслета, и показывает что даже такой "простой проект" может быть вмеру "глубоким" и интересным. Как уже тут говорили другие студенты - набросать макет в html это еще только самое начало. Дальше будет самое интересное.

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

Я давно хотел подучить вёрстку. И был очень рад, когда на любимом Хекслете появился такой раздел. Раньше я учил верстку в одной известной "Академии" :). На мой взгляд выгодное отличие, Хекслета в этом случае в том, что здесь меньше материала в виде: сделай так и так (в принципе его нет, а есть сжатая и хорошо поданная теория), а больше материала и пространства для "подумать". Когда появился первый проект, я был немного удивлен, что он такой "простенький", и все же решился его пройти. Возможно, он и правда не сложный с точки зрения верстки, но очень хорошо продуманны шаги-этапы. Здесь вы делаете деплой, что тоже здорово. Ну и самое главное, менторская поддержка, в результате которой, проект из мешанины в коде и голове, обретает стройность и структуру. Вы не просто делаете верстку, а лучше понимаете, как ее надо делать, чтобы проект был понятнее и его легче было поддерживать. И это самое главное и самое ценное. Спасибо большое Никите, за доброжелательный и терпеливый менторинг, ответы на все вопросы, и помощь в затруднениях. Едем дальше :)

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

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

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

Подводя итог - всем советую проходить этот проект, даже если кажется, что в css все понятно и знаете как сверстать макет. Сверстать макет это только малая часть дела. А вот сделать так, чтобы его было потом удобно изменять и расширять - это уже интересный челлендж. Плюс как бы не хотелось, но на курсах все не поместишь, есть огромное количество нюансов и подводных камней с которыми можно столкнуться только на практике :)

Хочу поблагодарить Никиту за проект.

До проекта имел поверхностное представление о верстке и думал, что легко сдам проект. Оказалось, что не все так просто. Удалось сдать проект с 7 попытки. За то узнал много новых и не очевидных моментов.

Спасибо Никите за ревью кода, и за наставления.

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

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

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

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

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

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

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

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

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

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

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

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

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