Как стать Frontend-разработчиком, часть 1

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

1. Смотрим Roadmap, если ещё не видели.

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

2. Учим HTML и CSS.

В роадмапе из предыдущего пункта уже есть ссылки на ресурсы и про HTML, и про CSS, но я бы порекомендовал начать не с них, а с htmlacademy. Это, наверное, уже классика)) Материал подаётся легко, доступно и в игровой форме. Бесплатной части будет вполне достаточно для того, чтобы понять, нравится вам Frontend или нет:)

Бонус
Очень советую попробовать создать какой-нибудь простой сайт самостоятельно. Даже без JavaScript. Скачайте любой редактор кода (например, VSCode), создайте у себя index.html файл, наполните его всем, что успели выучить, и откройте его в браузере. Так вы и к подсветке синтаксиса привыкнете, и к браузеру, и к работе с файлами в вашем приложении тоже.

3. Учим JavaScript.

Лучшего ресурса, чем learn.javascript.ru, я порекомендовать не могу. Увы, той же игривости, что в htmlacademy, вы здесь не встретите)) Будет сложно, будет скучно, вы будете хотеть спать, но спать нельзя)) Это самый важный этап, поэтому пройти его, скорее всего, нужно будет несколько раз. И вообще хорошо бы перечитывать этот сайт хотя бы раз в год.

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

4. Терминал, командная строка

В роадмапе после JavaScript следующим шагом идут инструменты, для использования которых вам потребуется умение работать с терминалом. Но почему-то про сам терминал там ни слова)))

Где взять терминал?
Пользователям MacOS повезло чуть больше: терминал у них уже есть. А на Windows я привык пользоваться git-scm.

Для чего?
Если сильно упрощать, терминал — это как «Мой компьютер» на винде, только лучше. Он позволяет вам ходить по папкам на вашем устройстве, выполнять какие-либо действия с ними или с файлами в этих папках, устанавливать и запускать программы, и всё такое. Только текстом. О том, как им пользоваться, напишу отдельный пост.

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

Снова вернулись к роадмапу, получается. Системы контроля версий — это инструменты, которые позволяют нам управлять версиями исходного кода приложений. Написал код — сохранил. Поменял — снова сохранил. Захотел отменить изменения — вернулся назад, к предыдущему состоянию.
Одним из таких инструментов является git. Как с ним работать? У меня недавно был об этом пост))
А сразу после этого — почитайте ещё про semver. На первое время должно хватить.

6. «Реактик»

Снова слегка отойдём от роадмапа. Там нам предлагают сначала ознакомиться с «пакетными менеджерами», но я бы ограничился этой весёлой статьёй, а дальше можно постигать тонкости npm одновременно с изучением React.

Помимо React есть и другие популярные инструменты для отрисовки ui, такие как Vue, Svelte и т.д., но я всё-таки пока буду рассматривать именно React.

Как начать?
Открываем этот пост, читаем про то, как развернуть у себя шаблон проекта на React, и смотрим любые видео на youtube по Реакту,
параллельно читая официальную документацию (она легко гуглится).
Следуем советам из видосов, пытаемся их повторить у себя в своём шаблонном проекте.

Как только поймёте, в чём разница между useMemo и useCallback, для чего используется useEffect и как передать данные из одного компонента в другой, можете переходить к следующим шагам. Но т.к. инфы в этом посте хватит на пару месяцев обучения, о следующих шагах я напишу чуть позже :)

На собесы уже тоже можно начинать ходить.

А если есть вопросы к тому, что вы здесь прочитали — пишите)