Обучение фронтенд разработке: базовые знания и план обучения

ТОП курсы по Frontend-разработке: обучение фронтенд-разработчиков

Профессия «Фронтенд-разработчик» — HTML Academy

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

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

«HTML и CSS. Профессиональная вёрстка сайтов» дался мне довольно легко, так как свободного времени у меня было достаточно, да и материал усваивался хорошо. В связи с этим, к наставнику обращался нечасто и ему оставалось только принимать мои практические задания.

На втором курсе информации стало больше и уровень сложности вырос: препроцессоры, автоматизация, адаптивность, работа с консолью и ещё много классного, интересного и важного. Кажется, теперь я уже начал понимать куда попал — всё серьёзно. Тут уже наставнику не пришлось оставаться в стороне. Он помогал советом, ревью кода и морально поддерживал. В результате успешная защита и 100% выполненных критериев.

Оставался последний курс «JavaScript. Профессиональная разработка веб-интерфейсов». До этого момента с JavaScript знаком был совсем немного, да и первые интерактивные курсы по нему только начали появляться у Академии. Было сложно, в середине курса начал отставать, думал что до защиты не дотяну. В общем, не раз приходилось проходить «5 стадий принятия». Но благодаря моему упорству и усилиям наставника всё получилось. Полученные знания улеглись в голове, я догнал программу и получил от наставника допуск на защиту в срок. Проект защитил на 100% с третьей попытки, чего сам от себя не ожидал, учитывая обстоятельства.

Радости не было предела, цель достигнута. За полгода интенсивного обучения получилось заложить прочный фундамент знаний и умений в новой профессии. После выпуска нужно было набраться опыта реальной разработки. Посмотрел все варианты. Решил, что лучшим будет стажировка в «Лиге А.». На этом этапе вёрстка уже не вызывала проблем.

Первый проект и первые сложности. В реальности всё бывает не так идеально как в макетах Академии, но это тоже ценный опыт. Ты быстро приспосабливаешься, продолжаешь учиться. Оказалось интересно работать в команде с другими выпускниками и вместе решать поставленные задачи. С каждым новым проектом на стажировке осознавал, как быстро расту. Но понимаю, что это только начало. Впереди много не изученных технологий и новых интересных задач. Огромное спасибо HTML Academy за полученные знания и возможность развиваться.

Если бы я учил Frontend сегодня. Советы начинающим / Хабр
Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.

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

Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?



HTML и CSS


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

С помощью HTML мы можем добавлять и описывать эти элементы. Изначально они будут «сырыми», со стандартным внешним видом. Для изменения стиля используется CSS. Он позволяет задавать цвет, размер, расположение и десятки других параметров внешнего вида элемента.

Как освоить


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

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

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

Где брать идеи и макеты для верстки?

Я использовал Dribbble и CollectUI, но также можно поискать на Behance и One Page Love.

Также можно брать настоящие макеты из UI Store Design. Я советую верстать макеты из Figma, т.к. её используют многие дизайнеры, и в будущем ты вероятнее всего будешь работать именно с ней. А еще она бесплатна и работает в браузере.

JavaScript


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

Если с HTML и CSS мы верстали страницу, то JavaScript отвечает за динамическую часть страницы: анимации, отображение данных, обработка действий и многое другое.

Зачем мне он нужен?

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

Вот пример такой реализации и использованием JQuery:

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

Как освоить


Лучше всего будет начать изучение на learn.javascript.ru. Это прекрасный ресурс, который является базой знаний как для новичков, так и для продвинутых разработчиков.

Здесь важно понять основы самого JavaScript, а также особенности его работы в браузере. Если какие-то темы покажутся тебе слишком сложными (к примеру, прототипы), то можешь пропустить их и вернуться позже.

Не стоит слишком увлекаться одной лишь теорией JavaScript. Я рекомендую параллельно с изучением пробовать свои силы и писать простые скрипты. Можно также пробовать разбирать чужие участки кода на Codepen.

Постепенно изучай новые плагины и библиотеки. Одной из самых популярных и простых для понимания является JQuery. С ней значительно проще взаимодействовать с содержимым страницы, и её можно довольно быстро освоить на базовом уровне.

По большому счету, ты часто будешь прибегать к использованию сторонних библиотек в своих проектах. Чтобы лучше понять, как это делается, рекомендую попробовать форматировать даты с помощью Luxon или сделать карусель через Owl Carousel.

Что дальше?


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

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

Рекомендую ознакомиться с Frontend Roadmap. Здесь описаны технологии разработки интерфейсов, которые будут нужны тебе в дальнейшем.

В дальнейшем тебе наверняка будут интересны реактивные фреймворки, вроде React или Vue. Для сборки приложений на них ты освоишь Webpack, а для ускорения процесса верстки изучишь препроцессоры PUG и SASS. Или может быть захочешь углубиться в графику и научишься работать с D3 или WebGL.

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



P.S. Каждую технологию в этой статье я сопровождал ссылкой на документацию или примеры использования. Ты можешь ознакомиться с ними, чтобы получить более широкое представление об веб-разработке.
как нетехнарю стать фронтенд-разработчиком / Блог компании HTML Academy / Хабр

Фото: Flickr / Scott & Elaine van der Chijs / CC

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

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

Журналист → фронтендер


Ирина Смирнова, фронтенд-разработчик в Bookmate

Завязка этой истории зауряднее некуда: окончив университет, я совсем не знала, что делать со своей жизнью. То ли оставаться журналистом средней руки и устроиться на заведомо нелюбимую работу, то ли удавиться сразу. В результате, конечно же, устроилась на работу (нелюбимую), но карьерный вопрос оставался открытым.

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

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

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

Академия мне дала нечто большее, чем просто возможность сменить профессию. Что-то, что сильно поменяло меня и распространилось на всю жизнь в целом: превратило меня из «диванной картошки» в проактивного человека, который всё время что-то учит, делает, кодит, заставляет других учить… Кстати, на «Букмейте» у меня есть полка, где я собираю лучшие книги по веб-разработке и дизайну интерфейсов, которые помогли мне в обучении. Помогут и вам, если решитесь на этот квест «Стань-из-кого-угодно-веб-разработчиком».

Сотрудник колл-центра → программист


Софья Лапшина, младший разработчик в Performance Lab

Я начала работать чуть раньше 18 лет. Долгое время моей целью было просто заработать денег, которых мне будет достаточно для проживания. В основном я работала в так называемых колл-центрах. Время шло, денег хватало. И в 23 года я задумалась: «А что дальше?». Перспектива сидеть до 55 лет и отвечать на звонки меня не прельщала, да и руководящие должности меня не интересуют. Мне хотелось работать там, где всегда есть к чему стремиться, где ты будешь постоянно развиваться и не погрязнешь в рутине и стопках бумаг.

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

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

Обучение

Сколько людей, столько и мнений по поводу того, как учиться — самому или на курсах, какие ресурсы лучше и так далее.

Внимательно изучив путь становления фронтенд-разработчиком, я решила, что начинать надо с вёрстки, с изучения HTML и CSS. Как человек мало что смыслящий на тот момент в разработке, решила отдать себя в руки профессионалов и пошла на интенсивы от Академии — «Базовый HTML и CSS» и «Продвинутый HTML и CSS». Не стану рассказывать, что это за интенсивы: их описание вы можете почитать на сайте Академии, а также посмотреть отзывы. Могу сказать лишь то, что я не ошиблась, когда подумала, что надо изучить кучу литературы. Но раз уж начала, то решила не отступать.

Сначала я научилась создавать пустую страницу. Потом на странице появился какой-то текст. И я думаю: «Круто! А что ещё я могу?». Научилась «раскрашивать» страницу. «А ещё?». Строить страницу из блоков. «А ещё? А ещё? А ещё?». И в итоге я могу создавать красочные страницы сайта, которые отлично смотрятся как на ПК, так и на телефоне.

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

Поиск работы

Окончив курсы, начала искать работу. К слову, знала я только вёрстку и что-то слышала про JavaScript. Многие говорят, что новичкам сложно найти работу. А я скажу, что нет, не сложно. Тут, как и везде, главное — чтобы ваши возможности совпадали с потребностями работодателя. Да, к новичкам присматриваются с опасением, но тут уже от вас зависит, как вы проявите себя на собеседовании.
Ожидание vs Реальность, или Мой первый опыт работы в IT-компании

Сразу отмечу, что тут всё зависит от компании, все они на вкус и цвет разные, поэтому рассказывать буду непосредственно о той, где работаю. Сейчас я работаю в Performance Lab. Сама компания занимается различными тестированиями сайтов, приложений и IT-систем.

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

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

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

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

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

Экономист и бизнесмен → бэкенд-разработчик


Артемий Степанов, Backend Developer

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

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

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

Я понял, что до сих пор являюсь полным нулём, и стал искать курсы. Друзья-программисты посоветовали бесплатные курсы HTML Academy. И тут, как говорится, понеслось. Я записался на базовый курс по HTML/CSS — после его прохождения понял, что хочу этим заниматься и дальше. Работа с наставником (его зовут Максим Фарига) стала первым толчком к цели.

Окончив курс, я стал потихоньку верстать в свободное время и для проектов своей компании. В Академии идти на базовый курс по JS рекомендуют хотя бы после полугода работы верстальщиком, но я записался на него уже через два месяца. Здесь я познакомился с одним из лучших менторов в своей жизни, Борисом Ванюшиным. Он был строг, не давал никаких поблажек, временами я страдал (в хорошем смысле). Именно такое отношение помогло научиться мыслить как программист. Всё же HTML и CSS — языки разметки, а тут я впервые столкнулся с настоящим языком программирования.

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

Без работы я просидел около семи месяцев, всё это время я учился дальше и параллельно искал работу. В итоге подтянул JS до более-менее нормального уровня, освоил ES6, препроцессоры для CSS и прочие новомодные вещи. В августе этого года меня взяли за стажировку в фирму, которая разрабатывает исключительно сервисы. Около месяца я проработал в ней фронтенд-разработчиком (AngularJS, gulp, Sass), параллельно изучая Node.js. Спустя месяц меня перевели на бэкенд-разработку: я сам захотел, и у меня это получается действительно лучше. Этим до сих пор и занимаюсь.

По итогу всей этой истории можно сказать, что теперь я наконец делаю то, что мне действительно нравится. У меня отличная команда, зарубежные заказчики (из Норвегии), в арсенале — HTML, CSS, Stylus, Sass, JavaScript (ES6), AngularJS, Node.js, Express, MongoDB + Mongoose, Ruby (хотя тут я ещё совсем зелёный).

Весь этот путь занял 11 месяцев. На момент, когда я решил кардинально поменять свою жизнь, мне было 24, сейчас мне 25. Конечно, жалко впустую потраченного времени, жалею, что попал в программирование слишком поздно. С другой стороны, это только подстёгивает к развитию и совершенствованию навыков.

Музыкант → верстальщик


Артём Иванец, младший фронтенд-разработчик в компании eWave

Вот моя история. Я 15 лет профессионально учился музыке, пройдя весь положенный путь: ДМШ, ССУЗ, ВУЗ. Однако позднее я столкнулся с проблемами со здоровьем: пострадали руки — пришлось приостановить музыкальную деятельность. Нужно было придумать, чем заниматься.

Мне было интересно разобраться с программированием. Однажды я случайно наткнулся на статью создателя HTML Academy Александра Першина, в которой он говорил о том, что верстальщик — это отличный старт в ИТ. Затем начал изучать литературу, но самостоятельно разобраться в ней было сложно. И уже потом наткнулся на сами курсы академии. Попробовал интерактивные курсы и решил записаться на интенсивный: очень уж хорош был контент занятий. В итоге я отучился на двух интенсивах.

После этого смог устроиться на работу в крупную компанию, которая разрабатывает проекты в сфере e-commerce для заказчиков из австралийского региона. Устроился я туда не сразу: сначала получил около 30 отказов — даже без приглашения на собеседование. На самом интервью я показал себя не лучшим образом, завалил часть по JS, но по вёрстке проблем не возникло.

Как выяснилось, обучение в Академии даёт всё, что нужно для получения работы и старта в профессии, и даже больше того. В этом я убедился, когда столкнулся с джуниорами, которые учились сами. Я доволен: мне нравится работа, и никто мне не запрещает параллельно заниматься искусством.

Организатор гастролей → разработчик чат-ботов


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

Решение о смене работы далось мне очень тяжело. До весны 2015 года я семь лет вполне успешно занимался организацией гастролей. Однако меня всё время преследовало ощущение того, что я занимаюсь не своим делом и постепенно деградирую. Выйти же из зоны комфорта было страшно: казалось, что в 36 лет менять профессию уже поздно.

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

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

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

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

На самом же деле здесь нет ничего невозможного, главное — очень сильно захотеть научиться новому.

ТВ-продюсер → фриланс-разработчик


Александр Половников, фронтенд-разработчик, фрилансер, наставник HTML Academy

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

Впервые с HTML я столкнулся ещё в школе: на занятиях мы делали простые странички, которые мне легко давались. В своё время я даже сделал пару «коммерческих» сайтов друзьям. Но в дальнейшем я выбрал вуз, никак не связанный с технологиями, а вёрстка оставалась лишь хобби, которое я со временем забросил.

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

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

Но самое классное произошло, когда я приехал в гости в офис академии. Разговор зашёл о работе, кто-то упомянул новую фриланс-площадку Rubrain — она недавно открылась, все о ней слышали, но никто ещё не пробовал. Я отправил администрации своё резюме с описаниями навыков, рассказом о себе и просьбой добавить меня в базу. Через пару дней мне пришло письмо об одобрении моей заявки, а ещё чуть позже мне позвонил один из основателей площадки и предложил поработать на них: нужно было помочь с сайтом.

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

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

Дальше я работал на фрилансе, заводил новые знакомства, получал проекты, учился и развивался, уже понимая, что хочу заниматься именно фронтендом. Прошёл год, и в какой-то момент я осознал, что хотел бы поделиться наработанным опытом и знаниями — прошёл собеседование на должность наставника в HTML Academy на базовый интенсив, а спустя полгода — и на продвинутый. В итоге я занимаюсь тем, от чего меня действительно «прёт», меня не покидает желание постоянно учиться и развиваться. Работа — это моё хобби.

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

Кстати, о портфолио: чтобы начать получать заказы, оно должно быть. А где его взять начинающему фронтендеру? Лучший вариант — найти в интернете бесплатные или недорогие стоковые макеты и сверстать их. Пять таких качественных работ — и получится достойное портфолио.

Редактор-копирайтер → фронтенд-разработчик международного стартапа


Николай, фронтенд-разработчик

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

Почти всегда моя работа так или иначе была связана с интернетом, так что однажды мне захотелось оказаться среди тех, кто делает все эти чудесные сервисы и сайты. Всё началось в 2014 году — тогда мне было 32 года. Обычное дело: понадобилось сделать что-то для сайта компании, денег на фрилансеров не было — я полез разбираться сайт, наткнулся на сайт академии, прошёл все доступные на тот момент курсы и… втянулся.

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

Найти работу оказалось непросто, сначала ничего не получалось. Я откликался на вакансии, получал отказы, неудачно выполнил тестовое задание для CSSSR, найти заказы на фриланс тоже не удавалось. Но рук я не опускал, продолжал искать, самостоятельно изучая то, чего не рассказывали на базовом интенсиве (а других тогда ещё не было).

И вот однажды меня пригласили на собеседование на должность стажёра-верстальщика. Я его прошёл и получил свою первую работу в команде веб-разработки. Можно сказать, мне повезло: в компании мне выделили наставника, который многому меня научил, сами проекты тоже были интересными. Мы создавали сайты для крупных компаний — операторов связи, у каждой из них были требования к качеству и стилю кода, используемым технологиям. Именно тогда я разобрался с БЭМ, научился использовать препроцессоры, вник в работу с PHP-шаблонизаторами, адаптивной вёрсткой, Гитом и многим другим.

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

Сейчас я работаю фронтенд-разработчиком в небольшом международном стартапе — и как будто вернулся на два года назад: столько всего нужно знать, столько шишек набить, столько велосипедов изобрести, а результатов твоей работы ждут здесь и сейчас. Это тяжело, страшно: вдруг не смогу развиваться в нужном темпе, подведу коллег, подведу себя… мне ведь уже даже не 32. Но всё это чертовски интересно, так что я с оптимизмом смотрю в своё «фронтенд-будущее».

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

Что ещё? Отмечу только одно (про остальное скажут другие) — сам тоже хочу подтянуть этот момент: ходите на конференции и митапы, больше общайтесь, выступайте, заводите новые знакомств. Это расширит ваш кругозор, мотивирует увеличить собственные знания, к тому же будет к кому обратиться с вопросом, а кто-то из знакомых, вполне возможно, однажды пригласит вас на работу.

Заключение


Опыт наших студентов в смене профессии говорит о том, что нет ничего невозможного. Однако и этот процесс можно оптимизировать. Вот что нужно знать нетехнарям, которые захотели переквалифицироваться в ИТ-специалиста:
  • Смена профессии может занять до года. Смена профессии — небыстрый процесс, изучение новых технологий и последующее прохождение собеседований займут время.
  • Курсы помогают ускорить прогресс. Учиться только самому — не самый эффективный способ получения новых знаний. Курсы и интенсивы могут дать новый импульс развитию — особенно если занятия предполагают решение задач, приближенных к реальной жизни, под руководством наставников.
  • Сначала нужно научиться вёрстке. Именно изучение HTML и CSS должно стать первым шагом к освоению новой профессии. Это позволит поэтапно разобраться с тем, как работает веб, и понять, какую специализацию хочется выбрать.
  • Реальные проекты помогают ускорить прогресс. Теория и учебные задания — это хорошо, но нет лучшего способа профессионального роста, чем работа над реальными проектами. Практика позволяет не забыть теорию и развить навыки.
Как стать фронтенд-разработчиком в 2018 году / Блог компании RUVDS.com / Хабр
Камран Ахмед, автор материала, перевод которого мы сегодня публикуем, говорит, что занимается фуллстек-разработкой уже 5 лет и в настоящее время работает на должности ведущего инженера в компании tajawal. Там ему приходится заниматься многими вещами. Ему, по долгу службы, надо быть в курсе того, что происходит в мире веб-разработки, кроме того, одна из его задач заключается в том, чтобы поддерживать знания и навыки других разработчиков в хорошем состоянии. По его словам, наблюдение за развитием технологий — это не только его работа, но и хобби. Ему приходилось видеть сложности, с которыми сталкиваются начинающие программисты (и опытные — тоже), когда речь заходит об оперативном освоении новшеств. Камрану, в прошлом году, часто приходилось отвечать на вопросы о том, в чём нужно ориентироваться для того, чтобы оставаться современным и востребованным программистом. В результате он, для того, чтобы помочь себе и другим, решил подготовить схемы, ссылки на которые отвечали бы на большинство вопросов, которые ему обычно задают.



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

Обзор


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

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


План развития фронтенд-разработчика

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

Изучение основ HTML


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

▍Задание


После того, как вы освоите основы HTML, создайте как минимум 5 HTML-страниц. Я порекомендовал бы выбрать любой веб-сайт — например, страницу профиля на GitHub, или страницу входа в Twitter, и воссоздать её, обращая особое внимание на структурирование элементов страницы. То, что получится, будет не таким уж и красивым, но беспокоиться пока об этом не стоит. Самое главное сейчас — структура.

Изучение основ CSS


Теперь, после того, как вы узнали правила создания скелетов страниц, пришло время обтянуть эти скелеты кожей, украсить их. Технология CSS, или каскадные таблицы стилей, используется для придания страницам привлекательного вида. Вот на что стоит обратить внимание, знакомясь с CSS:
  • Синтаксис и свойства CSS.
  • Блоковая модель, разработка макетов с использованием технологий Grid и Flexbox.
  • Разработка отзывчивых сайтов с использованием медиа-запросов.

▍Задание


После того, как вы освоите основы CSS, займитесь стилизацией созданных ранее страниц. Например, если вы написали HTML-код, воссоздающий структуру страницы профиля на GitHub — сделайте с помощью CSS так, чтобы ваша разработка выглядела в точности как настоящая страница профиля. Стилизуйте все пять страниц, созданных на предыдущем шаге.

Изучение основ JavaScript


JavaScript — это технология, которая позволяет сделать HTML-страницы интерактивными. Например, средствами JavaScript создают все те слайдеры, всплывающие окна, уведомления, которые вы видите на веб-сайтах. JS даёт возможность перезагрузки частей страниц без необходимости перезагрузки страниц целиком. На данном шаге вам нужно освоить основы JavaScript и приготовиться к самому интересному. Изучая JS, обратите внимание на следующее:
  • Изучите синтаксис и базовые конструкции языка.
  • Освойте методики работы с DOM средствами JS, то есть, например, разберитесь с тем, как добавлять элементы на страницу и удалять их с неё, как работать с классами элементов, как применять CSS-стили.
  • После освоения основ разберитесь с более продвинутыми вещами, такими, как области видимости, замыкания, поднятие функций, всплытие событий, и так далее.
  • Разберитесь с тем, как выполнять HTTP-запросы из JS-кода с использованием технологий XHR или Ajax. Именно Ajax позволяет выполнять какие-либо действия, обычно требующие перезагрузки страниц, не перезагружая их целиком.
  • Далее — уделите время изучению новых возможностей языка, того, что появилось в ES6+. ES6 — это версия JavaScript, в которой имеется множество интересных обновлений, таких, как классы, различные способы объявления переменных. Тут появились новые методы массивов, средства для конкатенации строк, и так далее. Большинство материалов по ES6, которые вам попадутся, будут использовать Babel в процессе разъяснения особенностей новых возможностей языка. Babel — это транспилятор, он конвертирует, условно говоря, «новый» JavaScript-код в «старый». Нужно это для того, чтобы новый код работал в старых браузерах. Пока, однако, не обращайте внимания на Babel. Ваша задача — понять основы JS и научиться пользоваться этим языком в современных браузерах. Ниже мы ещё поговорим о ES6.

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

Стоит ли изучать jQuery?


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

Практика


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

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

После того, как вы достаточно попрактикуетесь, придёт время заняться настоящими делами. Загляните на github.com, найдите подходящий опенсорсный проект и постарайтесь внести в него посильный вклад, создав несколько пулл-реквестов. Вот несколько идей, касающихся вклада в опенсорс:

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

Сделав что-то полезное и отправив запрос на включение изменений в проект, добавьте туда ссылку на этот репозиторий, сообщите, что вы учитесь, попросите дать отзыв о вашей работе и рекомендации о том, как сделать её лучше.

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

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

Менеджеры пакетов


До этого момента, если вы пользовались какими-нибудь внешними библиотеками, например, плагинами или виджетами, вам приходилось самостоятельно загружать JS и CSS-файлы и добавлять их в проект. Когда у того, чем вы пользовались, выходила новая версия, вам, опять же, самостоятельно, приходилось эту новую версию загружать. Это — довольно скучная и утомительная задача. Менеджеры пакетов способны вас от этого избавить. Они помогают включать в проекты внешние библиотеки и плагины, делая это таким образом, что разработчику не приходится беспокоиться о том, чтобы вручную копировать необходимые файлы в проект и следить за выходом их новых версий. В частности, речь идёт о менеджерах пакетов yarn и npm. И тот и другой, в общем-то, представляют собой практически одно и то же, различия между ними не так уж и велики, и вы можете изучить любой из них, после чего другой покажется вам очень знакомым.

Практика


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

Препроцессоры CSS


Препроцессоры расширяют возможности CSS, давая стилям функционал, недоступный при их стандартном использовании. Существует множество препроцессоров: Sass, Less, Stylus, PostCSS, и другие. Если бы мне пришлось бы выбрать один из них, я остановился бы на Sass. Однако в последнее время весьма интересно выглядит препроцессор PostCSS, умение обращаться с ним вам точно не помешает, это что-то вроде Babel для CSS. Его можно использовать автономно или поверх Sass. На данном этапе вашего обучения я порекомендовал бы освоить Sass, а позже, когда у вас будет время, разобраться с PostCSS.

CSS-фреймворки


В принципе, изучать CSS-фреймворки вам необязательно, однако, если вы решите освоить какой-нибудь из них, знайте, что существует их очень много. Из того, что я пробовал, мне больше всего понравились Bootstrap, Materialize и Bulma. Если вы выбираете фреймворк с учётом его рыночной востребованности, обратите внимание на Bootstrap. Я бы точно выбрал его, если бы сейчас задумывался об освоении CSS-фреймворка.

Организация CSS


По мере роста вашего веб-приложения растёт и объём CSS, в описания стилей проникает беспорядок, ими становится тяжело управлять. Существует множество способов структурирования CSS с учётом нужд масштабирования. Тут можно отметить OOCSS, SMACSS, SUITCSS, Atomic, BEM. Вам следует получить представление о них, понять различия между ними. Я бы в подобной ситуации, для более глубокого изучения, выбрал BEM.

Средства для сборки проектов


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

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

В области линтеров, опять же, существует масса вариантов: ESLint, JSLint, JSHint, JSCS. Однако сейчас наибольшей популярностью пользуется ESLint, поэтому вы вполне можете остановиться на нём.

В вопросе инструментов для создания пакетов можно наблюдать ту же ситуацию. Тут есть Parcel, Webpack, Rollup, Browserify, и так далее. Если вы хотите выбрать какой-то один, можете без лишних раздумий остановиться на Webpack. Rollup тоже весьма распространён, но его рекомендуется использовать, в основном, для библиотек. Если же речь идёт о веб-приложениях — тогда вам нужен Webpack. Поэтому освойте Webpack, а позже, если хотите, разберитесь с Rollup.

Практика


После того, как вы освоите всё то, о чём шла речь выше, у вас появится очередной повод для праздника. Фактически, вы теперь стали современным JS-разработчиком примерно на 75%. Помните о том, что практика — это очень важно, поэтому создайте какой-нибудь проект, используя всё то, что уже изучили. Может быть — это будет некая библиотека, в которой будут применены возможности Sass и JavaScript. Завершив работу, используйте Webpack для преобразования Sass в CSS, примените babel для транспиляции ES6-кода. А когда всё будет готово — опубликуйте свою разработку на GitHub и выложите в npm.

Выбор фреймворка


В старой версии схемы, которую мы рассматриваем, шаг выбора фреймворка следовал сразу за освоением основ, но теперь я поместил его после Sass, инструментов для сборки проектов и менеджеров пакетов, так как всем этим вы будете пользоваться при работе с фреймворками.
В том, что касается выбора фреймворка, можно отметить несколько вариантов, однако наиболее распространёнными являются React, Vue и Angular. Причём в наши дни потребность рынка в React.js всё растёт и растёт. Однако выбрать можно любой из перечисленных фреймворков. Я бы, например, выбрал React или Angular. Стоит отметить, что вам, как начинающему разработчику, Angular может показаться проще в сравнении с React, возможно, из-за того, что Angular поддерживает практически всё, что нужно для работы, что называется, «из коробки». Это — мощный маршрутизатор с поддержкой ленивой загрузки, HTTP-клиент, поддерживающий перехватчики, средства для внедрения зависимостей, инкапсуляция CSS компонентов, и так далее. Используя Angular, вы будете избавлены от забот о подборе внешних библиотек. Однако React пользуется большей популярностью, вокруг него сложилось замечательное сообщество, Facebook активно занимается его развитием. Тут мне хочется отметить, что выбирать фреймворк, основываясь только лишь на его «популярности» не стоит. Лучше всего — оценить альтернативные варианты, сравнить их, «примерить» их к нуждам своего проекта и сделать выбор.

Тут я не буду рассказывать о том, как я работал с Angular и React, не буду сравнивать их. Пожалуй, это — тема для отдельной статьи. Однако, раз уж мы говорим об освоении технологий, рассмотрим кривые обучаемости для Angular и React.

Кривые обучаемости, представленные ниже, построены с учётом того факта, что разработчик уже знаком с TypeScript и RxJS. Описание особенностей этих кривых достойно самостоятельного материала, тут я лишь отмечу, что они выглядят именно так благодаря стандартизации и возможностям, которые присутствуют в Angular по умолчанию. Это не означает, что React в чём-то плох. У каждого из этих фреймворков есть своя область применения. Итак, вот эти кривые.


Кривые обучаемости для React и Angular

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

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

Если вы выберете Vue.js, то вам может понадобиться изучить Vuex. Эта библиотека очень похожа на Redux, но предназначена для Vue.

Тут следует понимать, что Redux, Mobx и Rx.js не привязаны к соответствующим фреймворкам. Эти библиотеки можно использовать и в приложениях, написанных на чистом JavaScript. И, если вы выбрали Angular — обратите внимание на то, что это должен быть Angular 2+, а не Angular 1+.

Практика


Теперь вы знаете практически всё, что может понадобиться для разработки современных веб-приложений. Не забывая о практике, создайте что-нибудь на основе выбранного фреймворка. Если вам нужны идеи — поищите в интересных вам GitHub-репозиториях папки ideas, выберите то, что вам понравится, и приступайте.

После того, как вы сделаете то, что решили сделать — почитайте материалы об измерении и улучшении производительности. Например, обратите внимание на такие вещи, как Interactivity Time, Page Speed Index, Lighthouse Score, и так далее.

Прогрессивные веб-приложения


Освоив всё то, о чём мы до сих пор говорили, разберитесь с сервис-воркерами и с тем, как создавать прогрессивные веб-приложения.

Тестирование приложений


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

Статическая проверка типов


Средства для статической проверки типов помогают контролировать типы данных в JavaScript-приложениях. Нельзя сказать, что изучать их обязательно, но они, определённо, способны принести огромную пользу, да и освоить их, вывести на уровень практического использования, можно буквально за несколько часов. Я, в основном, имею в виду TypeScript и Flow. Лично я отдаю предпочтение TypeScript, но вам советую опробовать и то и другое, а потом уже решить — что вам больше понравится.

Серверный рендеринг


Если вы изучили всё то, о чём мы говорили, ваших знаний будет достаточно для того, чтобы получить должность фронтенд-разработчика. Однако, это — не повод останавливаться.
Изучите возможности серверного рендеринга в выбранном вами фреймворке. Как именно это будет выглядеть — зависит от фреймворка. Например, в сфере React особое внимание стоит обратить на Next.js и After.js. В случае с Angular — это Universal. Если речь идёт о Vue, то это — Nuxt.js.

Итоги


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

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

Профессия Frontend-разработчик

Даниил
Пилипенко

Директор кадрового центра SimbioWay

Егор
Яковишен

Setka, старший frontend-разработчик. Блок «Javascript»

Павел
Бондарович

Технический директор Creonit digital production. Блок «Vue.js»

Максим
Савченко

Фронтенд-тимлид Creonit digital production. Блок «Vue.js»

Ольга
Климонова

Ведущий разработчик, ТАСС. Блок «React.js»

Александр
Кузнецов

Frontend Techlead, ТАСС. Блок «React.js»

Front-end education

Этапы обучения

1. Изучение верстки. ±1-3 недели

В основе всей работы front-end разработчика лежит создание интерфейсов. Первый и важный навык — умение скомпоновать внешний вид на HTML+СSS по макетам дизайнера. В этом задании собрали материалы и ссылки, по которым можно самостоятельно изучить верстку, а также работу с Git. На основе этих знаний можно приступить к реальным задачам.

2. Верстка двух макетов. ±2-4 месяца

На втором этапе представлено два макета — макеты придуманы для обучения, они тестовые, не коммерческие. Но требования к результату приближены к проектным: создать компонентную архитектуру, использовать БЭМ-нейминг, Webpack, Pug, SCSS, а итог опубликовать через Github Pages.

3. Теория JavaScript. ±3-4 недели

Собрали список источников, по которым изучали JS сами. При этом можно параллельно делать задание №4 и совмещать теорию с практикой — вдвойне полезно 🙂

4. Практика JavaScript. ±1-2 месяца

Задание заключается в написании плагина для jQuery, который бы реализовывал функционал «бегунка» (также называемого слайдером).

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

5. Рефакторинг всех заданий. ±1-2 месяца

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

Выполнив это задание, сможешь смело показывать репозитории даже опытным разработчикам.

5. Собеседование

После рефакторинга всех заданий. Мы заранее даём список вопросов, около 80, а вы готовитесь по ним. Собеседование проводят ребята из нашей команды. Главное для нас — ваше понимание, а не на формально найденный ответ.

Не получится сдать все вопросы сразу — не беда, количество попыток не ограничено.

После собеседования

Всех, кто показывает достойный результат, приглашаем присоединиться к нашей команде и команде наших партнёров.

Длительность прохождения программы индивидуальна и нами по срокам никак не ограничена. Занимаясь 30 рабочих часов в неделю, в среднем ребята проходят обучение за 4-5 месяцев.

Лимита на сотрудников нет, мы всегда ждём в команду ребят с глубоким пониманием изученного.

Попав в компанию FSD

Будь готов обучаться и развиваться непрерывно! Первое наше правило: закреплять изученное. То есть все ребята, окончившие программу обучения, ревьюят ребят, которые на тот момент нашу программу обучения проходят. Недавно сдавшие собеседование на определённую тему принимают у тех, кто планирует его сдавать и т.д. Мы убедились на практике, что этот подход закрепления знаний через обучение других выигрышен в долгосрочной перспективе.

Наши разработчики развиваются не только через работу над задачами на сложных проектах, но и по специально разработанной нами карте развития. Посмотрите, о ней наш технический директор Сергей Черепанов рассказал на конференции TeamLead Conf 2019

Обучись и попади в команду!
Бесплатно. Без подвоха.

90000 Front End Development Course Classes 90001 90002 90003 Frontend Development Coaching 90004 90005 90002 Front end or the client side application as it is technically called, is the face of your business. Having a clean and attractive front end that appeals to customers is a crucial business strategy. As a front end web developer, you will create interactive and functional websites that gives users the ultimate user experience. Zeolearn’s Frontend Development course will teach you how to create front end web applications from scratch.You will learn the core functions and uses of HTML, CSS, JavaScript and jQuery to create web pages that are visually appealing and stimulating. Web development is a continually evolving space with rapidly changing technology. The only way to success is to be up-to-date with all the concepts, which our Frontend Developer training will help you do. 90005 90002 Our expert trainers gives you hands-on experience in developing visually rich SPAs through practical-sessions.Enrol now and get the course materials for free at our academy. 90005 90002 90003 Here’s what you will learn! 90004 90005 90014 90015 Learn the fundamentals of front end programming and gain the knowledge to build web applications. 90016 90015 Create advanced navigation and learn to incorporate metadata and multimedia with HTML5 and CSS3. 90016 90015 Develop your concepts in programming by learning to code in JavaScript and jQuery. 90016 90015 Learn to write jQuery codes for UI development.90016 90023 90002 90003 Is this course right for your career development? 90004 90005 90002 Web developers, designers, bloggers, students and even entrepreneurs who wish to promote their websites, will greatly benefit from this Frontend Developer certification course. 90005 90002 90003 What do you need to be familiar with? 90004 90005 90002 Basic computer knowledge is sufficient to pursue this course. 90005.90000 Frontend Web Development Training in Perth 90001 90002 90003 Frontend Development Coaching 90004 90005 90002 Front end or the client side application as it is technically called, is the face of your business. Having a clean and attractive front end that appeals to customers is a crucial business strategy. As a front end web developer, you will create interactive and functional websites that gives users the ultimate user experience.Zeolearn’s Frontend Development course will teach you how to create front end web applications from scratch. You will learn the core functions and uses of HTML, CSS, JavaScript and jQuery to create web pages that are visually appealing and stimulating. Web development is a continually evolving space with rapidly changing technology. The only way to success is to be up-to-date with all the concepts, which our Frontend Developer training will help you do. 90005 90002 Our expert trainers gives you hands-on experience in developing visually rich SPAs through practical-sessions.Enrol now and get the course materials for free at our academy. 90005 90002 90003 Here’s what you will learn! 90004 90005 90014 90015 Learn the fundamentals of front end programming and gain the knowledge to build web applications. 90016 90015 Create advanced navigation and learn to incorporate metadata and multimedia with HTML5 and CSS3. 90016 90015 Develop your concepts in programming by learning to code in JavaScript and jQuery. 90016 90015 Learn to write jQuery codes for UI development.90016 90023 90002 90003 Is this course right for your career development? 90004 90005 90002 Web developers, designers, bloggers, students and even entrepreneurs who wish to promote their websites, will greatly benefit from this Frontend Developer certification course. 90005 90002 90003 What do you need to be familiar with? 90004 90005 90002 Basic computer knowledge is sufficient to pursue this course. 90005.90000 Front end Development Training | Front end Developer Course 90001 90002 About Front end Development course 90003 90004 90005 Front End Development is the area of ​​Web Development that includes various technologies, and the landscape is continuously growing. Our front end development course modules are created by proficient web developers having years of industry expertise. 90006 90005 We have expert trainers to teach you the unique skills required to create the visible and interactive parts of a website.You will learn to build front end web applications from scratch including the core functions and techniques of HTML, CSS, JavaScript, and jQuery to make web pages that are visually appealing and stimulating. From this front end Developer course, you will learn different features of web development, and how to sharpen and keep your skills up to date. It will also allow you to prove your capabilities by completing a set of projects. 90006 90005 With this front end developer course, we will train you on how to leverage unique power of 90006 90011 90012 HTML5 to create your content more meaningfully and user-friendly.90013 90012 CSS to make your web pages adaptable to various screen sizes and devices. 90013 90012 JavaScript to make your static web page interactive and fun. 90013 90012 And jQuery to improve HTML elements. 90013 90020 90005 On completion of this front end web developer training, you will have all the skills required to develop your websites or even begin a career with one of the thousands of firms.90006 90023 Why learn front end developer course? 90024 90025 1. Huge Demand 90026 90011 90012 With the increase of mobile systems, devices & smartphone apps, there is a huge requirement for front-end designer & developer jobs. 90013 90012 Job safety and the demand is so vast that recruiters are willing to pay more for the right skills, and infinite opportunities to work for leading companies that keep turning up for the right candidates.90013 90020 90025 2. Huge Earnings 90026 90011 90012 Front end developers are paid highly in the enterprise, and the companies also prefer someone with knowledge of various HTML5 / CSS / JavaScript frameworks like Bootstrap. 90013 90012 The firm also lists that the average salary for jobs in front-end Web development is 62% greater than the average pays for all job posting nationwide. 90013 90020 90025 3.Excellent Job Growth 90026 90011 90012 The job growth for web developers is expected to be highly faster than the average for all jobs by 2018. 90013 90012 According to the Bureau of Labor Statistics, career openings for web developers are projected to rise by a whopping 20% ​​by 2022. 90013 90020 90025 4. Career progress 90026 90011 90012 There are also chances of freelancing, consulting or setting up a web-solutions agency.90013 90012 The choices are many, as the potential career paths are diverse. 90013 90020 90023 What you will learn from Front end development course 90024 90011 90012 Study the fundamentals of front end programming and get the knowledge to develop web applications. 90013 90012 Build high-level navigation and learn to incorporate metadata and multimedia besides CSS3 and HTML5. 90013 90012 Develop your ideas in programming via learning to code in jQuery and JavaScript.90013 90012 Learn to write jQuery languages ​​for UI development. 90013 90012 Design and build efficient end-user interfaces using HTML, CSS, and JavaScript. 90013 90020 .90000 Top Five Online Training Courses to Learn Frontend Web Development 90001 90002 Frontend development is one of the critical skills for web developers, as there is a high demand for programmers with excellent front-end development skills. If you’ve never experienced client-side web development, learning the plethora of front-end technologies can be difficult, but with proper guidance and the right courses, you can achieve your goal. 90003 90004 I know many web developers who start with frontend frameworks like Angular, Bootstrap, React, and Vue without spending much time learning the underlying pillars like HTML, CSS, and JavaScript.Ultimately, many of them struggle to debug their applications and are stuck whenever their applications run slowly, their UI freezes or elements not appear as they want. 90003 90006 While creating this list of frontend development online courses, I have to keep that in mind that the classes I include not only teach you the latest and most significant frontend frameworks; they also teach you fundamental technologies like HTML 5 and CSS 3. 90003 90008 Most of the courses in this list walk you through the basics of client-side web development by showing you the basics of how to build web pages with HTML, Cascading Style Sheets, JavaScript, and jQuery and then show you what you can do with React, Angular, or Vue.js. 90003 90010 I have not included any course on full-stack development or Node.js, but if you want to learn, you can always look back to my earlier list for best free Node.JS courses and best full-stack development courses for beginners. 90003 90012 Frontend Web Development Courses for Beginners 90013 90014 90015 The Complete Frontend Web Development Course 90016 90017 90018 This is one of the best courses to learn frontend web development, as it covers some of the most useful programming languages ​​and technologies you will need as a frontend web developer, such as HTML, CSS, JavaScript, jQuery, and Bootstrap.90003 90020 Created by Joseph Delgadillo and Nick Germaine, this course is also very hands-on, and you will start creating a simple web page using HTML and continue on to write a Chrome extension using JavaScript. 90003 90022 Talking about social proof, more than 119,530 students have already benefitted from this course. It also has, on average, 4.3 ratings from close to 3,468 participants. 90003 90024 Here is the link to join this course — 90015 The Complete Frontend Web Development course.90016 90027 90028 90015 Programming Foundations with JavaScript, HTML, and CSS 90016 90017 90032 This is an excellent free course from Coursera not just to learn frontend development but to learn programming fundamentals with JavaScript, HTML, and CSS. 90003 90034 By the end of the course, you will create a web page where others can upload their images and apply image filters that you create. Like many other Coursera courses, this one is also free-to-audit; however, you need to pay if you want to earn a certificate and get access to all quizzes and programming assignments.90003 90036 I highly recommend this frontend course to beginners and people with no programming experience. 90003 90038 Here is the link to join this course — 90015 Programming Foundations with JavaScript, HTML, and CSS 90016 90027 90042 90015 The Web Developer Bootcamp 90016 90017 90046 This is one of my favorite courses to learn web development, and I highly recommend it to frontend developers. It is the only course you need to learn web development — HTML, CSS, JS, Node, and much more.It does not just focus on frontend development but also on the backend and other aspects of web development. 90003 90048 Talking about social proof, 434,580 students have already benefitted from this course, and it has, on average, 4.6 ratings from 126,888 participants. 90003 90050 Here is the link to join this course — 90015 The Web Developer Bootcamp 90016 90027 90054 90015 Front End Web Development: Get Started 90016 90017 90058 One of the critical challenges of frontend development is that it involves many technologies, and they keep changing; that’s why a strong foundation of the underlying technology is a must.90003 90060 For the beginner, starting to learn frontend development can be daunting, and that’s where this course helps. It will teach you the basics of all of the different aspects of frontend web development and how to hone and keep your skills up to date. 90003 90062 Here is the link to join this course — 90015 Frontend Web Development: Get Started 90016 90027 90066 90015 Frontend Web Development With React 90016 90017 90070 Unlike previous courses which focus on HTML, CSS, and JavaScript, this course focuses on the React library, a popular Javascript library for front-end application development, which is vital for a modern web developer 90003 90072 This course also uses JavaScript ES6 for developing React applications, which will help you to understand new features of JavaScript from ES6.90003 90074 The course also touches various aspects of Redux and uses it to develop React-Redux powered applications. You will then also learn how to use Fetch for client-server communication and REST APIs on the server-side. 90003 90076 Here is the link to join this course — 90015 Frontend Web Development With React 90016 90027 90080 The course also provides a quick tour through React animation support and testing rounds off the course. This course is offered by the Hong Kong University of Science and Technology and delivered by Jogesh K.Muppala, Associate Professor from the Department of Computer Science and Engineering. 90003 90082 Like other Coursera courses, this is also free to learn, but you need to pay if you need certificate and access to various assignments and quizzes. 90003 90084 Conclusion 90013 90086 That’s all about some of the best online training courses and certification to become a frontend developer. If you have any other recommendations, then feel free to share. As I said, learning frameworks like Angular, React, Vue, and Bootstrap is important, but learning fundamentals like HTML, CSS, and JavaScript is even more important, and you should prioritize that before jumping into a framework.That will also help in the long run with debugging, troubleshooting, and dealing performance issues with a real-world web application. 90003 90088 Thanks for reading this article so far. If you like this article, then please share it with your friends and colleagues. If you have any questions or feedback, please drop a note. 90003 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *