Хекслет запускает новый интенсив «Верстка веб-приложений» в вебинарном формате, длительностью около 2 месяцев. Преподавательница этого интенсива Анна Русяева подробно рассказала про программу курса, а также объяснила, почему верстку нужно знать любому фронтендеру и какое ждет будущее HTML и CSS.
— Меня зовут Анна Русяева, я занимаюсь фронтендом и версткой, сейчас работаю как фрилансер. Когда-то давно я работала на заводе и писала там сложные программы на C++. Вообще, работа на заводе — это не про меня, поэтому я разочаровалась в программировании в целом и ушла из этой сферы. Долго работала в маркетинге — даже стала руководителем маркетингового отдела.
Однажды я посмотрела на моих коллег фронтенд-разработчиков и поняла, что я что-то делаю не так — ведь их машина намного класснее, чем моя. Тогда мне казалось, что разработка — это очень сложно, поэтому просто начала иногда общаться с нашими программистами и познакомилась с девушкой Викой. Оказалось, что она очень долго училась на философском факультете, работала HR-менеджером, а потом — смогла переучиться и полностью сменить сферу на разработку.
Меня это очень заинтересовало — как так, просто взять и переучиться. То есть не нужно пять лет ходить в университет, а можно буквально за пару-тройку месяцев полностью изменить свою судьбу. Тем более, если она до этого никогда не работала с техническими концепциями, а теперь работает программистом, то я тоже смогла бы стать разработчиком. Вообще, раньше я думала, что это по силам только очень умным ребятам.
Читайте также: Большое интервью с Вадимом Макеевым — известным российским разработчиком, верстальщиком и энтузиастом веба
Вика посоветовала мне курсы по верстке и по React. Я начала верстку, посмотрела JS, посмотрела React — и буквально через три месяца уже нашла свою первую работу. Я была фронтенд-разработчиком в банке, мы делали CRM на Angular, потом я ушла в другую команду, где тоже делали банковский сервис на Angular и React. Затем я снова ушла в другую команду — уже внутреннюю, но там было все на React.
Но меня все равно не покидали мысли, что можно зарабатывать еще больше денег, но при этом меньше работать. Один из друзей решил создать свою компанию, и предложил в какое-то время поработать с ним — так начался мой путь на фрилансе.
Сейчас мое рабочее время делится примерно так: 20% уходит на разработку, еще 20-30% — на образование и вообще EdTech, остальное время я смотрю, какие заказы можно взять и за сколько продать. У меня сейчас есть небольшая команда, с которой я работаю, плюс какие-то вещи разрабатываю сама.
— Чем занимается верстальщик в компании или на фрилансе, в чем его роль?
— Приходит в компанию заказчик и говорит — хочу сайт. После этого в дело вступает дизайнер и рисует макет в Figma. Когда заказчик его принимает — приходит верстальщик, которому нужно перенести этот макет в браузер, и чтобы тот понимал, что находится на этой странице. Верстка как раз про это — если у нас есть текст, то верстка отвечает за его местоположение и размер. Если у нас есть картинка, то благодаря верстке мы знаем, где она расположена.
Помимо этого верстка отвечает за адаптивность нашего сайта — ведь он должен выглядеть красиво не только с ноутбука, но и с вашего смартфона. Верстка — это история о том, что находится на нашей интернет-странице и как все это выглядит. То есть задача верстальщика не просто перенести картинку из Figma в браузер, но и научить его при помощи специальных меток правильно отображать то, что придумали дизайнер с заказчиком.
— Из чего состоит интенсив и что получат студенты, которые его пройдут?
— Интенсив «Вёрстка веб-приложений» состоит из двух частей. В первой мы будем изучать базовые вещи — элементы, и их расположение на странице. Могу привести простой пример — люди понимают, где на странице находится текст, а где — картинка. При этом браузер у нас не такой умный, и ему нужно для этого показывать специальные теги с дополнительными параметрами — атрибутами. В первом модуле мы как раз будем изучать основы верстки — что такое теги и атрибуты, посмотрим семантическую верстку и доступность. На самом деле, доступность — это то, насколько хорошо ваш сайт могут использовать разные браузеры и разные люди, например, слабовидящие, которые тоже пользуются интернетом, и мы должны как ответственные разработчики о них позаботиться.
После того, как мы с вами разберемся, какие элементы находятся у нас на странице, мы научимся их стилизовать. И если теги — это про HTML, то стилизация уже про CSS. Что из себя представляет CSS? Это набор правил, по которым мы рассказываем браузеру, как именно у нас отображаются элементы. Например, если мы говорим про текст — какой у него шрифт, цвет, выделение. Если про картинки — как они показываются и отображаются.
Учитесь бесплатно: Курсы по программированию для самых начинающих разработчиков Code Basics
У каждого свойства в CSS есть свои нюансы — например, размеры для элементов, которые мы можем указывать в пикселях, можно также указывать и в процентах. И от этого параметра будет сильно зависеть, как будет выглядеть этот элемент и вообще сайт, хотя это всего лишь маленькая базовая деталь.
Отдельная глава нашего интенсива — селектор и как вообще с ним работать. Селектор — это такая специальная метка для нашего HTML, которая помогает понять, каким образом у нас HTML соотносится с CSS. Это достаточно неочевидная тема с большим количеством нюансов — ведь мы можем поставить метки как по селекторам, так и по тегам — в местах, где у нас много картинок и разных абзацев. В программе интенсива мы затрагиваем этот момент — как можно задавать специальные метки, при помощи которых браузер может понять, что с каким элементом соотносится. И как правильно писать эти метки — очень часто их пишут как угодно, а потом люди, работающие с этим кодом, практически не могут его прочитать.
Среди тем первого блока интенсива — верстка контента при помощи псевдоэлементов. Это специальные штуки, которые существуют у нас на странице, но в верстке их нет, то есть мы создаем их через CSS. Да, поначалу кажется, что это сильное усложнение процесса. Но потом оказывается, что для того, чтобы не перегружать нашу страницу, практически все декоративные элементы лучше оформлять через псевдоэлементы. И таких нюансов у нас очень и очень много.
Например, когда начинаем погружаться в основы CSS — мы понимаем, что у нас есть селекторы по тегу, по классу, по идентификатору. И чем лучше ты понимаешь правила, по которым это работает, тем лучше твоя верстка становится.
То есть в первом блоке мы просто рассказываем основы CSS и HTML и строим правильную картину мира верстки и азов разработки. Второй модуль — более прикладная история, в которой мы начинаем рассуждать, как этими элементами управлять на странице, и какие есть элементы для их управления у нас на сайте.
Во втором блоке интенсива мы учимся различным методам управления элементами. Например, у нас есть Flex, который добавляет еще одну ось на сайте к той, которая уже существует, и внутри этих осей мы можем этими элементами управлять. А есть Grid — он рисует сетку, внутри которой мы можем все наши элементы размещать. Grid по сравнению с Flex более молодой и продвинутый, но при этом есть ситуации, в которых подходит один подход, а есть — когда другой. И мы будем делать так, чтобы в голове было понимание, когда какой подход лучше использовать и почему.
В конце интенсива студенты смогут сделать свои проекты — настоящие, с макетом в Figma и полноценной страницей. В этом проекте студент сможет применить все свои навыки — там будет и простой контент одного экрана, и адаптив. По сути, это готовый проект — его можно положить в портфолио для работодателя. Вообще, это большой плюс — выпускник получит не просто бумажку о прохождении курса, а реальный эталонный проект.
Если говорить про наш формат — то наличие рядом экспертов очень сильно увеличивает скорость развития любого разработчика, особенно начинающего. Конечно, есть люди, которые учатся сами — смотрят YouTube, читают умные книжки и слушают подкасты. Это круто, но в один момент ты всегда остаешься один на один с какой-то проблемой, которую непонятно, как решить. По видео с YouTube ты можешь только переписывать код и пробовать его переделать под свой конкретный случай. Будем честны — не всем хватает на это терпения, плюс это занимает достаточно много времени, учитывая, что найденное решение не всегда будет оптимальным. Очень важно, когда рядом есть люди, которые постоянно на связи и могут подсказать, как правильно решить ту или иную проблему.
На интенсиве в группах будут преподаватели и наставники. Если преподаватели будут вести вебинары и рассказывать о верстке во время лекций, то наставники смогут помогать все оставшееся время. Часто бывает — послушал какую-то лекцию, после которой все понятно и никаких вопросов нет. Но как только садишься писать код — сразу возникают вопросы: куда писать, что именно, почему именно так. И вот тут наставники сразу же подскажут, как решить эти проблемы.
Мне кажется, что наличие людей рядом с высокой экспертностью очень сильно ускоряет развитие программистов, как качественно, так и количественно.
По итогу этих двух месяцев пользователь сможет прийти в какую-нибудь компанию и уже спокойненько верстать. По сути, этих знаний и навыков хватит, чтобы уже создавать сайты, с которыми мы сталкиваемся с вами ежедневно.
— Кому будет полезно пойти учиться верстке?
— Наш интенсив на 100% будет полезен тем, кто только начинает свой путь в разработке. Безусловно, он будет полезен бэкендерам, которые решили перейти во фронт или стать фулл-стек разработчиками. С действующими фронтендерами все немного сложнее — им нужно внимательно посмотреть программу интенсива. Другое дело, что у нас очень много курсов про адаптив и доступность, чего обычно очень не хватает людям, которые занимаются версткой уже сейчас.
— Есть ли будущее у верстки в эпоху Tilda и No-code?
— На счет замены верстальщиков — даже сейчас у меня есть заказы сайтов на Tilda. И да, для сборки хороших сайтов на этой платформе тоже нужны люди — у меня этим занимаются дизайнеры, но очень часто бывает, что нужно поправить какие-то элементы при помощи CSS и JS.
В общем — будущее точно есть. Кроме того, верстка — это первая ступень фронтенд-разработчика, никто же не говорит, что после обучения верстке процесс развития заканчивается. Можно изучить JS, фреймворки, Typescript, пойти в мобильную разработку и все такое — дальше только больше.
Подробнее узнать о программе обучения интенсива по верстке
