Дорожная карта frontend! Структурировал все необходимые материалы для обучения. html, css, js, react, redux-toolkit
Привет, друзья, с самого начала своего обучения у меня была цель собрать наиболее эффективный роадмап для освоения профессии frontend разработчик. В этой статье я хочу выкатить обновлённую дорожную карту со всеми источниками и ссылками на учебные материалы, которые помогли мне дойти до трудоустройства. Часть времени я потратил на непонятные статьи и ресурсы, поэтому я исключил их и собрал здесь только самые актуальные и нужные материалы.
Роадмап 2024 года.
ЭТАП 1.
Html, css
Для самого начала советую присмотреться к курсу Дмитрий Валак “Основы html css для начинающих”. Этот курс является хорошим началом, где автор познакомит вас с простыми конструкциями и на пальцах объяснит что и как, чтобы вы, поддерживая интерес, могли с удовольствием пойти дальше. Курс можно найти на пространстве интернета, но не рекомендуется так делать и конечно же можете его приобрести у автора. Под конец курса вы напишите свой небольшой сайт на основе видео уроков. Кстати вот канал Дмитрия: https://www.youtube.com/@BrainsCloud/videos.
На этом канале вы можете смотреть другие учебные материалы и учиться верстать.
Далее переходим и учимся верстать вместе с “фрилансер по жизни”. Да, из-за событий он начал записывать уроки на Украинском но все нужные нам материалы записаны на русском языке.
На канале есть хороший курс по HTML, CSS. В том числе есть видео на русском по вёрстке макетов и некоторые бесплатные макеты прикреплённые к видео, которые можно скачать через VPN.
Канал на ютуб ‘Фрилансер по жизни’.
После или во время прохождения курсов попробуйте сверстать несколько макетов по урокам фрилансера, либо несколько макетов по урокам Дмитрия Валак, взяв макеты в его ютуб блоге.
Теперь нужно найти одностраничный лендинг а лучше 2 лендинга и сверстать их самостоятельно. Как получится так получится, главное практика. Это можно сделать даже до того, как перейдёте к курсу Фрилансера по жизни.
Вот мы прошли курсы, поверстали как смогли, теперь нужно закрепить знания. По следующему видео: https://www.youtube.com/watch?v=ZOa2k0jySh8&t=9890s
После этих курсов мы верстаем интернет магазин, где есть несколько страниц. Можете поискать макеты на figma или попросить у какого нибудь дизайнера. Макет должен быть по типу интернет магазина, где есть sidebar, хлебные крошки, header и множество других элементов использующихся в современных проектах. Нужно поискать самостоятельно, потому что ссылки быстро устаревают.
Дополнительно можете изучить курс от Петриченко Ивана ‘Web-разработчик’, многие советуют, но я его не проходил.
ЭТАП 2
Javascript
После вёрстки изучение javascript может показаться более сложным этапом, он даётся тяжелее, но вы должны подготовить себя к этому и не расстраиваться, если что то не получается. Со временем вы привыкните ко всем процессам связанным с разработкой и дело пойдёт в гору, будьте терпеливы ведь любая деятельность где человек хочет стать профессионалом требует изучения технологии и прикладывания усилий.
Первое с чего важно бы начать - это плейлист на канале фрилансер по жизни.
Плейлист фрилансера по жизни: https://youtu.be/wdViO9OcQzs
Там Евгений рассказывает об основных и важных базовых моментах, которые вы будете встречать при реализации своих проектиков и при изучении React в дальнейшем.
Его мини курс даёт важный фундамент.
Следующим этапом вы можете пройти курс Ивана Петриченко.
Название курса: Полный курс по JavaScript + React.
Важно! Не проходите в этом курсе часть связанную с React, изучите только javascript.
Курс можно найти на просторах интернета. Но я за то, чтобы его приобрести. Курс может показаться сложным, поэтому если перестанет получаться, нужно либо оставить его и вернуться к нему позже, либо переключиться на другие ресурсы.
P.S. Я его недопрошёл, но взял оттуда некоторые важные моменты.
Обязательно, что вы точно должны изучить и иногда перечитывать повторно это learn.js
Ссылка: https://learn.javascript.ru/
Выбирайте сами, когда изучать этот ресурс, но не начинайте с него, ибо он покажется сложным.
Наравне с изучением теории не забываем о практике, вот что стоит взять на заметку.Как практиковаться? Первое время повторяйте написание кода за авторами видео. Со временем вы будете встречать знакомые конструкции и писать самостоятельно.
Когда дописываете короткий проект, не поленитесь 1. Прогуглить все непонятные моменты 2. Повторить проектик самостоятельно, без просмотра видео.
Пройдя эти маленькие уроки, приступайте к написанию более крупного проекта на js. Этот курс я приложил в самом низу. Затем опираясь на этот курс, создайте свой вариант, со своим фотографиями и своей идеей, пусть это даже будет максимально похожий проект, но с лично вашими исходниками.
5. https://www.youtube.com/watch?v=Ip9TTKQDlaw&list=PL7cTIfGFrdKn9lnGXEUWEXYdYp-HKGPAw&index=3 - курс
6. https://www.youtube.com/watch?v=KhM8lVvFzhk - drug n drop на javascript. Учимся делать перемещающиеся элементы.
Важно понимать, что преждевременный и поспешный переход на фреймворки, без должной практики на чистом javascript не позволит в должной мере понять все происходящие процессы. Ведь фреймворки сильно упрощают и сокращают написание кода.
3 ЭТАП
Вы молодцы, если дошли до этого этапа, вы уже проделали основную часть пути, остаётся самое интересное, теперь вы будете видеть явный результат от своего обучения и поймёте, зачем мы изучали всё, что было до этого.
Изучаем React и стейт менеджер Redux toolkit
1. Возьмите на заметку https://react.dev/ - это хороший учебник по React, который желательно почитывать ежедневно параллельно с прохождением какого либо курса или практического задания.
2.
https://www.youtube.com/watch?v=ptiom4YWqoE&t=7278s - React sneakers. Объёмный базовый проект, где автор обещает полностью ознакомить новичка с React.
3. https://www.youtube.com/watch?v=eS0GL73tkmw - 6 небольших проектов на React. Видео позволит базово разобраться с основными моментами и примерно понять, с чем будете иметь дело.
4. https://www.youtube.com/watch?v=_UywBskWJ7Q&list=PL0FGkDGJQjJG9eI85xM1_iLIf6BcEdaNl - React pizza. Обязательно к просмотру. Проходить после проекта React sneakers.
5. https://www.youtube.com/watch?v=GNrdg3PzpJQ&list=PL6DxKON1uLOHya4bDIynPTCwZHrezUlFs - обязательно к просмотру ulbi tv. На первом этапе будет непонятно и не рекомендуется к просмотру, но позже стоит углубиться в это видео и другие плейлисты на канале ulbi tv.
https://www.youtube.com/watch?v=NlrhyypLCm8&list=PL0FGkDGJQjJH4Uz-Vsk_91V65Wh88nlXC - хуки изучаем здесь. Возможно придётся пересмотреть по несколько раз, чтобы всё усвоилось. Я пересматривал раз 5 и ещё раз перед собеседованием.
Под конец просматриваем этот плейлист, чтобы разобраться с работой API: https://www.youtube.com/watch?v=R5sAjEr4lt0&list=PLfSrF_YWov8ZElauVxs5FivTKasXvmMkH&index=1
Изучая курсы мы не забываем подыскивать себе пет проект для реализации. На этом этапе можно воспользоваться услугами какого либо ментора и попросить подыскать себе пет проект, либо придумать проект самостоятельно. В своих видео я ещё постараюсь раскрыть тему подбора пет проектов и как это сделаю, приложу в эту статью ссылку с описанием.
Теперь, ребята, ищем работу. В добрый путь!
Дополнительно ко всему после трудоустройства или во время поиска работы нужно будет изучать typescript, как соберу годные материалы, тоже приложу сюда.
Большая благодарность авторам курсов и статьей, позволяющим нам продвигаться по их материалам и познавать профессию.
Картинка: https://clck.ru/39QsKP