План Становления Frontend разработчиком
Так, так, так, ты пришел сюда, чтобы написать четкий план изучения web-разработки, неужели ты это понял спустя 4 месяца!!! Знаешь почему ты многое не выучил? Потому что у тебя нет структуры плана вот поэтому, но я пришел сюда, чтобы исправить это.
Начнем с самого начала.
Хочу сказать что в основе теории будет этот сайт — FreeCodeCamp
Для практики буду использовать эту песочницу — CodePen
Макеты Figma — макеты
Яндекс.Заметки — здесь буду записывать важные моменты.
Основы Вертски
HTML
Ссылки:
Теория — Базовый HTML и HTML 5 — https://www.freecodecamp.org/learn
Шпаргалка HTML — https://htmlreference.io/
CSS
Теория на сайте — https://www.freecodecamp.org/learn
шпаргалка CSS — https://cssreference.io/
базовый CSS
CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
- Прикладной Визуальный Дизайн (пройти курс)
- Прикладная доступность (пройти курс)
- Отзывчивы принципы веб-дизайна (пройти курс)
Flexbox CSS
Ссылки:
Практичная игра Flexbox — Flexbox Froggy.
Шпаргалка — https://yoksel.github.io/flex-cheatsheet/
Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.
CSS GRID
Макет сетки CSS или сетка CSS - это методика каскадных таблиц стилей, которая позволяет веб-разработчикам создавать сложные адаптивные макеты веб-дизайна более легко и согласованно в разных браузерах.
Git и GitHub
Ссылки
Git и GitHub — плейлист туториал
gitHub руководство за 10 минут — https://guides.github.com/activities/hello-world/
Git — распределённая система управления версиями. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux, первая версия выпущена 7 апреля 2005 года. На сегодняшний день его поддерживает Джунио Хамано.
GitHub — крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. Веб-сервис основан на системе контроля версий Git и разработан на Ruby on Rails и Erlang компанией GitHub, Inc
Практика Верстки
Совет: После сделанного проекта, выложить его на GitHub.
Адаптивная веб-проекты — 5 проектов
Свертстать 10 макетов разной сложности от 1 до 10.
JavaScript
https://www.freecodecamp.org/learn — теория
Практика JS
при прохождении теории Js практиковаться играя в эту игру — Code Combat
сделать 5 приложений на FreeCodeCapm
Библиотеки фронтенда
На этом этапе вы становитесь настоящим фронтенд-разработчиком.
Bootstrap
Самый популярный CSS-фреймворк. Постройте с его помощью пару сайтов по руководствам на YouTube. Освойте знаменитую колоночную сетку Bootstrap.
JQuery
Хотя кто-то может сказать, что jQuery мертва, использование этой библиотеки пригодится в тех случаях, когда решить проблему на чистом JavaScript сложновато, а использовать JS-фреймворк уже перебор. Это будет еще один отличный инструмент в вашем арсенале. Создайте с его помощью пару простых приложений, чтобы попрактиковаться.
Sass
Я был неспособен по-настоящему оценить CSS-фреймворки, пока не увидел их настоящую силу. Вот тогда я и захотел изучить продвинутые техники CSS. Для этого я купил прекрасный курс Advanced CSS and Sass (платно) от Jonas Schmedtmann. Рекомендую обратиться к нему, если вы хотите отточить свои навыки CSS и понимание рабочих процессов. Я все еще очень рад, что нашел его.
React & Redux
Это основная часть раздела, посвященного библиотекам фронтенда. Если вы думаете, какую библиотеку JavaScript изучать первой, React будет прекрасным выбором.
Честно говоря, в формате freeCodeCamp сложно понять, как работать с этой библиотекой, поскольку там вы не можете создавать что-либо с нуля, а работа некоторых вещей вообще от вас скрыта. Поэтому пройдите отдельный курс по React и Redux, уделите время тому чтобы понять их идеи и инструменты.
Мои фавориты среди ресурсов:
- Complete React Tutorial (with Redux) от NetNinja
- React for beginners (платно) от Wes Bos
- React — The Complete Guide (платно) от Academind
Надеюсь, вы будете в восторге от возможности применить свои знания в завершающих проектах.
Теперь вы можете построить все, что захотите.
Вот несколько советов насчет дальнейших действий:
- Идеи для проектов можно найти в разделе Take Home Projects на freeCodeCamp.
- Создайте любой проект, следуя какому-нибудь туториалу, а затем измените его и улучшите путем добавления функционала.
- Возьмитесь за D3.js и Node.js, чтобы получить следующие сертификаты от freeCodeCamp!
- Чтобы стать мастером в JavaScript , читайте Eloquent JavaScript и You Don’t Know JS.
- Повышайте свой уровень на Codewars.
- Почувствуйте вкус продвинутого веб-дизайна, пройдя курс Web Design for Web Developers.
- Поддерживайте свой аккаунт на GitHub в активном состоянии и старайтесь участвовать в open source.