кто такой фронт энд разработчик
Frontend-разработчик – кто это такой, что он делает и как им стать с нуля, если вообще не разбираешься в программировании
Тот кто делает сайт «с внешней стороны» – настраивает все то, что посетитель сайта видит перед глазами.
Frontend-разработчик – это программист, который создает «фронт» сайта, то есть его «лицо» – все то, что посетитель этого сайта будет видеть перед глазами. Например, фронтендщики делают так, чтобы при нажатии на определенную кнопку показывалось то-то и то-то, при наведении курсора на определенную часть экрана появлялись бы такие-то списки, при ошибках выплывали определенные окна. И чтобы все это происходило красиво, плавно, анимированно. Короче, чтобы глаз радовался.
В чем разница между фронтендом и бэкендом
Результаты фронтенд-разработки пользователь видит перед собой. А все то, что делают бэкенд-разработчики, тщательно скрыто от глаз.
Бэкенд-разработчики работают с серверами, хранением данных и всеми теми механизмами, которые спрятаны «внутри» веб-сайта, но обеспечивают качественную работу его «внешней» стороны.
Приведу аналогию с часами. Вот вы смотрите на них – что вы видите? Цифры и стрелки. Вам все нравится, все понятно, красиво, полезно. Можно взглянуть и сразу понять, сколько времени. Циферблат со стрелками – это фронтенд.
Но работают эти часы благодаря чему? Благодаря сложному механизму, который спрятан под циферблатом – всяким шестеренкам, винтикам и болтикам. Это как раз бэкенд.
Что должен знать Frontend-разработчик
Язык HTML. Это «основа основ» без которой вообще сложно работать с сайтами. Если вы хотите стать фронтенд-разработчиком, вам надо хорошо понимать, какой HTML-тег и за что отвечает, как связывать HTML с другими языками программирования, например, с джава скриптами.
Язык CSS. Практически на всех курсах CSS преподается вместе с HTML. CSS – это система стилей, за счет которых сайты смотрятся красиво.
К этим двум языкам добавляется еще опыт работы в редакторах, которые позволяют программировать быстрее и автоматизировать часть операций.
Третий фундаментальный элемент – Джава Скрипт. Это, наверное, самое сложное и самое ценное во фронтенде. Джава скрипты помогают изменять HTML коды так, чтобы решать проблемы пользователя.
Например, есть какая-то база с данными о людях: их пол, возраст, фамилия и имя. Вам надо посмотреть всех людей, которым больше 18 лет – вы указываете этот возраст, нажимаете на кнопочку и на сайте запускается джава скрипт, который «вынимает» нужных людей из базы и показывает вам.
Если вам надо отдельно выгрузить мужчин и женщин – вы нажимаете еще на одну кнопочку – запускаете еще один джава скрипт, который выгружает сначала всех мужчин, а потом всех женщин.
Как осваивать фронтенд-разработку
Надо начать с основ языка HTML и CSS. Вы должны изучить именно основы этих языков, понимать главные принципы их синтаксиса, знать самые популярные теги. Детально знакомиться с CSS и HTML вы будете в процессе работы над реальными проектами. Так получится намного эффективнее.
Дальше – основы JavaScript. Начните с решения простых задач – например, как менять цвет текста или его фона при наведении курсора на текст, как выдавать пользователю всплывающие окна, если он неправильно заполнил какую-то форму. Потренируйтесь делать с помощью JavaScript какие-нибудь простенькие приложения, чтобы поприменять знания на практике и лучше все запомнить.
Итак, основы есть. Следующий шаг – знакомство с сервисами, которые автоматизируют работу, помогают уменьшать объем кода, визуализировать результаты:
Этих инструментов и умения обращаться с ними вам будет достаточно, чтобы сделать первые уверенные шаги во фронтенде. А дальше останется только расти и развиваться.
Где учиться на фронтенд-разработчика
Самый лучший вариант – проходить платные курсы в интернете от хороших преподавателей. Плюсы такого формата в том, что вы изучаете материал, который реально можно применять на практике, делаете это в сжатые сроки, можете задавать вопросы своему тьютору.
Я собрал для вас несколько качественных курсов, пробегитесь по ним глазами.
Курсы от Михаила Русакова
У него легкая подача материала, все преподается в формате видеороликов – вы «видите» то, о чем говорит автор. Что у него в коде – то и у вас. Курсы недорогие, в каждом из них есть практика и ее много. Я посмотрел отзывы по этим курсам в сети – если вы недовольны материалом, автор делает возврат денег. Так что не бойтесь, вы покупаете не кота в мешке.
У Михаила несколько курсов, посмотрите вот эти.
Верстка сайта с нуля 2.0. Курс подходит для людей, которые раньше не программировали вообще ничего. Вы познакомитесь с языками HTML и CSS, изучите полезные инструменты, которые помогают быстрее верстать красивые сайты.
Некоторые заказчики вообще путают фронтенд-разработчиков с верстальщиками – это уже доказывает, что верстку осваивать обязательно надо, без нее во фронтенде никуда. Стоимость – 3 970 рублей.
Программирование на JavaScript с нуля до гуру 2.0. Материал тоже адаптирован для новичков. Эта учебная программа поможет вам изучить язык JavaScript на самом современном уровне, отработать его применение на практике. Здесь 123 урока, общая продолжительность всех видео – 27 часов. Стоимость – 7 470 рублей.
WordPress 5 с нуля до гуру. Это не столько программирование, сколько экскурс по одному из самых популярных веб-движков – вордпрессу. На нем созданы тысячи сайтов. Наш сайт – это тоже вордпресс. Как видите, он весьма неплохо работает.
Все видеоролики курса по продолжительности занимают 5 часов. Вы сможете освоить программу за два выходных дня. Стоимость – 4 970 рублей.
Фреймворк Bootstrap – как раз тот «полезный сервис», который позволяет создавать классные сайты и не тратить много времени на написание кода. Михаил рассказывает о его функциях понятным языком, приводит примеры их использования. Здесь 91 урок, общая продолжительность всех видеороликов – 23 часа.
Заработок на создании сайтов под заказ – общий курс о том, как зарабатывать деньги на создании сайтов, используя для этого разные языки программирования и технологии. Я рекомендую его покупать после того, как вы освоитесь хотя бы с языками HTML, CSS и JavaScript. Пусть данный материал станет вашей финишной прямой в заработке на фронтенд-разработке.
Курс от Нетологии
Здесь обучение более дорогостоящее, но зато официальное – вы защищаете диплом, получаете удостоверение о повышении квалификации. Это в разы повышает ваши шансы быстро найти работу и начать применять свои знания за деньги.
Обратите внимание на программу под названием Фронтенд-разработчик. Обучение здесь очень углубленное, рассчитано на 1 год. В неделю будет 2-3 занятия, поэтому вы легко сможете совмещать освоение курса с основной работой.
Теория подается через видеолекции, потом на итоговом вебинаре преподаватели «расставляют» акценты, а в домашнем задании вы отрабатываете все полученные навыки. Практика учеников всегда проверяется, вы сможете задать по ней любые интересующие вас вопросы.
В портфолио после освоения курса у вас будет 5 проектов. Кроме программирования вы будете изучать английский язык для фронтенд-разработчиков – чтобы самостоятельно понимать документацию и быстрее осваивать программные коды. Стоимость обучения – 77 940 рублей. Платить можно в рассрочку без переплаты.
Курс от Скиллбокса
Скиллбокс работает практически так же, как Нетология. Здесь я вам порекомендую уже три курса, они немного разные:
Заключение
Уважаемые читатели, была ли эта статья для вас полезной? Я постарался объяснить вам суть фронтенд-разработки, описать основные языки программирования, которые вам надо будет освоить, чтобы получить эту профессию. И подобрал курсы – дорогие и дешевые – на которых вы сможете выучиться быстро и эффективно.
Если этот текст вам не нравится, покритикуйте его в комментариях. Я обязательно прочитаю ваши комментарии, постараюсь внести правки и учту все сказанное на будущее.
Выбираем профессию frontend- и backend-разработчика: принципы и отличия
Статья о том, что такое frontend- и backend-разработка, чем отличаются и как взаимодействуют между собой. Разбираемся и выбираем себе направление.
Традиционно эти две сферы разработки разделяют на сцену и закулисье. Во frontend вы работаете на глаза пользователя, в backend же — на его опыт и ощущения. В Skillbox мы учим и frontend, и backend. Остается только выбрать направление своей будущей профессии. А теперь подробнее.
Что такое
frontend-разработка?
Frontend — это разработка пользовательского интерфейса и функций, которые работают на клиентской стороне веб-сайта или приложения. Это всё, что видит пользователь, открывая веб-страницу, и с чем он взаимодействует.
Пишет про дизайн и маркетинг в Skillbox. С 2011 по 2017 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга «Абзац».
Frontend-разработчик сотрудничает с дизайнерами, программистами
и UX-аналитиками, чтобы создавать удобный и востребованный продукт.
Чтобы наглядно понять frontend-разработку, откройте страницу любого сайта — перед собой вы увидите интерфейс. Щёлкнув правой кнопкой мыши, откроете код страницы в браузере.
Это и есть пример работы frontend-разработчика, он скачивается в браузер пользователя, и его можно увидеть своими глазами. Код страницы описывает цвета, вёрстку, шрифты, расположение графических элементов и так далее.
Компоненты frontend-разработки
Что такое
backend-разработка?
Backend-разработка — это набор аппаратно-программных средств, при помощи которых реализована логика работы сайта. Попросту говоря, это то, что скрыто от глаз пользователя и происходит вне его браузера и компьютера.
Например, когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или «Яндекса», где расположены алгоритмы поиска. Именно там случается всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вновь происходит возвращение в зону frontend.
По большому счёту, сервер — это тот же компьютер, только более мощный. Он хранит данные и отвечает на запросы пользователей.
Backend — это процесс объединения сервера с пользователем.
Компоненты backend-разработки
Backend-разработчик применяет те инструменты, что доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java. Всё зависит от конкретного проекта и задачи заказчика.
Также для backend-разработки используются системы управления базами данных:
В зависимости от продукта обязанности backend-разработчика сильно меняются. Такой специалист может создавать и интегрировать базы данных, обеспечивать безопасность или настраивать технологии резервного копирования и восстановления.
Как взаимодействуют frontend и backend?
Взаимодействие frontend и backend происходит по кругу:
Этими работами занимаются разные специалисты, но каждому из них желательно понимать принципы, по которым работают коллеги. Даже дизайнеру интерфейсов важно хотя бы в общих чертах знать, что представляет собой backend проекта, которым он занимается. Это поможет адекватно оценить, какие технические возможности есть у сайта или приложения.
Существует несколько вариантов взаимодействия frontend и backend:
Обязанности frontend- и backend-разработчиков, как правило, разделены, но бывают моменты, когда программист решает проблемы как на стороне сервера, так и в клиентской части. Оба вида разработки подразумевают и технические, и творческие компоненты. Нередко на рынке встречаются специалисты, которые уверенно чувствуют себя как во frontend, так и в backend и могут совмещать их.
Заключение
Начать свой путь в обеих отраслях можно с 12-месячного курса Skillbox «Профессия веб-разработчик». Он подходит для новичков и программистов с небольшим опытом. За год вы на практике изучите основные языки программирования и создадите портфолио, которое поможет найти перспективную и хорошо оплачиваемую работу.
Что должен уметь фронтенд-разработчик
Редактор Нетологии Светлана Шаповалова разбирается в том, кто такой фронтенд-разработчик, что он должен уметь (или не должен) и за что ему платят прекрасную зарплату (или не очень).
Кто такой фронтенд-разработчик
Согласно ежегодному исследованию StackOverflow, самая популярная профессия среди пользователей сервиса в 2017 году — это Web developer. Именно в эту категорию входят все фронтенд-разработчики.
Данные StackOverflow
Если зайти на первый попавшийся сайт по поиску работы, например, на hh.ru, создастся впечатление, что фронтенд-разработчик — это специалист-хамелеон.
Начинается все с путаницы в названиях вакансий: можно встретить и «front-end developer», и «front end разработчик», и «фронтендщик», и «фронтенд девелопер», и «web developer», и «фронтенд-разработчик». Иногда даже можно увидеть какого-нибудь «веб-верстальщика» с требованиями под фулстак-разработчика. Реакция на это одна: WTF?!
Беда в том, что часть работодателей не отличают (или не хотят отличать) верстальщика от фронтенд-разработчика, — это понятно по описанию вакансий. Разберемся, какие умения отделяют фронтенд-разработчика от «верстака» (верстальщики, не обижайтесь, вы тоже хорошие).
Верстальщик — боец узкого фронта. Его задача — сверстать полученный от дизайнера макет, используя HTML+CSS. Он, возможно, немного умеет в JavaScript, но чаще ограничивается умением прикрутить какой-нибудь плагин jQuery.
Фронтенд-разработчик не просто верстает макеты. Он хорошо знает JavaScript, разбирается во фреймворках и библиотеках (и активно юзает часть из них), понимает, что находится «под капотом» на серверной стороне. Его не пугают препроцессоры и сборщики LESS, SASS, GRUNT, GULP, он умеет работать с DOM, API, SVG-объектами, AJAX и CORS, может составлять SQL-запросы и копаться в данных. Получается сборная солянка навыков, к которым добавляется понимание принципов UI/UX-проектирования, адаптивной и отзывчивой верстки, кросс-браузерности и кросс-платформенности, а иногда и навыков мобильной разработки.
Фронтендщик в обязательном порядке умеет работать с контролем версий (Git, GitHub, CVS и т. д.), использовать графические редакторы, «играть» с шаблонами различных CMS.
Еще крайне желательно знать английский язык, чтобы не переводить спецификацию в Гугл-переводчике, уметь работать в команде, иногда мультиязычной, разбираться в веб-шрифтах, ну и понимать тестировщиков и сам процесс тестирования.
Итак, какие технологии должен освоить фронтенд-разработчик:
Что говорит статистика
Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:
Данные StackOverflow
Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:
Данные StackOverflow
А набор самых популярных фреймворков и библиотек всех разработчиков выглядит следующим образом (см. иллюстрацию). Приятно видеть среди этого списка инструменты фронтенда:
Данные StackOverflow
Карьерный путь и зарплата фронтенд-разработчика
Карьерный путь фронтендера обычно начинается с верстальщика — это самый логичный и общепринятый вариант. Сначала изучается связка HTML+CSS, затем на нее «наслаиваются» знания JavaScript, библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов UI/UX-дизайна.
Бывают и иные варианты. Если начинающий программист изначально знает, в какой сфере планирует развиваться, ничто не мешает ему изучать ключевой стек технологий сразу, а не по частям. Все зависит от целей и времени, которыми располагает будущий фронтендщик. Любой вариант приемлем, лишь бы на выходе получился толковый специалист.
У готового фронтенд-разработчика в целом есть три основных варианта развития:
Какой из них выбрать — зависит лишь от самого специалиста и его пожеланий/навыков.
Касаемо зарплат фронтенд-разработчиков: здесь, как и во всей IT-индустрии, нет единого стандарта оплаты. Все зависит от навыков и умения подать себя. Ну, и от везения иногда 🙂
Средняя зарплата фронтенд-специалиста по России, рублей/месяц
Средняя зарплата фронтенд-специалиста по Москве, рублей/месяц
По данным «Моего круга»
Традиционно годовая зарплата фронтенд-разработчиков в США чуть выше, чем по России. Однако, если вы работаете в филиале иностранной компании — вам такой разрыв, скорее всего, не страшен.
По данным PayScale
Как стать фронтенд-разработчиком
Для начала снять розовые очки. Обучение — это труд и самодисциплина. Большинство начинающих айтишников отсеиваются на этапе «хочу стать программистом и получать зарплату в долларах, но не думал, что придется так много учиться». Уникальность программирования и вообще любой айтишной специальности в постоянном самообучении. В этом и сложность, и прелесть IT-сферы. Если вас это не пугает — круто! У вас есть все шансы стать отличным специалистом.
Главное правило будущего специалиста — ставить реальные цели в процессе обучения. В этом поможет планирование. Составьте список инструментов, которые планируете изучить, и держите его перед глазами.
Тем, кто стартует с нуля, надо начинать с HTML и CSS и освоить их на уровне идеальной верстки PSD-макетов. На этом этапе также надо научиться работать с текстовыми и графическими редакторами и знать основные принципы дизайна (как плюс). Затем взяться за JavaScript: синтаксис, архитектура и возможности языка. Освоить популярные фреймворки и библиотеки, параллельно полюбить системы контроля версий и какой-нибудь из популярных таскраннеров. Добавить препроцессоры и фреймворки CSS, разобраться в серверных технологиях. А дальше можно пить смузи на Бали шлифовать полученные знания до бесконечности.
Примерный путь начинающего фронтенд-разработчика.
У вас он будет свой.
Пройти этот путь можно как в одиночку, так и с наставниками (вузы, курсы). Вот какие самые популярные форматы обучения разработчиков по версии StackOverflow:
Данные StackOverflow
На первом месте находятся онлайн-курсы, за них проголосовали 64,7% опрошенных разработчиков, затем идут: самообучение по книгам, офлайн-курсы, опенсорс-разработка и лагери программирования. Интересно, что высшее образование (Master’s degree) стоит практически на последнем месте.
Вывод
Фронтенд-разработчик — это универсальный солдат. Он и макет заверстает, и веб-приложение построит, и серверную часть, если надо, освоит. Знать надо немало: HTML, CSS, JavaScript, библиотеки и фреймворки JS, препроцессоры и фреймворки CSS, системы контроля версий и таскраннеры, технологии бэкенда, юнит-тестирование и многое другое.
Кроме того, нелишними будут soft skills: взаимодействие с людьми и работа в команде, умение наладить эффективный workflow и решать поставленные задачи наиболее оптимальным способом. Не обойтись без уверенных знаний английского языка.
Оплата труда фронтенд-специалиста вполне себе достойная, и чем больше навыков — тем выше шансы получить «жирный» оклад.
Стать фронтенд-разработчиком может каждый, кто не пасует перед самообучением: как мы выяснили, полагаться на вузовское образование сложно. Идеальный вариант — различные онлайн и офлайн-курсы + литература по теме, практика и великий Гугл.
Нетология запускает полноценную программу подготовки фронтенд-специалистов — «Профессию front-end разработчик». Это 6-месячный курс, посвященный базовым технологиям фронтенд-разработки: HTML и CSS, JavaScript, Web API, AJAX, веб-сокеты, библиотека React.
По итогу курса студенты создадут собственное одностраничное веб-приложение. Обучение ведут 10 практикующих фронтенд-специалистов — это позволяет получить всестороннее понимание инструментов и задач фронтенд-разработки. В течение всего обучения студенты получат не менее 100 практических заданий, максимально близких к «боевым», и реализуют 3 проекта среднего объема и 1 полноценный проект в качестве дипломной работы.
Все студенты, успешно окончившие курс, получают удостоверение о повышении квалификации установленного образца и фирменный диплом Нетологии.
Начало пути Frontend-разработчика
Дисклеймер: данный пост сделан мной, чтобы рассылать его друзьям, которым нужна помощь с началом изучения Frontend- разработки. Если он поможет и тебе, заглянувшему сюда от нечего делать — буду очень рад. Ну а если не поможет — чего ты ожидал от поста с таким дисклеймером? В любом случае, любые вопросы, фидбек, и критика приветствуются.
После того, как все предупреждены, приступим к делу
Что такое Frontend?
Frontend/фронтенд/разработка клиентской части приложений/разработка интерфейсов/верстка with benefits — одно из самых презираемых «труъ программистами» направлений разработки. Причина тому — достаточно низкий порог входа (можно не обладая мощной базой довольно быстро начать делать коммерческие проекты) (быстро — это месяца три изучения, а не неделя, закатай губу обратно) и полное незнания большинства фронтендерами таких понятий как «управления памятью» и «строгая типизация».
Суть занятия фронтендера заключается в том, что ты с помощью кода на html/css/js (с вариациями, о которых я расскажу чуть позднее) рисуешь те страницы сайтов, которые видит пользователь, и прописываешь логику взаимодействия с этим контентом: при нажатии на кнопку делаем вот это, после заполнения формы отправляем её на сервер и т. д. Как правило для этой деятельности НЕ НУЖНО обладать выдающимися дизайнерскими навыками, потому что чаще всего, когда нужно сверстать сайт, тебе дают нарисованный в figma (графический редактор, заточенный под веб-дизайн) макет сайта и говорят «сделай вот так же, но чтоб это было сайтом и работало». Иногда придётся самому додумывать, как это должно выглядеть на устройствах той или иной ширины, потому что твой любимый коллега дизайнер сделал макет только под десктоп. Ещё реже у тебя просто есть ТЗ в духе «здесь нужно фильтр для таблички сделать чтоб вот по этим параметрам можно было выбирать, дизайна не будет дедлайн вчера». Тут уж либо тебе это нравится, либо выбора не было, либо сам дурак, что согласился. В целом нечастая ситуация.
Что необходимо знать для старта?
Все, что тебе понадобится — это школьная математика хотя бы с калькулятором и английский язык хотя бы с переводчиком. Без умения делить, умножать и складывать сложно будет высчитывать, какой отступ или размер должен быть у того или иного элемента, а без знания английского со временем ты просто не сможешь найти в интернетах этих ваших решение какой-то проблемы в процессе работы, не дернув старшего товарища.
Кроме этого, желательно иметь немного воображения, чтобы визуализировать в голове схемы расстановки компонентов, ну и некоторое количество алгоритмического мышления/знания программирования на недостижимом уровне «хоть сколько-то». Если этого нет — придет в процессе. Если не придëт — а нужно ли тебе это IT?
Немножко философии и экономики.
Возможно ты уже слышал что-то про Тильду и всякие движки для сайтов типа «Joomla», «WordPress», «Drupal», «1C Bitrix», которые также известны как CMS. Вкратце: это вещи, которые позволяют очень быстро и очень недорого, даже почти не зная программирование, создать на коленке свой интернет-магазин, форум или что-то подобное.
Так вот, с вероятностью близкой к 100% ты не сможешь писать подобные вещи дешевле, чем это делают разработчики, использующие данные системы, не умирая с голоду. Значит ли это, что тебе стоит перейти на подобные технологии?
Тебе решать. Для меня лично ответ «Нет».
Скорее всего, я не смогу отхватить хорошую часть рынка и составить конкуренцию людям, которые могут интернет-магазин сделать за 10к. Я за лендинг обычно больше беру. И путь, который я буду описывать ниже, он не совсем для тех, кто хочет быстро научиться и сидеть клепать лендосы/простые штуки за недорого. Есть много гораздо более интересных вещей (маркетплейсы, CRM, LMS и т. д.), которые очень и очень сложно сделать быстрыми и качественно работающими, используя готовые решения. И лично я топлю за то, чтобы вы — те, кто читает этот текст — тоже учились с заделом на то, чтобы создавать сложные и интересные вещи. За это неплохо платят (статистику найдете сами), и это весело.
Стек технологий, с которыми вы столкнетесь: языки разметки, оформления, программирования, фреймворки и другое.
ВНИМАНИЕ! Бóльшую часть технологий, описанных ниже, НЕ НУЖНО учить и использовать сразу. Понимание, что они нужны и необходимость их использовать придëт с крупными проектами. Если придет раньше — супер, дерзайте. Просто не пугайтесь такого обширного списка.
1) HTML (HyperText Markup Language) (не язык программирования). Это база. Язык разметки содержимого любой веб-страницы
2) CSS (Cascade Style Sheets). Данная технология позволяет задавать стили для того, что ты написал на HTML. Существуют препроцессоры, которые позволяют писать его проще и приятнее (например, с простым использованием переменных и примесей, какими-то математическими вычислениями и т.д.): Less, SASS, SCSS и другие. Сам CSS является must know технологией фронтендера, без него вообще никуда, а препроцессоры — это просто чертовски удобно. Попробуйте обязательно
3) JavaScript. Один из самых популярных и самых ненавидимых языков программирования. Медленный, неприятный, тупой, нелогичный и. все это по большей степени неправда. Во-первых, со времён создания первых мемов про JS прошло чертовски много времени, и этот язык реально изменился в лучшую сторону. Во-вторых, за счëт, емнип, гугловского движка V8, который научился его быстро компилировать, он просто летает. Самое «узкое место» в производительности клиентской части сайтов сейчас — это изменение содержимого страницы (операции с DOM, об этом чуть позже).
Также многие не любят этот язык из-за хреново сделанного ООП, но есть проблема. Это не объектно-ориентированный язык. Это прототипо-ориентированный язык. Неважно. В начале вам это не нужно, когда будет нужно — разберетесь.
5) React, Vue, Svelte, Angular — фреймворки и библиотеки для того, чтобы создавать такую штуку как SPA (одностраничные приложения). Если по-русски: сайт не перезагружается целиком чтобы перейти в другой раздел иди отобразить обновившийся контент — обновляется и изменяется только та часть, которую нужно перерисовать (отрендерить).
Эти вещи позволяют значительно ускорить быстродействие приложения за счёт того, что под капотом они сами вычисляют, как и что эффективнее перерисовать + нет бесячей перезагрузки страницы, пользователям это понравится, гарантирую.
Из того, что перечислено выше, можете выбрать любую понравившуюся технологию (посмотрите видосы, как выглядит код, как на них пишут, чтобы понять, что приятнее). Мой любимец — Vue, React тоже хорош, про Svelte ничего не знаю, а ангуляр мертв. (На самом деле нет, но брать его для обучения — очень и очень сомнительная идея).
6) JSX и TSX. Улучшения синтаксиса JS и TS, позволяющие удобно писать простую логику и разметку вместе. Полезные вещи, рекомендую. Отдельно их учить не придется, сами все поймете в процессе освоения одного из фреймворков, перечисленных выше.
7) Nuxt.js/Next.js. Библиотеки для простого создания сайтов с использованием Vue/React. Нужны, чтобы поисковики их лучше понимали, и чтобы у пользователей первая загрузка происходила быстрее. Полезные вещи.
8) Vuex/Redux. Библиотеки, которые позволяют не перекидываться данными между компонентами вашего SPA, а централизованно и хранить и изменять. Сейчас вы скорее всего не понимаете, зачем это нужно, но в процессе изучения Vue и React обязательно поймёте.
9) Jest/Mocha (моча, ахахах). Фреймворки для тестирования. Очень важная штука на больших проектах.
10) UI-фреймворки (Bootstrap, Vuetify, Material Design и т. д.). Позволяют очень быстро создавать симпатичные кнопочки, формы и прочие элементы интерфейсов, не тратя время на написание хреновой горы CSS-кода. Также ПРЯМ РЕАЛЬНО ЗНАЧИТЕЛЬНО упрощают создание адаптивных (подстраивающихся под размер экрана) кроссбраузерных (даже в IE будет норм отображаться) сайтов.
Маслята. Теперь это вы
С чего начать?
0) Установи VSCode или WebStorm, не мучайся с плохими IDE.
1) Изучи HTML и CSS на достаточном уровне для вëрстки какого-нибудь простого одностраничника без взаимодействия с пользователем. Могу порекомендовать вот этот курс на степике. Есть ещё курс Веб-разработчик 10.0 от Glo Academy, рекомендую там посмотреть как минимум видео 1, 4-13.
Обязательно пойми, что такое флексбоксы, основы блочной модели и позиционирования. Это крайне важно.
2) Сверстай одностраничник. Это может быть твоя визитка, сайт для продажи ссаных тряпок, и прочие интересные вещи — макеты подобных сайтов легко найти в сети Internet. Добавь какую-нибудь простейшую форму обратной связи (не обязательно рабочую), анимируй наведение на кнопки и сделай так, чтобы при нажатии на одну из них, например, на секунду на сайте появлялась какая-то надпись.
3) Изучи основы адаптивной вëрстки. Почитай про @media запросы. Переверстай свой сайт с новыми знаниями (Видео с курса)
4) Попробуй сделать то же самое с использованием Bootstrap.
5) Научись пользоваться гитом. В дальнейшем создавай репозиторий под каждый твой учебный проект, ибо без опыта это будет единственным весомым аргументом для работодателя «почему на стажировку нужно взять именно тебя». Небольшой видеокурс (1 час)
6) Пришло время вплотную заняться JavaScript. В этом тебе очень поможет сайт https://learn.javascript.ru/ Это в принципе один из самых лучших учебников по программированию на русском языке, который я знаю, и, если ты потратишь время на то, чтобы прочитать и отработать там весь материал по JS — это будет очень здорово. В качестве практики можно участвовать в интенсивах от тех же Glo Academy, где они верстают «Соцсети», «Онлайн плееры» и прочие нереализуемые за несколько часов вещи, которые звучат круто. Забей на кликбейтные заголовки — это даст тебе неплохое понимание применения JS.
7) Подучи сложные CSS- селекторы. >, псевдоклассы и :not(nth-last-child(3)) должны стать для тебя кристально понятны. (ссылка) Проверь, знаешь ли ты, что значит fit-content, calc(), min(), max(), clamp() и другие подобные вещи. Также будет очень неплохо, если ты решишь изучить БЭМ (Блок-Элемент-Модификатор, технология Яндекса, позволяющаяся не запутываться в именовании классов для больших проектов)Попробуй понять gridы.
8) Научись отправлять запросы на сервер с помощью fetch/axios, если ещё не научился этому в 6 пункте. База. Важно.
9) Примерно тут ты уже можешь верстать годные лендинги и даже чет посложнее. Если повезет — кто-нибудь из знакомых может подкинуть заказ. Но не останавливайся — время расти дальше.
10) Пройди курс по React + Redux от Юрия Бура (Вот ссылка). Даже если потом ты перейдешь на другую технологию. Даже если ты на 100% в этом уверен. Пройди. Он реально хорош, преподаватель все очень приятно и подробно объясняет. По итогу курса ты должен будешь уже уметь создавать пригодные для коммерческого использования SPA и поймешь, как и зачем использовать менеджеры состояний типа Redux/Vuex. Перейти на другой фреймворк после данного курса — как нефиг делать. Если финансы позволяют — рекомендую взять его на Udemy и поддержать автора, благо, он довольно дешевый.
11) После прохождения курса и практики в виде нескольких проектов с применением этих штук (которые ты конечно же не забыл залить на гитхаб, да?) можешь попробовать найти работу джуном. Шанс на успех не самый низкий.