В интернете полно схем, чему можно и нужно научиться тому или иному разработчику, чтобы стать профессионалом в своём роде. Точнее, даже не так – чему нужно научиться, чтобы обладать некой базой знаний, а дальше совершенствоваться в каком-то одном или сразу нескольких направлений, чтобы добиться профессионализма. Вот и я решил поделиться своей скромной схемой, некой инструкцией того, что нужно учить начинающему фронтенд-разработчику.
Road-map’ы – это некие такие списки правил, которые помогают нам пошагово понять, что нам стоит изучать и с чего начать. Их используют не только в обучении, но и бизнесе, и в других подобных вещах. Просто пошаговый план, To-Do лист. При этом я не буду писать, что это актуально на 2024 год и прочее. Нет, эта карта очень надолго, ведь даже если какая-то технология устаревает, ее все равно стоит начать изучать, а дальше в процессе и разберетесь, что и где нужно поправить, и куда можно свернуть с начертанной карты. Помните, что она написана не рукой, а карандашом, и ластик у вас всегда под рукой.
1. Обычно всегда начинают с того, что нужно понять, что такое интернет вообще, как строятся сети, как отправляются пакеты, что такое DNS и прочее. Но на практике и по опыту скажу, что лучше сразу с этого не начинать, вы все равно все забудете. Лучше по мере того, как вы будете натыкаться на какие-то новые слова или технологии, даже вроде простые, но которые вам не понятны, как это работает – изучайте и применяйте сразу на практике. Начали настраивать API, отправляете пакеты на сервер, что это, как это работает – изучили. Выкладываете первый раз сайт на хостинг, какие-то DNS, IP и прочие непонятные абревиатуры – пошли, почитали, изучили.
Кстати, это может быть Вам интересно:
2. HTML/CSS – это основа основа любого веб-разработчика, в данном случае, фронтенда. Так сказать, как родной язык, на котором вы будете изъяснятся. Все остальное – лежит лишь поверх, для красоты, функционала и т.д. Можно написать весь функционал на кнопку, но если не показать саму кнопку на странице, то какой от нее толк. Это базовый язык разметки (HTML) и CSS для оформления этой разметки – вот то, что необходимо изучить в первую очередь. Все что кроме, но приближенное, по типу SASS (SCSS), какой-то модульной системы, SEO хитростей и прочего – все это уже потом, оно само придет по мере нарастания вашего опыта.
По своей сути CSS — Cascading Style Sheets — это не язык программирования, а каскадные таблицы стилей, правила и "настройки", по которым браузеры будут отображать HTML-элементы.
3. JavaScript – третья технология (назовём это так), помимо HTML и CSS, которой можно считать базовой для построения сайтов. Можно ли обойтись без JS – ну в современной мире навряд ли. Что-то легкое базовое, лендинг какой-нибудь можно, да, но все равно он будет статичным, без формы отправки заявки, и вообще, мало-функциональным. Поэтому JS – это, можно сказать, и есть настоящий язык в современном мире написания сайтов. Все остальное – лишь для отображения, показа и красоты. Поэтому, его изучать нужно хорошо и подробно. Библиотеки, фреймворки, typescript – все это также придет позже, и мы о них поговорим в следующей статье в продолжении темы, но знать основы и базу нужно обязательно.
TypeScript — это язык программирования, в котором исправлены многие недостатки JavaScript. Хотя в основе лежит типизация данных, а если совсем проще - в JS тип переменных динамический и меняется в зависимости от "контекста". В TS такое не прокатит.
Эти три языка (если можно CSS назвать языком) – то, что должен знать каждый фронтенд-разработчик. Некий базовый минимум, от которого все отталкиваются. Их вам даже может хватить, чтобы делать полноценный сайты с минимальным бэк-ендом, взаимодействием с сервером, но опять же, на практике, я могу сюда добавить еще SQL (язык запросов) и PHP для общения с сервером. Да, это уже что-то из бэкенда, но почти все начинающие ребята, кто хочет писать сайты, интересуются хотя бы минимальным набором инструментов, чтобы как-то взаимодействовать с базами данных и просто получить инфу с сервера. JS, SQL (может Mongo DB), PHP – то, что вам пригодится. Но это уже как допники.