Інтернет Мастерская
Подборка полезных статей для веб-мастеров и заказчиков

версия для печати

Путь верстальщика. Год 2017

23.08.2017 | Сергей Попов | источник: css-live.ru

Интро

Давайте сразу обозначим моменты, на основании которых будем рассуждать в дальнейшем.

Первое. Эта статья написана как попытка обновить или дополнить статью Максима Усачёва, написанную в 2012 году. Время течёт, времена меняются, поэтому хотелось бы добавить некоторые рассуждения.

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

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

Третье. В 2017 году сложно представить себе верстальщика, который умеет только верстать страницы, используя HTML, CSS и ничего больше. Индустрия и тенденции заставляют верстальщиков изучать JavaScript, что приводит к логическому развитию верстальщика во фронтенд-разработчика. Это логичный и нормальный путь. В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. Учитывая это, правильнее было назвать эту статью «путь фронтенд-разработчика», но чтобы никого не пугать, и по причине того, что вёрстка — первая ступень развития фронтенд-разработчика, оставим название статьи таким, какое есть.

Четвёртое. Я буду часто ссылаться на свой опыт, прошу простить.

Начало

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

Если вы не готовы принять вышеописанные истины, то у вас может не получиться воспользоваться шансом стать фронтенд-разработчиком.

Первые шаги

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

В 2017 году ситуация на рынке другая.

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

Во-вторых, огромное количество учебных материалов вне курсов. Справочники, туториал, порталы, YouTube-каналы. Информации по фронетнд-разработке настолько много, что в ней можно просто запутаться. Самым интересным трендом современного обучения является то, что обучение веб-разработке уходит собственно в веб.

Книги? Некоторые книги представляют собой произведение искусства, которое хочется купить и поставить на полку просто для коллекции. Необходимость открывать книги в повседневной работе, чтобы найти там что-то, оказавшееся непонятным, практически исчезла. Достаточно вбить запрос в Google и получить ответ на вопрос из разных источников. Проблема книг в том, что они не несут ничего нового и повторяют тот контент, который можно найти в интернете. И это если говорить про оригинальные книги, написанные на английском языке. К моменту перевода и публикации на русском языке книги теряют актуальность. Не можете учиться без книги? Лучше купите в электронном виде, спасите дерево. Реальной же необходимости покупать книгу, в большинстве случаев, нет.

Самым интересным трендом современного обучения является то, что обучение веб-разработке уходит собственно в веб. 

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

Другое дела, что офлайн-курсов в принципе не так много, а те из них, что дают современный и хороший материал можно пересчитать по пальцам. Если вы считаете что онлайн-формат не для вас, то на вашем месте попробовал в Москве Moscow Coding School, а в Санкт-Петербурге Epic Skills. Других хороших курсов и курсов в других городах, просто не знаю. Никто не рассказывал. Если знаете хорошие курсы в вашем городе, напишите об этом в комментариях.

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

При выборе онлайн-курсов стоит ориентироваться на компании. Хотя бы потому что компания не пропадёт с деньгами (надеюсь). Среди компаний тоже большой выбор, но я бы остановился на одном. HTML Academy. И это не потому, что был непосредственно связан с этим проектом и знаю как всё устроено. Это не единственный проект в котором я принимал участие. Просто на мой взгляд — это проект, у которого выстроена хорошая система обучения, связывающая качественную подачу материала, большое количество интерактивных туториалов, интерактивные курсы (которые доступны бесплатно) и работу с наставником. Интерактивные курсы HTML Academy советую пройти всем, кто начинает, независимо от того, где собираются проходить обучение. И да, HTML Academy это не единственные онлайн-курсы, и это не назначит, что нет других курсов. Просто в качестве этого продукта я не сомневаюсь.

Среди онлайн-курсов, я бы ещё отметил курсы Hexlet, но они не дают курсы по вёрстке, а сразу по JavaScript. Так что к ним стоит вернуться чуть позже.

Стоп, скажете вы. Мы как-то пропустили первые шаги в обучении и сразу перешли к выбору курсов. Да, верно, и это не ошибка. Не сомневаюсь, что среди собирающихся учиться есть люди, которые способны без курсов начать обучение по форумам, порталам и учебникам. Но для большинства курсы лучший вариант. Независимо от типа курсов, они предоставляют информацию в структурированного виде. Кто-то больше, кто-то меньше. В интернете много информации и она пригодится позже, когда вы уже сможете отличить верную информацию от неверной и будете знать где и что искать. Если вы только начинаете, то не сможете отличить правдивую информацию от неправильной и можете изначально сломать себе голову неправильными знаниями, которые в конце концов придётся ломать и перестраивать заново. Поэтому курсы — лучший способ получить фундамент того, на чём в дальнейшем будет строиться профессиональная карьера.

Отчаяние

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

Я советую в этот момент сделать передышку на два—три дня и ничего не делать, связанного с обучением. Конечно, если вы уже работаете и это момент застал на работе, то не стоит делать перерыв иначе вы рискуете быть уволенным.

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

Ложная эйфория

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

Проблема в том, что фундамент, который построен на предыдущем шаге, пока ещё недостаточно крепкий, чтобы начинать работать или строить на нём что-то ещё. Самый явный пример, который я встречал у себя в практике, это когда человек записывается на базовый интенсив, после которого с перерывом в одну неделю приходит на продвинутый. Там уже появляется БЭМ, компонентный подход, препроцессоры и так далее, а студент ещё плавает в разметке и сетке. Получается что человек много чего услышал, но мало чего усвоил.

Практика

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

Повышение квалификации

И вот после того, как специалист закрепляет навыки, можно переходить к изучению того, что необходимо современному верстальщику. Изучить адаптивную вёрстку, разобраться с компонентным подходом и вёрсткой по методологиям, адаптивной графикой, ретинизацией, векторной графикойанимациями. Узнать современные спецификации CSS, такие как Custom PropertiesGrid LayoutBox Alignment.

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

Что касается источников повышения квалификации, то тут есть выбор. Вы уже не новичок и можете найти информацию самостоятельно. С другой стороны, проблема та же. Информации много, она не структурирована и так далее. Только сейчас вы смотрите на это уже с высоты некого опыта, который получили раньше.

Помимо этого, есть продвинутые курсы, которые проставляет та же HTML Academy. Офлайн-курсов я, к сожалению, найти не смог. Хотя ребята из Epic Skills рассказали, что планируют перезапуск такого курса зимой. 

Что дальше?

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

И тут надо понимать что мы говорим о том, что фронтенд-разработчик должен знать JavaScript. Причём речь идёт не о библиотеках и фреймворках, а о базовых принципах языка. Как изучать? Это уже программирование, а значит требует бэкграунд. Если его нет, надо подготовить.

Если говорить об обучении, то считаю что лучше http://learn.javascript.ru/, наверное, ничего нет. Огромный учебник, пошаговый, структурированный, с заданиями, с ответами. Попробуйте пройти этот учебник. Решить все задачи. Для получения базы этого достаточно. Одновременно советую обращаться к MDN как к дополнительному справочнику.

Да вы можете пойти на курсы. Но если к этому времени вы не научились самостоятельно находить информацию, то самое время этим заняться.

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

Читайте зарубежные источники. Читайте статьи на CSS-TricksСodrops. Подписывайтесь на наши популярные источники информации, например, Веб-стандартыFor Web. Читайте в них о новых технологиях, выбирайте интересные источники и подписывайтесь на них отдельно, слушайте подкасты. Будьте в теме и в тренде современных технологий.

Посещайте тематические митапы и конференции. Не бойтесь платить за конференции, потому что вы получаете гораздо больше чем просто потраченное время. Конференции — это материал, общение, участие в сообществе. Считаете что уже достаточно сильно прокачались, чтобы о чём-то рассказать? Начинайте выступать. Развитие не должно останавливаться никогда. Если вы выбрали этот путь, уже не уйти от постоянного развития, если хотите стать профессионалом своего дела.

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

Полностью статю читать тут

 
Поставить ссылку в соцсети