Не застревайте и не путайтесь на пути к началу своей карьеры

Когда вы собираетесь начать свою карьеру в ИТ-индустрии, у вас есть множество вариантов для старта. Существует множество языков программирования, фреймворков и библиотек, таких как HTML, CSS, JavaScript, TypeScript, Java, Python, React, Angular, C#, C++, PHP и многие другие. Из-за такого количества вариантов вы можете запутаться в выборе пути, с которого вам следует начать.

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

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

1. Фундамент

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

Давайте поймем это с помощью аналогии. Представьте себе здание в виде веб-страницы. У него есть скелет или структура (HTML), у него красивые стены с краской и плиткой (CSS), и он может иметь определенные функциональные возможности, например, когда мы нажимаем на кнопку лифта, он приезжает за нами (JavaScript).

Теперь давайте рассмотрим другой пример. Взгляните на страницу своего профиля на Medium. Заголовок выглядит примерно так.

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

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

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

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

2. Фреймворки Front End

Теперь мы понимаем важность фундаментальных основ и то, чему мы учимся, чтобы овладеть ими. Что дальше?

Создание веб-сайтов часто включает в себя множество повторяющихся задач. И именно здесь на помощь приходят фреймворки и библиотеки. Фреймворк или библиотека поставляются с большим количеством кода, который мы можем повторно использовать на нашем сайте. Таким образом, они помогают нам выполнять работу очень быстро. Вот почему сегодня многие компании используют один из таких популярных фреймворков, как React, Angular и Vue.

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

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

Из всех этих технологий React является самой популярной. Он разработан Facebook и используется для разработки в Facebook и Instagram. Поэтому я бы посоветовал выбрать React в качестве отправной точки.

3. Системы контроля версий

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

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

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

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

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

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

Существует множество препроцессоров CSS, например, SASS, LESS, Stylus и другие. Но, опять же, вам не нужно изучать их все, чтобы получить работу front-end разработчика. Потому что все они являются похожими инструментами, которые служат одной цели. SASS - самый популярный из них. Поэтому я бы рекомендовал выбрать SASS.

5. Надмножество JavaScript

Как и CSS, JavaScript - довольно старый язык. Хотя он время от времени обновляется, он все же имеет некоторые ограничения. Итак, многие фронтенд-разработчики предпочитают для написания кода более современные языки, такие как TypeScript и CoffeeScript. Затем они передают свой код программе - Transpiler, которая переводит и компилирует современный код в старый код JavaScript, понятный всем браузерам.

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

Путь обучения

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

Во-первых, вы должны изучить HTML, CSS и JavaScript. Если вы потратите 3-5 часов на изучение и программирование, то через 3 месяца у вас будет разумное понимание основ. Вы не станете экспертом, но вы будете понимать их достаточно хорошо, чтобы создавать вещи.

Далее вам нужно изучить front-end фреймворк или библиотеку, например React. На изучение React вам понадобится 1-2 месяца.

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

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

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

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

Заключение

На этом мы заканчиваем эту статью. Надеюсь, теперь у вас есть больше ясности о том, что нужно, чтобы стать front-end веб-разработчиком. Чтобы прочитать больше подобных статей, следите за новостями!

Спасибо за чтение!

Источник: https://betterprogramming.pub/5-front-end-development-skills-to-land-your-first-job-6514c8643c94