July 24, 2020

План Становления 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, уделите время тому чтобы понять их идеи и инструменты.

Мои фавориты среди ресурсов:

  1. Complete React Tutorial (with Redux) от NetNinja
  2. React for beginners (платно) от Wes Bos
  3. React — The Complete Guide (платно) от Academind

Надеюсь, вы будете в восторге от возможности применить свои знания в завершающих проектах.

Теперь вы можете построить все, что захотите.


Вот несколько советов насчет дальнейших действий:

  1. Идеи для проектов можно найти в разделе Take Home Projects на freeCodeCamp.
  2. Создайте любой проект, следуя какому-нибудь туториалу, а затем измените его и улучшите путем добавления функционала.
  3. Возьмитесь за D3.js и Node.js, чтобы получить следующие сертификаты от freeCodeCamp!
  4. Чтобы стать мастером в JavaScript , читайте Eloquent JavaScript и You Don’t Know JS.
  5. Повышайте свой уровень на Codewars.
  6. Почувствуйте вкус продвинутого веб-дизайна, пройдя курс Web Design for Web Developers.
  7. Поддерживайте свой аккаунт на GitHub в активном состоянии и старайтесь участвовать в open source.