Короткий ответ: читайте статьи и книги, смотрите обучающие видео на ютубе, проходите тренажёры и курсы, установите VS Code и попробуйте что-то написать — в общем, учитесь и практикуйтесь, без этого ничего не получится.
Есть и длинный ответ.
Уровень 1. Знакомство
Выучите основы HTML, CSS и JavaScript. HTML — каркас и основа всех сайтов, поэтому нужно знать, что такое теги, как их использовать, и потренироваться ставить <и>. Проще всего изучить на тренажёре.
Важные навыки:
- Верстать текст и оформлять его.
- Ставить ссылки и изображения.
- Основы CSS — правила, селекторы, свойства и каскадирование.
- Хотя бы немного понимать, зачем нужен JavaScript.
Научитесь отличать фронтенд и бэкенд. Для начала запомните, что фронтенд — видимая часть сайта, а бэкенд — невидимая. Он нужен, чтобы доставать что-то из базы данных и вставлять на страницу.
Фронтенд — HTML, CSS, JavaScript
Бэкенд — PHP, MySQL, Python
Узнайте, зачем нужны макеты. Это важно хотя бы в общих чертах — дизайнеры будут приносить вам свои картиночки, а вы их превращать в код. Еще полезно найти себе макет для практики — например, в каком-нибудь канале. На таких макетах удобно практиковаться или даже положить в портфолио, главное, попросите разрешения у автора.
Практикуйтесь на макете. Для начала настройте всё на домашнем компьютере и экспериментируйте там. Можно и код покрутить, и вёрстку поломать, и написать пару скриптов на PHP.
Уровень 2. Погружение
Углубитесь в HTML и CSS. Смотрите на формы, таблицы, флексы, гриды, медиаэлементы. То есть весь обвес, который можно добавить к текстам, картинкам и ссылкам.
Изучите JavaScript. Узнайте, что такое переменные, типы, условия, циклы, массивы и объекты. Хотя бы со словарём и StackOverflow.
Заведите Гитхаб. На этом этапе лучше научиться пользоваться Гитхабом и завести себе репозиторий. Вы сможете показывать хорошие проекты работодателям, чтобы не делать все подряд тестовые задания при приёме на работу.
Где применять знания. Сделайте себе сайт, используя все полученные знания. Соберите страничку, расскажите о себе и своих навыках и оставьте ссылку на Гитхаб. Потому пригодится. Чтобы вдохновиться, зайдите на Behance и наберите в поиске free site web design или free portfolio site web design.
А ещё не бойтесь, что всё сломалось или не получается. Это же код, просто нажмите Ctrl+Z.
Уровень 3. Курсы
Курсы — короткий путь, чтобы не собирать информацию по кусочкам по всему интернету.
На хорошем курсе по вёрстке научат семантической разметке, сеткам, адаптивной вёрстке, анимациям, работе с графикой, доступности и автоматизации. Проверьте, что всё это есть в программе, потому что потом могут спросить на собеседовании.
В курсах по JavaScript должны объяснять базу — типы, операторы, алгоритмы, функции, циклы, объекты и структуры данных. Разберитесь с этим и научитесь применять, а не просто отличать одно от другого.
Сложное. Разберитесь с DOM, API JavaScript и другими сложными вещами, вроде ООП, асинхронности, валидации форм или Event Loop. Но не думайте об этом в самом начале, всё придёт с опытом. Да и на курсах это точно дают. Ещё профессиональному разработчику пригодится навык «гонять джейсончики». Для этого стоит изучить форматы передачи данных, например, XML, JSON, JSONP и умело управляться с XMLHttpRequest.
Программы на каждый день. Разберитесь с препроцессорами (LESS или SASS), Webpack для сборки, Git для контроля версий, Figma для экспорта графики, DevTools для отладки. Ну и терминал, куда же без него.
После курсов попробуйте найти работу младшим JavaScript-разработчиком — или, по-другому, джуном.
Уровень 4. Фреймворки React, Vue или Angular
Самые популярные и прибыльные для фронтендеров — React, Angular и Vue.js. В разных компаниях нужны разные, но React встречается чаще всего. По нему тоже есть курсы, так что пробуйте — можно даже взять целую профессию, где всему научат с самого начала.
Важно — фреймворки быстро устаревают. Поэтому будьте готовы доучиваться, так как на очередном месте работы может понадобиться Vue.js вместо React, с которым вы уже знакомы.
На этом уровне можно зарабатывать больше 100 тысяч, если вы уже где-то поработали, хорошо знаете основы и не теряетесь в простых задачах. И чем дольше и лучше вы работаете, тем больше получаете.