Набраться опыта: навыки или проекты?

Представьте — вы уже освоили большую часть тренажёров по HTML и CSS, регулярно слушаете подкаст «Веб-стандарты» и не боитесь страшных слов «сетка на гридах» или «селектор». Вы неплохо ориентируетесь в теории и можете написать CSS-код, даже не подглядывая в справочник. Следующий этап — набраться опыта работы над реальными проектами.

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

Определимся с понятиями

Навык — набор материалов по конкретному аспекту вёрстки. В навык входит теория (конспекты, инструкции, алгоритмы решения задачи) и практика (демонстрационные и тренировочные кейсы с комментариями и автопроверками).

Проект — готовый макет реального сайта с инструкцией, эталонным кодом к каждому этапу и полезными материалами по вёрстке.

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

Разберём на примере

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

После освоения 3-4 основных навыков, можно переходить к проектам. В них наглядно показано, как примеры из навыков реализуются на практике. Потренировавшись на навыках, вы без труда узнаете типовые решения и сверстать проект будет намного проще. К примеру, после навыка по флексам вы сходу определите сетку и микросетку в проекте «Школа английского языка».

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

Проверим код

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

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

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

Кстати, для тех, кто преподает веб-разработку, проекты могут стать отличным способом провести зачёт, проверить знания учащихся и сэкономить время на проверке.

Что выбрать?

Если вы еще не до конца разобрались, что выбрать, предлагаем простой чек-лист:

• Хочу научиться верстать типовые элементы интерфейсов — навык
• Хочу посмотреть, как выглядит код сверстанного макета — проект
• Хочу лучше разобраться в теме — навык
• Знаю, как верстать элементы интерфейса, но не понимаю, с чего начать верстку готового макета — проект
• Нужны работы в портфолио — проект
• Люблю досконально разобраться в теме — навык

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