Чтобы работать, фронтендеру нужно знать HTML, CSS, JavaScript, уметь работать с нужными инструментами и понимать, как строится работа в команде. Кроме того, каждая задача требует определённых навыков. И чем больше фронтендер будет их развивать, тем качественнее и быстрее он будет решать вопросы. Но всё-таки для начала работы нужна база — умение решать основные задачи по вёрстке. Разберём шесть обязательных навыков фронтендера и расскажем, где их можно освоить.
Правильная разметка макета
Первый шаг в вёрстке любой веб-страницы — разметка, т.е. написание HTML-кода. Этот этап так же важен, как правильно заложенный фундамент в строительстве: дом будет стоять крепко, если у него надёжная основа. Поэтому умение правильно размечать макеты для фронтендера необходимо. Это стартовый навык, его можно освоить, обладая базовыми знаниями HTML и CSS.
Самое важное здесь — научиться работать со спецификацией. Спецификация — руководство по написанию разметки. Это большой документ, его не надо заучивать, но ориентироваться в нём просто необходимо.
Экспорт параметров и графики из PSD‑макетов
После разметки надо получить из макета данные о стилизации: параметрах шрифтов, размерах, отступах, параметров теней, скруглений и т.д. Обычно заказчик присылает макет в формате PSD. Верстальщику нужно открыть макет в графическом редакторе, извлечь информацию и прописать параметры в HTML и CSS. Чаще всего используют 2 редактора — Photoshop или Figma. Программы имеют разные интерфейсы и функции, поэтому желательно научиться работать в обеих. Хорошее знание редактора позволит оптимально решать задачи. Например, если на фотографию наложены декоративные окружности, экспортировать её можно двумя путями. Так что у верстальщика есть определённая свобода выбора. Чем больше решений специалист может привести, тем лучше: можно использовать наиболее удобный.
Построение сеток по макету
После разметки и экспорта данных из макета верстальщик строит сетку крупных блоков страницы. Сетка должна собирать все элементы вместе и обеспечивать целостность страницы при изменении контента. Простые раскладки делают с помощью инструмента флексбокс. Флексбокс работает во всех современных браузерах. Чтобы его освоить, базовых знаний HTML и CSS мало. Нужно понимать принципы построения сетки, знать типы элементов и их особенности. Для более сложных и необычных проектов понадобятся гриды. Это самый мощный инструмент для построения сеток. Чтобы их освоить, надо изучить, что такое грид-раскладки и как располагать элементы в грид-контейнерах.
Вёрстка текста
Верстальщику часто приходится заниматься текстами, потому что они чаще всего встречаются на страницах. Дизайнеры стараются оформлять текст оригинально, поэтому верстальщик должен знать различные тонкости. Например, как грамотно структурировать текст на странице, акцентировать внимание на самой важной информации, корректно оформлять декоративные текстовые элементы, лонгриды, врезки, цитаты, ссылки. Поэтому для вёрстки этот навык входит в список обязательных.
Где овладеть этими навыками?
Помимо специализированных курсов, где вёрстке обучают системно и поэтапно, навыки можно освоить отдельно. Например, если у вас уже есть общее представление об этапах создания сайта, вы можете углубиться в них и набить руку на реальных задачах. Этот вариант пригодится и тем, кто уже работает верстальщиком и хочет отработать или прокачать какой-то из навыков. В таком случае можно не проходить целый курс и сделать акцент на конкретной теме, в которой нужно разобраться.
Схема овладения навыком
Изучить теорию. Например, для экспорта параметров и графики из Photoshop нужно познакомиться с интерфейсом и основными функциями этого графического редактора. А для вёрстки текста надо узнать, как правильно подключать шрифты из разных источников, законы и инструменты веб-типографики, методы оформления нестандартных текстов (например, перевёрнутых). Не забудьте сделать конспект: выполняя практические задания, вы сможете быстро найти в нём нужную информацию.
Разобрать демки разного уровня сложности. Желательно, чтобы это были задачи из реальных проектов. Например, пошагово посмотреть, как строятся сетки на гридах по макету личного кабинета ученика языковой школы, с детальным описанием всех шагов.
Самостоятельная практика. Например, тренировочный материал навыка по экспорту параметров и графики из Figma включает макет дизайна страницы, с которого вам нужно снять параметры и графику. Готовое решение можно сравнить с эталонным решением от авторов. Нужно понимать, что в вёрстке нельзя опираться только на примеры и готовые алгоритмы действий. Придётся думать: например, не всегда то, что кажется заголовком, является таковым. Прежде всего важен смысл текста, а не его внешний вид.
Набивать руку лучше на кейсах разного уровня, простых и сложных: это облегчит вам жизнь при работе с реальными заказчиками. Только идите по порядку и не перескакивайте сразу на трудные задания. Лёгким задачам тоже надо уделить внимание, чтобы не делать ошибок в будущем и довести процесс решения до автоматизма.
С какого навыка начать?
Если вы мало знакомы со всеми описанными навыками, то лучше овладевать ими поэтапно. К примеру, сначала стоит изучить создание семантической разметки по макету, а уже потом переходить к построению сеток. Так информация будет логично укладываться в вашей голове. А для простоты ориентации в навыках можно воспользоваться деревом навыков, где все пункты связаны в единую систему. Дерево поможет наглядно увидеть, с чего лучше начинать обучение и куда двигаться дальше.