Краткий план по изучению фронтенда, или #100ДнейКода

📆 Учебный план

  • День 1–8: HTML
  • День 9–16: CSS
  • День 17–24: Основы JavaScript
  • День 25–27: jQuery
  • День 28–33: Адаптивный веб-дизайн
  • День 34–36: Доступность (a11y)
  • День 37–39: Git
  • День 40–44: Node и npm
  • День 45–50: Sass
  • День 51–54: Bootstrap
  • День 55: БЭМ
  • День 57–61: Gulp
  • День 62–65: Webpack
  • День 66: ESLint
  • День 68–83: React
  • День 84–89: Redux
  • День 90–94: Jest
  • День 95–97: TypeScript
  • День 98–100: Next.js

🔎 Подробности

HTML

💡 Напутствие

📖 Темы и идеи

  • Пройдите раздел Basic HTML and HTML5 section на freeCodeCamp.
  • Пройдите курса «Основы HTML» на HTMLAcademy (здесь и далее все материалы на русском языке добавлены переводчиком)
  • Структура HTML-страницы
  • HTML-элементы
  • Вложение HTML-элементов
  • Семантическая разметка
  • Ссылки и составные страницы
  • Картинки
  • Аудио и видео
  • Формы и элементы форм
  • Создайте многостраничный сайт! (Загляните в раздел Project Ideas если вам нужно вдохновение).
CSS

💡 Напутствие

📖 Темы и идеи

  • Пройдите раздел Basic CSS, CSS flexbox, and CSS grid sections на freeCodeCamp.
  • Пройдите курс «Основы CSS» от HTMLAcademy
  • Инлайновый CSS
  • Тег <style>
  • Подключение CSS при помощи <link>
  • Стилизация элементов
  • Селекторы
  • float, очистка потока
  • Раскладка (гриды, флексы)
  • Шрифты, веб-шрифты
  • Стилизуйте HTML-страницу, которую создали в процессе изучения HTML!
JavaScript

💡 Напутствие

📖 Темы и идеи

  • Пройдите раздел Basic JavaScript and ES6 sections на freeCodeCamp.
  • Пройдите курс «Основы JavaScript» от HTMLAcademy
  • Куча основных вещей, которые тут не перечислить!
  • Тег <script> и его расположение
  • Доступ к HTML-элементам
  • Событийный цикл, стек вызовов и очередь событий
  • Наследование прототипов
  • Ссылка против значения
  • Добавьте несколько динамических элементов или логику на вашу стилизованную HTML-страницу, которую вы создали ранее!
jQuery

💡 Напутствие

📖 Темы и идеи

  • Пройдите раздел jQuery section на freeCodeCamp.
  • Почитайте «Основы jQuery» на WebReference
  • document.ready
  • Селекторы
  • Переключение классов
  • Анимации
  • Добавление или удаление HTML-элемента
  • Добавьте jQuery на ваш сайт!
Адаптивный веб-дизайн.

💡 Напутствие

📖 Темы и идеи

Доступность

💡 Напутствие

📖 Темы и идеи

git

💡 Напутствие

📖 Темы и идеи

Node и npm

💡 Напутствие

📖 Темы и идеи

  • Изучите Node.js, поймите чем он отличается от браузера
  • Изучите весь цикл переводов «Руководство по Node.js» на Habr
  • Установите Node.js (npm входит в комплект)
  • Создайте простой JS-файл и запустите его при помощи Node.js
  • Используйте npm для управления зависимостями вашего проекта (в том числе jQuery!)
Sass

💡 Напутствие

📖 Темы и идеи

Bootstrap

💡 Напутствие

📖 Темы и идеи

БЭМ

💡 Напутствие

📖 Темы и идеи

Gulp

💡 Напутствие

📖 Темы и идеи

Webpack

💡 Напутствие

📖 Темы и идеи

ESLint

💡 Напутствие

📖 Темы и идеи

React

💡 Напутствие

📖 Темы и идеи

Redux

💡 Напутствие

📖 Темы и идеи

Jest

💡 Напутствие

📖 Темы и идеи

TypeScript

💡 Напутствие

📖 Темы и идеи

Next.js

💡 Напутствие

📖 Темы и идеи

А что насчёт X?

Идеи для проектов

  • Идея для новичков: сайт-портфолио
  • Идея для средних и продвинутых: Создайте сайт с аналитикой твитов (если вы уже знакомы с бэкендом и API)

Нужна помощь?

  • Погуглите вопрос
  • StackOverflow (Велика вероятность, что кто-то уже задал ваш вопрос. Тогда он появится в первых строках выдачи Google).
  • Mozilla MDN Web Docs
  • freeCodeCamp
  • Местные митапы разработчиков! Большинство из них приветствуют участников с любым опытом.

--

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

More from Medium

Use ESNext to write less JavaScript code!

How to integrate Magnific Popup Javascript Library with Shopify

How to make columns persistent — Material-UI DataGrid

Debugging JavaScript using Snippets in Chrome Developer Tools