Как я изучал фронтэнд: полный список сервисов и советы по изучению
Привет! Меня зовут Виктор Рябков, и сейчас я Senior Fullstack разработчик. Но 5+ лет назад я начинал как и все, с полного нуля и без технического или IT образования. Поэтому как и тебе, мне приходилось искать полезную информацию самостоятельно.
В этой статье я хочу поделиться всеми сервисами, которыми я пользовался на своем пути, и дать свои комментарии по тому, как ими лучше пользоваться. Получается своеобразный роадмап с комментариями и полезными ссылками, в общем, приятного прочтения
Для удобства буду опираться на уже известные роудмапы (например - https://roadmap.sh/frontend)
Проблема таких роадмапов в том, что они слишком общие. Понятное дело - если вы выучите вообще все, что там указано, то вы станете просто гением. Проблема в том, что там указан настолько огромный объем знаний, что большинство даже до 1/4 не дойдут и сдадутся, так как прямого результата не будет.
Для старта важно другое: четкий план с самыми важными технологиями, (образно говоря скелетом) с которыми вы можете устроиться на работу. Все остальное вы успеете выучить во время работы. Главное - начать получать коммерческий опыт
Чтобы было понятнее даже я знаю далеко не все из этого роудмэпа выше, но при этом работаю уже шестой год. В общем, вы поняли
Так что давайте по порядку разберем, что из него нужно учить, и где это учить
Раздел Internet это конечно хорошо, но далеко не обязательно по началу. Первое, с чего стоит начать, это HTML&CSS. Тут все очевидно, это база, которую должны знать даже дизайнеры. Что могу посоветовать?
https://www.w3schools.com/html/html5_video.asp
На этом сайте описаны все теги HTML и за что они отвечают как работают и тд. Учить их все не нужно, вы должны пользоваться этим сайтом как подсказкой. Не знаете как работает тэг? Зашли и почитали на сайт. Но все равно советую изначально хотя бы мельком пробежаться, почитать названия, иначе вам будет трудновато понимать, какие теги есть и что вы можете сделать при помощи HTML. Дальше сразу ныряем в верстку и пробуем все ручками. Представьте что вы Марк Цукерберг и пишете гениальный сайт, а получился фейсбук.
ВАЖНО! Зацикливаться на мыслях “Я ничего не знаю, пойду читать теорию…” - ошибка. Большая ошибка. Набивайте шишки в своей среде для разработки, так вы научитесь гораздо быстрее. Если не получится, просто удалите проект, никто вас ругать за ошибки не станет
Также советую документацию от мозиллы, тут сильно лучше дизайн и проще искать. https://developer.mozilla.org/en-US/docs/Web/HTML Используем как шпаргалку и не забываем по практику
После того как натыкали свою первую верстку, смотрим как сделать это красиво. Идем смотреть CSS.
https://msiter.ru/references/css-reference
https://puzzleweb.ru/css/all_properties.php
https://html5book.ru/css-spravochnik.html
Работает все так же, как и с предыдущим сайтом для HTML. Просматриваем базово и сразу в бой.
На этом этапе у вас скорее всего будут проблемы с тем, как подключить CSS в HTML. Вот тут уже не смогу толком посоветовать конкретных материалов, поэтому предлагаю воспользоваться моим бесплатным курсом по HTML&CSS.
В нем - базовые знания по обоим технологиям и создание первого проекта на них. Спойлер - страница популярной социальной сети.
В принципе в этом курсе вы найдете вообще всю основную важную инфу по HTML&CSS, поэтому можете по нему их и выучить. Но это не отменяет практику, а для практики вам все же понадобятся сайты, которые я вам дал
Ссылка на курс - https://clck.ru/34NCEF
После того как вы изучите простой CSS и HTML вы сталкнетесь с такой штукой как тэг Form, свойства CSS как Grid / Flexbox и т.п. Тут основной совет - идти на ютуб и посмотреть пару видео. Это супер базовый контент который есть почти у каждого, легко найдете объяснение на свой вкус и цвет.
По Grid моя личная рекомендация - https://cssgridgarden.com/ На этом сайте вы сможете в игровой форме изучит, как работает grid выращивая морковку. Короче топ за свои деньги (бесплатно).
Здесь мы подходим к рубежу когда вы уже Программист с большой буквы и знаете HTML / CSS.
Дальше идем учить JavaScript. JS делится на две части - простая часть (понять, что такое типы данных, функции, объекты и т.д.) и сложная часть (асинхронщина, евент луп, прототипирование и замыкание)
Начинаем от сложного к простому. Сначала смотрим базово, что вообще такое этот ваш джаваскрипт Смотреть тут https://learn.javascript.ru/
По моему мнению, это самый классный учебник по JS, который поэтапно вас введет в курс дела. Во время чтения постоянно все пробуем и тестируем в вашей среде разработки, не стесняемся.
Дальше используем вот такую шпаргалку от мозиллы. https://developer.mozilla.org/en-US/docs/Web/JavaScript
Сложный джаваскрипт рекомендую учить комплексно. Что это значит? Берем темы, которые я расписал выше и идем один за одним. Читаем про асинхронность и пытаемся написать то же самое сами. После того как получилось, пробуем придумать свое.
Допустим мы хотим попробовать запросить какие-то данные, чтобы посмотреть как у нас это получится. Берем и идем сюда https://jsonplaceholder.typicode.com/Это бесплатный Fake Api в котором вы можете брать ссылки как будто бы у вас есть backend и работать с этим.
На этом этапе я лично рекомендую взять небольшую паузу в обучении и сделать упор на практике. Берем несколько проектов на разработку, буквально один/два, не будем изобретать велосипед.
Берем первый сайт по запросу "Топ 10 идей для проектов для обучения JS" - https://proglib.io/p/web-projects
Выбираем то что понравилось, делаем. На этом сайте есть примеры и с кодом, если хочется посмотреть, как та или иная фича реализована
После практики и создания нескольких проектов нужно начинать уже набирать портфолио. Это значит, что нужно их куда то залить. И лучшее место для этого это github.
По Github учим, что такое репозитории и контроль версий. Тут к сожалению не подскажу сервисов, все раскидано по разным сайтам
Поэтому не стесняемся и сами гуглим по теме (или просим меня создать ролик на ютуб по этой теме) Вам важно выучить: как создавать локальные гит репозитории и удаленные гит репозитории, как пушить изменения, скачивать проекты через гит, создавать новые ветки, коммитить и ходить по истории ваших коммитов.
На основе закончили. Дальше вам понадобится менеджер пакетов.
Пакеты - это библиотеки которые написали другие программисты и выложили, чтобы вы их использовали. Для этого умные программисты придумали систему и называется она NPM. NPM - штука, которая помогает в консоли устанавливать какие-либо библиотеки для вашего проекта.
Гуглим NPM или YARN (кому что больше нравится) и тренируемся. Дальше создаем package.json которые будет записывать все ваши библиотеки и научиться устанавливать и удалять любые пакеты. Тут могу только посоветовать посмотреть https://www.npmjs.com/. Это огромная библиотека со всеми пакетами. Дайте разгуляться вашей фантазии.\
Дальше мы с вами переходим к фреймворкам. И в нашем случае это React. На самом деле их много, но я по своему опыту скажу, что реакт самый простой в понимании и на нем больше всего вакансий. Короче одни плюсы.
Angular / VUEjs / Svelte еще успеете глянуть позже когда начнете работать. Переучиться с фреймворка на другой фреймворк сильно проще чем сразу учить что то трудное. Тут нет каких то уникальных ссылок, только документация React https://react.dev/. Она классная удобная и на многих языках. Читаем ее, пробуем и практикуем, все непонятные моменты гуглим на ютубе.
Еще вам понадобятся форматирующие библиотеки вашего кода. Это нужно, чтобы код выглядел красиво и его могли читать другие разработчики. Основные две библиотеки для этого Prettier и Eslint https://prettier.io/ https://eslint.org/
Иногда сложновато заставить их работать вместе, но статей в интернете по этому полно. Просто вбейте “Настройка prettier и eslint” и действуйте по инструкции. И не переживайте, если сначала не будет получаться. Главное не бросайте это дело, ибо в коммерческой разработке это сильно важно. Красивый код - это ваше лицо.
Дальше опять останавливаемся в обучении и ныряем в практику. Сначала пробуем перенести свои проекты которые делали в самом начале на чистом JS в React. После того как все перенесем, идем опять гуглить прикольный проект и пишем его с нуля на react.
Приложение на react - это уже серьезное достижение. После этого момента останется только совершенствовать свои навыки и углубляться в тему.
После того как напишем свое собственное приложение на React, начинаем понимать, что писать весь css самому - тяжело. И вы правы, так как есть много готовых компонентов, например https://mui.com/. Это одна из самых популярных UI lib. Идем в доки, устанавливаем себе и пытаемся сделать все еще красивее.
Чтобы ощутить всю силу, создайте простое приложение (ToDo list или калькулятор) только из UI lib. Вам понравится
Идем дальше. Чтобы приложение работало как приложение понадобиться какой то State manager. Это инструмент который делает хранилище куда можно записывать состояние приложения. Залогинился пользователь, записали туда firstName / lastName и дальше используем во всех частях приложения.
Короче - Redux и Redux toolkit https://redux.js.org/
Внедряем в наши приложения глобальный стейт менеджер и радуемся тому, что уже умеем. Ссам инструмент простой, документация классная. Главное - понять суть работы, один раз написать самому, и дальше уже проблем не будет.
На этом этапе мы уже умеем с вами. HTML / CSS / JavaScript / React / Redux / UI lib
Правильно, архитектуры! Нам нужна структура приложения. Конечно можно складывать все в корневую папку src и выглядеть как "гений". Но нам такое не подходит. Лично мой совет - брать все самое новое и свежее. Архитектура во фронте - очень динамичная вещь, она постоянно меняется и улучшается. Приложения которые я писал два года назад уже выглядят как отстой по архитектуре. Тут берем самое свежее - https://feature-sliced.design/
Там ребята на русском языке расписали как это использовать и какие проблемы это вообще решает в мире фронтенда.
Важно напоминание - сначала вам покажется что это бесполезная трата времени, и это будет вашей фатальной ошибкой. Нужно бороться со своей ленью и делать из себя классного разработчика. Берем старый проект, который вы переносили на react и пытаемся красиво разложить его по архитектуре.
Сначала будет трудно, непонятно, но как втянетесь, поймете что я был прав. Приложение с архитектурой легче поддерживать даже через много лет. Открываете проект и сразу понимаете, где что лежит. Это так же важно как eslint и prettier.
Представим что вы выполнили все мои рекомендации по шагам. Дальше что? На этом этапе по факту вы можете писать приложения любого размера ибо все умеете и знаете. Но есть одно НО.
Это TypeScript. И нет, это не другой язык программирования и не что то сложное. Это просто надстройка над обычным JS чтобы помогать ВАМ же. Суть TS в том чтобы выкидывать вам ошибки еще на моменте разработки
Без тайпскрипта вы не сможете создать большое поддерживаемое и стабильное приложение. В какой-то момент вы упретесь в загадку: меняете в одном месте - разваливается в другом. Появляется так много зависимостей друг от друга, что без TS очень сложно. Поэтому открываем документацию по тс и читаем - https://www.typescriptlang.org/
Основное что вам тут нужно понять - как создавать config файл и как это вообще работает. Если в двух словах, то на TypeScript вы только пишете, а само приложение все еще продолжает работать на js. Круто то, что после того, как вы что-то написали на TS, вы запускаете компилятор и он вам выдает код на JS. И все готово.
Ну что, базово это почти все, что вам нужно для первой работы. Звучит конечно легко, но на деле - месяцы и месяцы изучения. Главное - не сдаваться, не бояться практиковаться, и не сворачивать с пути. Лично я именно так и делал.