Как стать фронтэнд разработчиком с нуля

Как стать frontend-разработчиком с нуля?

Иван Колотилов Frontend-разработчик в финтех-стартапе

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

Чем занимается frontend-разработчик?

Веб-сервисы состоят из серверной (backend) и клиентской (frontend) частей. За последнюю отвечает фронтенд-разработчик. Из картинки, созданной дизайнером, он делает разметку, которую браузер может прочитать и показать пользователю. Качество сервисов постоянно растет, ожидания пользователей от них — тоже. Вместе с этим увеличивается сложность фронтенд-разработки. Сегодня все больше функций сервиса реализуется в браузере, без участия сервера, а интерфейсы усложняются. Поэтому спектр задач фронтенд-разработчика расширяется. Frontend-разработчик отвечает за то, чтобы веб-интерфейс:

Освойте профессию «Frontend-разработчик»
Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
2 400 ₽/мес 4 000 ₽/мес

• был удобным для использования, доступным для всех категорий пользователей, в том числе для людей с ограниченными возможностями;
• был эстетически привлекательным;
• корректно отображал данные: картинки, текст, списки;
• корректно собирал и передавал данные в базу компании: через формы или кнопки.

Узнайте больше о профессии в нашем карьерном гиде. Ссылка в конце статьи.

Как я стал frontend-разработчиком

Frontend-разработке я учился самостоятельно. В университете я начал увлекаться интернетом и медиа: тогда везде говорили о том, что СМИ переходят в сеть. Это стало точкой пересечения двух моих интересов. Друг посоветовал прочитать книгу Влада Мержевича «Верстка веб-страниц», она вдохновила меня погрузиться в работу с сайтами. Frontend-разработка показалась мне привлекательной сферой, потому что она прикладная.

На тот момент, чтобы брать небольшие проекты, достаточно было знать HTML-верстку. Я начал с фриланса, спрашивал у знакомых, не нужны ли им сайты-визитки. Затем стал верстальщиком: делал лендинги, освоил адаптивную верстку. В течение полугода на онлайн-курсах освоил JavaScript и React.

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

Какие навыки и знания нужны, чтобы стать фронтенд-разработчиком?

Что нужно знать и уметь frontend-разработчику:

• Понимать, как устроен интернет и сайты: что такое сервер, DNS-сервис, протокол HTTP, как взаимодействуют фронтенд и бэкенд, как работает браузер.
• Знать язык разметки HTML, чтобы верстать структуру страницы, CSS — чтобы менять стили, и JavaScript — для разработки клиентской логики сайтов.
• Работать во фреймворках React, Vue.js или Angular, чтобы создавать масштабные проекты, применять готовые решения и подходы, ускорять разработку.
• Знать систему контроля версий Git и сервис GitHub, чтобы оперативно отслеживать изменения в коде, которые вносят другие разработчики.
• Работать с данными, чтобы правильно показывать пользователям контент сайта. Уметь собирать, обрабатывать и отправлять на сервер в текстовом формате JSON информацию от пользователей.
• Разбираться в основных принципах веб-доступности и UX, чтобы проектировать удобные пользовательские интерфейсы.
• Проектировать приложения, чтобы кодовая база была хорошо структурирована и все модули кода правильно друг с другом взаимодействовали.
• Налаживать коммуникацию с коллегами. Frontend-разработчик взаимодействует с проджект-менеджером и дизайнером. Важно уметь задавать вопросы и общаться с командой, чтобы правильно понять задачи и реализовать их в соответствии с задумкой.

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

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

Чтобы завершить и выкатить сервис, frontend-разработчик должен знать базовые инструменты сборки, такие как Webpack, Parcel или Vite. Они собирают модули кода приложения и делают транспилинг — перевод из нового формата JavaScript в тот, который точно поддерживается всеми браузерами.

Сколько нужно учиться?

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

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

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

Получить все необходимые навыки и подкрепить их практикой можно на программе SkillFactory «Frontend-разработчик PRO». В процессе обучения вы создадите полноценные проекты, которые можно положить в портфолио. Менторы курса дают развернутый фидбек во время обучения, подсказывают и разъясняют, если теория или практические задания непонятны. Чтобы увереннее чувствовать себя при поиске работы, на карьерном блоке вы обновите свое резюме и подготовитесь к собеседованию.

Как освоить фронтенд-разработку в 2022 году: дорожная карта

Хотите узнать, как стать фронтенд-разработчиком в 2022 году? Составили для вас схему развития и приложили материалы для изучения.

Как стать фронтенд-разработчиком и что изучать в 2022 году? В этом поможет разобраться дорожная карта по фронтенду:

Также мы попросили Senior Frontend-разработчика Евгения Козака поделиться опытом в области фронтенд-программирования в 2022 году, и он открыл немало интересных новинок, которые мы включили в обновлённый вариант нашей статьи.

Как и прежде, фронтенд-разработка стоит на трёх китах — HTML, CSS и JavaScript, поэтому с них и начнём разбор.

HTML

Без понимания разметки дальше не продвинуться, ведь это каркас сайта. Вы должны изучить базовые теги и атрибуты, понимать анатомию HTML-разметки, а также быть в курсе доступности и основ SEO. Не забывайте и об HTML5 — пятой версии, которая встречается в требованиях каждой первой вакансии. Развитие HTML нельзя назвать быстрым, поэтому у вас будет большое преимущество, если вы уже знаете язык разметки.

Материалы для изучения HTML:

• Основы HTML
• Книга Марка Пилгрима «Погружение в HTML5»
• Порядок выполнения скриптов в HTML
• Видеокурс «HTML5 для начинающих»

CSS

Также важно научиться стилизовать элементы с помощью CSS и делать это правильно, например повторно используя стили для одинаковых элементов. Сперва освойте блочную модель и позиционирование содержимого — компоновку, выравнивание и центрирование элементов, а также их видимость. Почитайте об адаптивном и отзывчивом дизайне. Далее переходите к медиа-запросам, чтобы учитывать технические параметры различных устройств. Неплохим бонусом станет навык работы с CSS Grid и Flexbox. После углубляйте знания, изучая архитектуру и препроцессоры.

Евгений Козак
Senior Frontend Developer, Shell

Что касается фреймворков, раньше был очень популярен Bootstrap, но сейчас многие отходят от него и используют TailwindCss. Получается что ты не пишешь CSS, а пишешь просто классы. Он очень удобен для работы в React. Также Bulma и MUI.

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

Потому что во фронтенде это не будет например, обычный CSS, это уже будет SPA, и автоматом в топе идёт React, потом идёт Vue.js, AngularJS. И для всех них есть Tailwindcss, MUI и Bootstrap.

С CSS ситуация такая что, к сожалению, вряд ли уже придётся на нём писать, но работать с этими фреймворками (Tailwindcss/TailwindUI, Bulma, MUI) будет нужно. Их довольно легко освоить.

Материалы для изучения CSS:

• Основы CSS
• Функциональный CSS: упрощаем работу со стилями
• О CSS Grid и Flexbox простыми словами
• Игра-практика Grid Garden и CSS Diner
• 18 советов по CSS, которые сделают жизнь разработчика проще

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

JavaScript

Ну и как же стать фронтенд-разработчиком, не зная в 2022 году JavaScript? На «плечи» этого языка ложится функциональность сайта: действия по нажатию кнопок, заполнение форм, прослушивание событий, запуск триггеров и многое другое. Не стоит пренебрегать основами и сразу переходить к изучению «модного» фреймворка — изучайте язык постепенно.

Так, вам потребуется освоить синтаксис и базовые конструкции. Обратите внимание, что JavaScript — язык со слабой типизацией, то есть выполняет неявное преобразование типов автоматически. Это значит, что вы можете написать что-то вроде 10+»1″ и не получить никакой ошибки. Напротив, результат будет строкой — 101 . Вы можете почитать об этом подробнее в большом исследовании под названием WTF JavaScript.

Ну а мы вернёмся к дорожной карте по фронтенд-разработке. Важно освоить DOM, интерфейс для работы с HTTP-запросами и ответами Fetch API, технологию AJAX и XMLHttpRequest, ECMAScript 6+, модульный подход и веб-компоненты. Также пробегитесь по перечисленным концепциям вроде строгого режима и теневого DOM.

Евгений Козак
Senior Frontend Developer, Shell

У JavaScript есть ESversion но в каждый год появляется всё больше нового.

Вот что актуально и важно на момент 2022 года:

• ES6: стрелочные функции, block scoped(const, let) , Set , spread , rest , default params , for of , for in , modules , Symbol , Class , promises , includes .
• ES8: padEnd , padStart , async/await . Для работы с объектами очень помогают: object.entries , object.values , object.keys .
• ES9: RegEx improvements, rest , spread .
• ES10: array.flat() , array.flatMap() , trimEnd() , trimStart() упрощают работу с array .
• ES2020: matchAll , BigInt , Dynamic Import , Promise.all , Promise.any , Promise — finally(spinner) , globalThis . Optional chaining (bill?.bank?.age) .
• ES2022: private variable in class ; top level await: async without await in ; array.at(index) ; Object.hasOwn() ; RegExp Match Indices.

Материалы для изучения JavaScript:

• 7 главных книг для Javascript-разработчика
• Основы JavaScript + jQuery
• Современный учебник JavaScript
• Подборка книг для начинающего веб-разработчика
• Топ-5 JavaScript-библиотек для бизнес приложений в 2020-2021

Веб-безопасность

Знаете, что такое OWASP? Это открытый проект, собирающий статистику и направленный на обеспечение безопасности веб-приложений. Чтобы стать фронтенд-разработчиком в 2022 году, нужно уделять особое внимание безопасности. Хоть способов обезопасить себя и становится больше, но злоумышленники тоже не стоят на месте.

Итак, вам нужно понимать преимущества HTTPS перед HTTP, принцип работы CORS, политику защиты контента (CSP), а также регулярно следить за обновлениями на сайте OWASP.

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

Инструменты

Здесь всё просто:

• Освойте работу с системой контроля версий Git и выберите удобный сервис для хостинга проектов.
• Пользуйтесь линтерами и форматерами для улучшения качества кода.
• Для сборки используйте таскраннеры и бандлеры.
• Возьмите в привычку работать с менеджерами пакетов npm и yarn.

Подробнее о таскреннерах и бандлерах можно узнать из данного видео:

Фреймворки

3 основных фреймворка в работе с фронтендом: React, Angular, Vue.js.

Хорошее сравнение можно найти в этой статье. Для тех, кто желает освоить React с нуля, предлагаем понятную дорожную карту по React-разработке.

Евгений Козак
Senior Frontend Developer, Shell

К 2022 году React тоже изменился:

1. Появился React 18: Server Side Rendering, Concurrent mode, useId.
2. React Testing Library.
3. Стал популярен React Native.
4. Headless CMS — это cms для того чтобы редактировать контент. Админка как у WordPress, только для React. Чтобы использовать бэкенд, например. Тоже стало популярно в последние годы.
5. Server Side Rendering — о нём тоже важно знать.
6. Есть React Hooks, которые нужно знать.

Стоит также упомянуть о Storybook.js, Jest и Cypress.

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

GraphQL

Это основной язык API-запросов фронтенд-разработчиков. Платформа Apollo в свою очередь представляет собой реализацию GraphQL для транспортировки данных из облака к UI веб-приложения, а Relay Modern — это фреймворк, использующий GraphQL и предназначенный для работы с data-driven приложениями.

Евгений Козак
Senior Frontend Developer, Shell

Тренды 2022 года и 2023 года

В JavaScript это: S.O.L.I.D, KISS, YAGNI.

Также любой фронтендщик должен знать что такое и как работают: CI/CD, Kubernetes vs Docker, Azure Cloud Service, GitHub Actions.

Также нужно отметить такие моменты:

• Программист должен знать Accessibility (a11y). Это делает возможным работу с сайтом для людей с ограниченными возможностями.
• Progress Web Application — этому тренду уже 2 года. Любое SPA-приложение, JavaScript-приложение должно быть PWA. Там есть гайдлайн, который надо знать.
• Также для любого SPA-приложения нужно знать: State Management — Redux.
• А также Server Side Rendering.
• Важно знать, что такое Web Components, так как уже как 2 года они популярны.
• Важно знать что такое в JavaScript JAMStack.
• Программист должен знать как работают Serverless model: Amazon AWS Lambda, Azure Functions, RxJs, Web components, JAMstack, Atomic design, Component-driven development.
• Должны знать ESBuild. Это как webpack, но работают быстрее.
• И самое крупное изменение к 2022 году это Web 3.0. Это работа с metamask.

TypeScript

TypeScript очень популярен. Это другой тренд и его надо изучать. Без этих знаний уже вряд ли будут готовы принять на работу.

Вводный курс по TypeScript

Наглядно о принципах DRY, KISS, YAGNI, SOLID:

Заключение

Итак, чтобы стать фронтенд-разработчиком в 2022 году, следует хорошо владеть HTML, CSS и JavaScript, уметь обеспечивать безопасность веб-приложений, владеть основными инструментами, такими как Git, Prettier, ESLint, npm scripts и webpack, изучить хотя бы один из основных JavaScript-фреймворков и получить навык работы с GraphQL. Но ни в коем случае не останавливайтесь на этом. Например, всё чаще компании нанимают именно фулстек-девелоперов, поэтому рекомендуем также ознакомиться с дорожной картой по бэкенд-разработке и роадмапом по JavaScript.

Следите за новыми постами по любимым темам

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

Как стать front-end разработчиком? Что нужно знать и с чего начать?

Мир веб-разработки делится на два клана: front-end и back-end. Если вы хотите Создавать сайты и веб-приложения, то в определенный момент нужно будет сделать выбор и пойти по одному пути. Конечно, вы можете стать и full-stack девелопером, но лучше специализироваться и быть лучшим в своем деле.

Кто такой front-end разработчик?

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

Чем занимается front-end разработчик

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

С чего начать?

Для того, чтобы стать фронт энд-разработчиком нужно выучить:

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

Библиотека JavaScript, которая отвечает за взаимодействие JavaScript и HTML, а также облегчает работу с элементами DOM.

Вы можете найти гайды по верстке в интернете и шаг за шагом учиться превращать PSD-макеты в веб-страницы.

На этом этапе вы уже можете пробоваться на должность HTML-верстальщик.

Что должен уметь Junior frontend разработчик

В некоторых компаниях эта должность так и называется — front-end разработчик, в других вы можете увидеть ее деление на html-верстальщика и JS-разработчика.

Начинающий frontend разработчик должен знать:

• основы HTML, CSS
• знание и опыт работы с CSS-фреймворками (Twitter Bootstrap/Foundation)
• Верстка сайта
• опыт работы с jquery (установка плагинов, анимация, валидация, pop-ups)
• опыт программирования на JavaScript
• знание/понимание основных принципов ReactJS+Redux/AngularJS/Backbone или Node.js + MongoDB
• практические навыки работы с GIT
• основы Chai/Jasmine, Enzyme, Karma/Mocha

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

Как получить первую работу?

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

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

Хотите стать Front-End разработчиком?
Присоединяйтесь к команде Artjoker

Советы от frontend разработчиков Artjoker

1 Копайте глубже

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

2 Читайте код

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

3 Работайте в команде

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

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

Если вы хотите узнать больше о жизни и работе в Artjoker, читайте «50 фактов о работе в Artjoker» и смотрите видео:)

Поделись своей эмоцией после прочтения статьи

Отлично!

Хорошо!

Любопытно..

Не очень

О чем это?

Спасибо, ваша оценка важна для нас
Поделитесь вашим email Спасибо за подписку!

Подпишитесь на нашу рассылку, чтобы получать интересные материалы и инсайты из жизни компании Мы будем готовить для вас только самые актуальные и интересные материалы ��

Итак, ты решил стать фронтенд разработчиком — Практический гайд по развитию начинающего разработчика

Это перевод статьи So you want to be a front end developer — A practical guide to growth for junior developers от Стивена Томас, фронтенд тимлида в Shopify и Stiff Salt Co. Перевод выполнен Антоном Шкребко с согласия и одобрения автора оригинала специально для mkdev.

Фронтенд-разработка пережила огромный подъем в последние несколько лет. Javascript продолжает расти как самый используемый язык на Гитхабе и изобилует предложениями о работе. Не удивительно, что параллельно с этим подъемом мы видим массивный рост количества надменно-многообещающих-учебных программ – тренингов, туториалов и прочих интенсивных курсов. Этот цикл естественен для любой быстроразвивающейся индустрии, и состоит он из следующих этапов:

1. Существует огромный спрос на веб-разработчиков. Компании пытаются найти компетентных людей, чтобы заполнить вакансии, и платят за это большие деньги;
2. Другие компании видят этот спрос и создают образовательные ресурсы, дабы помочь карьере юным любителям бутстрапа. Они обещают решение для обучения веб разработке которое быстро приведёт их к оглушительному успеху;
3. Обещания столь привлекательны, что большое количество людей ведётся на них. Тренинги и обучающие онлайн ресурсы раскупаются как горячие пирожки — все это быстро становится многомиллиардной индустрией.

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

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

Ладно, что дальше?

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

Вот несколько вещей, которые помогли мне преодолеть разрыв между началом моего обучения и становлением компетентным и продуктивным разработчиком:

Читай книги

Для глубокого понимания языков используемых во фронтенд разработке (JS, CSS и HTML) чтение узконаправленных туториалов не поможет, тебе нужно читать книги. В начале моего обучения я помню, как читал Javascript Patterns, и совершенно не понимал описываемых там вещей. Но в процессе обучения части книги начинали обретать смысл. Я использовал их в качестве референса, которые способствовали тому, что я писал код правильным способом. Вскоре я был способен понять книгу полностью, и даже имел свое мнение по поводу её содержания.

Для начинающих фронтендеров, я бы рекомендовал Eloquent JavaScript, SMACSS, и HTML and CSS: Design and Build Websites. Но не нужно останавливаться на этом.

Посещай митапы

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

Делай вклады в опенсорс проекты

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

Итак, с чего начать? Подумай об инструменте, который ты используешь, скажем… JQUERy или Bootstrap, и начинай просматривать темы, связанные с ними на Гитхабе. Есть ли что-то в этих инструментах, что требует улучшений? Создай тему, или еще лучше предложи способ этого улучшения. Ничего страшного в этом нет. Самое плохое, что может случиться – твоё предложение будет отвергнуто, зато ты получишь отклик на свою работу.

Найди работу джуниором или стажировку

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

Мы у себя на mkdev организовываем стажировку. Читай, как это происходит и как подать заявку Читать

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

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

Начни свой проект

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

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

Никогда не прекращай учиться

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

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

Послесловие

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

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

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

Ментор Екатерина Шпак научит основам фронтенд разработки на примере создания двух веб-приложений с использованием современных фреймворков и библиотек.

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

© Copyright 2014 — 2023 mkdev | Privacy Policy