Если вбить слово «фронтенд» в поисковую строку, можно найти огромное количество курсов по данному направлению. Проблема в том, что все курсы являются платными и, как правило, имеют ценник в несколько десятков тысяч рублей.
Чтобы разбавить засилие платных курсов, мы с фронтенд-разработчиком Юрием Петровым подготовили для вас программу обучения «Frontend-разработчик с нуля», которая состоит только из бесплатных материалов.
Справка
Frontend-разработчик — это специалист, который занимается разработкой клиентской части сайтов и веб-приложений. Он отвечает за создание интерфейса, внешний вид, интерактивные элементы и функциональность.
В данной программе рассматриваем связку с React / Redux.
Этап 1. Знакомство
Мы ничего не знаем о фронтенд-разработке, поэтому смотрим вводные ролики на YouTube: Все о Frontend-разработке за 15 минут, Что делает фронтенд разработчик на работе и Про Frontend, React и ChatGPT. После этого, в целях закрепления, читаем статью Увлекательный мир фронтенда.
Этап 2. Изучение базы
Прежде чем начнём изучать язык программирования и другие сопутствующие технологии, нам необходимо изучить базу. Понимаем, что вам хочется сразу в бой, но данный этап является фундаментальным. Набираемся терпения и проходим следующие курсы: Основы Computer Science и CS50 на русском.
Этап 3. Изучение основного стека
Мы уже имеем представление о том, как работают компьютеры. Это здорово, но чтобы разрабатывать сайты и веб-приложения, нам нужно изучить основной стек:
язык гипертекстовой разметки: HTML курс 2024
язык для описания вида документов: CSS курс 2024
язык программирования: JavaScript с Нуля
разработка пользовательских интерфейсов: React JS с Нуля
управление состоянием приложения: Полный курс Redux
К сожалению, бесплатные курсы редко обновляются, поэтому иногда возникают ошибки из-за несоответствия версий. В случае таких проблем, обращайтесь за помощью в тематический чат, который указан в конце статьи.
Этап 4. Изучение сопутствующих технологий
Нас не пугает язык программирования и библиотеки, так как мы усердно занимались несколько месяцев. Если азарт ещё велик, приступаем к изучению сопутствующих технологий:
система контроля версий: Git: курс
редактор интерфейсов: Figma. Уроки для frontend разработчиков
язык программирования: TypeScript на практике
набор инструментов для разработки: Bootstrap 5. Быстрый старт
язык запросов и серверная среда для API: GraphQL Crash Course
Помимо приведённых ссылок попробуйте самостоятельно найти информацию по данным технологиям и изучить их более тщательно.
Чтение и общение
Чтобы постоянно расширять кругозор, читаем профессиональные каналы Анна Блок | FrontendBlok и Frontend разработчик. Если что-то непонятно, задаём вопросы в Чат — Верстка Сайтов и Фронтенд.
В заключение, хотим отметить, что программы хватит на 6-9 месяцев обучения. Если вы прошли весь список, можете искать стажировку и готовиться к собеседованиям по этой подборке.
Желаем успехов!
P.S. Если вам понравилась программа, приглашаем в наш канал для новичков. Там можно найти советы по трудоустройству, программы обучения и истории других людей.
Комментарии (17)
alexxisr
18.04.2024 10:27+1а есть что-то объясняющее как это всё собрать в единое работающее нечто? А то у меня понимание каждого компонента по отдельности вроде есть, но приходится кучу всего костылить, чтоб оно заработало вместе. А хочется сделать make deploy и, вжух - сайт заработал.
daniilbelikov Автор
18.04.2024 10:27Такой волшебной таблетки у нас нет, увы)
alexxisr
18.04.2024 10:27я видимо зря добавил "вжух". Имел в виду - курсы, где рассказывают про бест практис фронтенд разработки - как это всё организовать, чтоб поменьше ручками работать. Без углубления в детали каждого инструмента.
Когда у тебя используется штуки три разных фреймворка, куча css и прочего, да даже как лучше зависимости между js скриптами разруливать. Вот это все на беке делается элементарно, так как один язык, один компилятор, один сборщик. А на фронте я теряюсь в куче технологий.
loudsven
18.04.2024 10:27Есть vercel. Добавляешь свой репозиторий и всё автоматом пересобирается после каждого коммита.
pae174
18.04.2024 10:27Как стать Frontend-разработчиком бесплатно?
Никак. Вы будете тратить время. А оно чего-то да стоит.
PavelSavostin
18.04.2024 10:27+2А есть смысл во frontend лезть? Джуны во первых никому не нужны, во вторых просто откройте hh.ru посмотрите сколько платят джунам или людям на стажировках. Ситуация такая, что предлагают самим кандидатам за стажировки платить (не шутка). Пока до middle доползешь умрёшь с голода.
Wyse
18.04.2024 10:27+1а куда тогда деваться ?
PavelSavostin
18.04.2024 10:27Без понятия. Можно посмотреть на hh.ru где больше всего джуновых вакансий, наверное у тестировщиков.
Но если хочется разработку, то смотреть те языки, где не 1200 откликов на вакансию и не в той специальности, где есть бесплатные стажировки.
gun_dose
18.04.2024 10:27+2Прежде чем учить реакт, надо выучить CSS: все эти гриды, флексы, позишены, анимации. Затем научиться что-то писать на ванильном js. Потом разобраться с SCSS, попутно освоив webpack или какой-то другой сборщик, а заодно научиться пользоваться npm. И уже только после всего этого имеет смысл смотреть всякие реактивные фреймворки или библиотеки. А то уже выросло поколение, которое без реакта не может бургер раскрыть. Просто для справки: почти 100% сайтов используют CSS и JS. И лишь около 4% используют React. Причём в этих 4% входят по большей части очень сложные сайты, где от разработчиков требуется реальный опыт и квалификация.
MrRewolwer
18.04.2024 10:27+1В статье не должно было быть слов, там должна была быть ссылка на один трекер. И на курс it-kamasutra. Эти двое создали больше разработчиков, чем все скиллбоксы вместе взятые.
А, я понял. Их нет в статье, потому что если ты действительно хочешь быть разработчиком, ты землю носом будешь рыть и сам найдешь самое важное.
И это станет твоим главным скиллом. Носом рыть гугл, документацию и стаковерфлоу.
Так становятся разработчиками. Ни в университетах. Ни на курсах. А штудируя документацию или снова изучая логарифмы, которые погулял в школе.
Соберись и работай. Таков путь.
ПС Камасутра - святой. И Реакт редаксный - пророк его.
shsv382
18.04.2024 10:27+1Вот где-то в начале части 3 добавьте изучение консоли. Людям далёким от мира программирования это даётся тяжело. Когда я пришёл преподавать JS в уже учащуюся группу студентов, они не знали про навигацию по дереву каталогов примерно ничего, а у части студентов вообще прямо на рабочем столе было создано по несколько git-репозиториев (до сих пор сам не понимаю, как)
devprodest
Почему стек состоит из реактора и его друзей, а не включает что-либо еще?
testtest4312
Из-за популярности, вероятно
daniilbelikov Автор
Всё верно.