Как стать фронтенд-разработчиком

Вениамин Мустафин,

Директор по развитию бизнеса

11.10.2019

Как я решил перейти в IT

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

В моём окружении всегда было много айтишников. Они постоянно рассказывали об интересных рабочих задачах и новых технологиях. А для меня самой «горячей» новостью было изменение СНиПа 85-го года — убрали опечатку в слове. Хаха, вы серьёзно? Потому я и решил попробовать себя в IT.

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

Я пробовал разбить обучение на последовательные шаги, но это оказалось нереальным: нельзя сначала изучить HTML и CSS, а через месяц взяться за JS. Это всё работает вместе. Поэтому придётся на каких-то этапах совмещать несколько источников. Главная идея — итеративное обучение: почитал теорию — закрепил на практике. И так повторять до бесконечности.

Закладываем фундамент

Я начал с курсов от HtmlAcademy. Ребята дают основы и закладывают правильный фундамент, на который потом проще будет надстраивать свои навыки.

Очень круто, что на курсах нет «голой» теории — вы сразу учитесь на практике.

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

Что даст: понимание, что такое вёрстка, HTML, тэги и атрибуты — вы научитесь верстать сетки, оформлять текст и немного поиграете с анимацией.

Прививаем хороший стиль с самого начала

Фундамент заложен, можно углубиться в вёрстку. Я взялся за методологию БЭМ от Яндекса. Её используют почти все компании для создания структуры классов.

Полностью всю методологию можно не изучать, но раздел «Быстрый старт» знать и использовать надо.

Ещё есть такой парень — Вадим Макеев. Он веб-евангелист (что бы это ни значило). Рассказывает и показывает, как делать валидную и удобную вёрстку. Погуглите его видосы и слушайте подкаст. По моему мнению, Вадим иногда перегибает палку, но рассказывает вещи, которые надо знать.

У него есть хороший доклад, который вдохновил меня с самого начала — «Людоедский интерфейс».

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

Практикуемся

Получили базу — нужно пробовать создавать тестовые странички. Гуглите «бесплатные PSD макеты сайтов», скачивайте и верстайте их. Не забывайте про адаптивность.

В браузере Chrome есть панель разработчика. Погуглите и используйте её — она упрощает жизнь.

Скачайте и установите редактор исходного кода — теперь это ваш главный инструмент в работе. Я использовал Atom и VS Code. Это бесплатные редакторы. Они легко оптимизируются под себя разными расширениями.

На этом этапе нужна критика. Ищите в своём окружении или на форумах фронтендеров и показывайте им свои макеты. Фидбек от эксперта поможет найти слабые места и пробелы в знаниях.

Положите любимые свёрстанные макеты в портфолио — будет плюсом при поиске работы.

Что даст: реальный опыт вёрстки, пусть и в «домашних» условиях.

Изучаем современные способы работы с сеткой

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

Лично для меня flexbox стал откровением. Я пытался сделать хитрую сетку с помощью флоутов, когда подошёл мой друг и сказал «Да тут на флексбоксах делов на 5 минут». И да, действительно на 5 минут… даже на 4! После этого мой мир изучения фронтенда изменился :)

Интересный тренажер для изучения flexbox — Flexboxfroggy. Сам до сих пор иногда залипаю в свободное время.

Что даст: опыт использования современных технологий и подходов к работе.

JavaScript

Не стоит забывать про JavaScript — без него сейчас никуда. Есть отличный учебник от Ильи Кантора — «Современный учебник JavaScript». Первая часть про основы JS, вторая про работу с DOM — как управлять элементами на странице с помощью JS. Учебник можно изучать бесконечно, но для начала хватит первых пяти глав.

Здесь главное не переборщить с теорией: освоил тему — закрепи на практике. Придумывайте себе задачи, которые требуют использования JS: скрыть элемент на странице при нажатии на кнопку; показывать или скрывать элементы на странице по таймауту.

Что даст: начальное знание JavaScript.

Что ещё нужно знать

Ещё есть такая штука как Webpack — сборщик модулей. Его используют на проектах, в которых много подключаемых файлов и зависимостей между ними. У Ильи Кантора есть скринкаст про него. Он, правда, немного устарел — вышло уже несколько новых версий Webpack. Но принципиальных отличий нет, для фундамента самое то.

Неплохо бы изучить и препроцессоры Sass/SCSS и Less. Они оптимизируют работу с CSS: с переменными, правилами вложенности, функциями и логическими блоками.

Добавлю, что не все браузеры будут одинаково отображать ваши свёрстанные макеты. Например, IE не дружит с флексбоксами, и далеко не все современные браузеры полностью поддерживают грид. Поэтому всегда проверяйте свои макеты в Chrome, Mozilla Firefox, Opera, Safari, IE и Edge.

CanIUse — полезный сайт для проверки поддержки технологий разными браузерами.

Если вы уверенно чувствуете себя в JS, можете начинать выбирать фреймворк для изучения. В России, как я вижу, самый популярный это React. Рядом с ним стоят Vue и Angular. Каждый из них чем-то лучше и чем-то хуже других — всё зависит от задачи, которую нужно решить.

Что в итоге

Я занимался самостоятельно по 2-3 часа в день в течение шести месяцев. И за это время я…

узнал, что такое HTML, CSS, JS, понял, как это всё применяется и работает вместе;
научился отличать хорошие подходы к разработке от плохих, начал замечать косяки на своих любимых сайтах;
узнал, что такое табличная верстка, флексбоксы и гриды, научился их использовать;
понял, как работает один из препроцессоров и научился применять его в работе;
смог собрать проект с помощью Webpack;
смог самостоятельно сверстать и прикрутить JS на сайт;
научился работать с редактором кода и оптимизировал его под себя.

Ищем работу по новой специальности

Полученных навыков хватит, чтобы претендовать на позицию фронтенд-разработчика уровня джуниор.

Чтобы попасть во fuse8, я взял отпуск на текущей работе и напросился на бесплатную стажировку. За эти две недели я старался показать всё, на что способен. В итоге меня взяли джуниором. Тут-то и началось основное обучение.

Выражение моего лица, когда узнал, что меня взяли на работу во fuse8

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

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

Авторы и источники фото: Julian Moreau, Ricardo Gomez Angel, Adrian Trinkaus, Kelly Sikkema, David Siglin, Frederico Izzo on Unsplash.