Уверен, что многие слышали слова о том, что программисты очень востребованы. И это неспроста, потому что прямо сейчас в России большой дефицит квалифицированных сотрудников. По данным Минцифры, только за 2022 год из страны уехало более 100 тысяч сотрудников. IT компании готовы не только предлагать хорошие условия для новых сотрудников, но и предлагают программы обучения. Если у вас когда-нибудь была мысль о том, чтобы начать свой путь в программировании, то я рекомендую вам прочитать эту дорожную карту. Следуя ей, вы сможете достичь уровня junior-разработчика и получить свою первую работу. В этой статье мы разберем конкретно front-end разработку. У меня есть личный опыт изучения этой специальности и поэтому я готов им с вами поделиться.
С чего начать?
Начать стоит с того, чтобы должным образом подготовиться к обучению и установить программный софт на компьютер. Обучаться и работать получится только с помощью компьютера (без телефонов и планшетов). Вам будут нужны:
- Любой браузер;
- Visual Studio Code;
- OneNote от Microsoft или другое приложение для записей (обязательно делайте записи для того, чтобы помечать важные моменты).
Далее выбирайте предпочтительный вариант обучения: читать или смотреть видеокурсы. Я бы рекомендовал сразу два способа. Для того, чтобы найти видеокурсы, достаточно открыть браузер и ввести этот запрос. В качестве чтения могу посоветовать - developer.mozilla.org/ru/. Здесь собрано много теории.
Также советую найти сайты с практическими задачами для того, чтобы после принятия каждой новой дозы теории закреплять ее на практике.
Теперь вы готовы к тому, чтобы начать изучение своего первого языка - HTML.
Изучение HTML
Для начала вам нужно узнать, что такое HTML и зачем он вообще нужен. Следом узнайте о том, из чего состоит HTML-документ. Каждый такой документ должен состоять из обязательных тегов. К слову, вам также нужно будет узнать всё о HTML-тегах. Например, почему некоторые теги закрываются сами, а другие закрываются дополнительно вами. Сюда же я отнесу информацию о том, что бывают разные виды html-тегов.
После того, как вы поймете все эти моменты, сможете писать свои первые простые сайты - можно приступать к более интересному языку CSS.
Изучение CSS
Особенность этого языка программирования в том, что если HTML был скелетом сайта, то CSS - это кожа.
Вам нужно будет узнать, что такое CSS и зачем он вообще нужен. Это основополагающий вопрос, на который у вас должен быть ответ в голове. Далее можно приступить к строению CSS документа. Теперь можно изучить способы подключения CCS к HTML и какие вообще бывают CSS-селекторы.
Отдельно рекомендую посвятить время вопросу приоритетности селекторов, а также псевдо-классов и псевдо-элементов. Ознакомьтесь со встроенными стилями браузера.
Один из важнейших уроков - изучение технологии Flexbox. Теперь можно изучать медиа-запросы и подключение внешних библиотек.
Не забудьте потратить время на изучение препроцессоров SCSS/SASS.
Изучение JavaScript
Если раньше я говорил о том, что HTML - это скелет, а CSS - это кожа, то в случае JS - это мышцы будущего сайта. Рекомендую запомнить эти метафоры для того, чтобы лучше понимать роль каждого из языков программирования. Лично для меня такое объяснение было полезным при изучении.
Традиционно первое, что нужно понять - это что такое JavaScript и зачем он нужен.
После этого рекомендую приступить к изучению типов данных и переменных. В теме переменных важно понять разницу между var, let и const.
После этого приступайте к функциям и методам. Бывают методы массивов, строк и объектов.
Теперь нужно изучить область видимости и подключение JS-скрипта к HTML-документу.
Изучение React JS
Не так давно junior-разработчику помимо трёх предыдущих языков предъявляют в качестве требования для работы изучение технологии React JS. Разберем, что вам необходимо будет изучить.
Начать разбираться стоит с того, что такое React и зачем он нужен. Далее разобраться в том, как он работает и в чем его главное преимущество.
После этого приступайте к изучению Virtual DOM и create react app. Следующий шаг - react хуки: useState, useEffect, useRef, useCallback.
Потратьте свое время на изучение важных тем: React devtools, Context, Router.
Теперь вы готовы к тому, что найти свою первую работу. Но на самом деле не совсем, потому что вы будете работать в команде таких же программистов, как вы, поэтому умение работать с Git - это важно.
Что такое Git и зачем он нужен?
Для начала разбираемся, что такое Git и зачем он нужен. Самые популярные сервисы - GitHub, GitLub и BitBucket.
Научитесь создавать локальный и удаленный репозиторий. А также познакомьтесь с этим:
- Git commit/ git add;
- Git push/ git pull;
- Ветвление;
- Git merge.
Дополнительно: браузер и сеть
Отдельно советую познакомиться с тем, что представляет вообще из себя интернет и что происходит между вводом URl-адреса в адресной строке и отображением сайта в браузере. Это так называемые get-запросы и DNS. Отдельно потратьте время на DOM и инструменты разработчика (Chrome devtools).
Заключение
На этом мой Roadmap front-end разработчика 2023 года закончен. Надеюсь, вам была полезна эта статья и вы смогли найти что-нибудь полезное. Я хочу посоветовать вам составить четкую структуру вашего обучения. Благодаря этому вы не перегорите и не сможете расслабиться. Лучше заниматься обучением хотя бы 2 часа в день, а не тратить 10 часов раз в неделю. Систематизация - ключ к тому, что вы доведете обучение до конца. Конечный результат будет полностью зависеть от того, как вы постараетесь.
