Краткий план по изучению фронтенда, или #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

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

Ниже вы найдёте небольшие заметки по каждой теме, а также некоторые идеи для практики. Для вдохновения загляните в раздел «Project Ideas» на Гитхабе.

HTML

💡 Напутствие

HTML действительно является основой веб-разработки. Даже в JavaScript-фреймворках вы так или иначе пишете HTML.

📖 Темы и идеи

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

💡 Напутствие

CSS это ещё один обязательный компонент веба. Хотя в основном с его помощью пишутся стили, но его возможности с каждым днём возрастают. Например, теперь возможно создавать анимации на чистом CSS. А раньше это можно было реализовать только при помощи JavaScript.

📖 Темы и идеи

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

💡 Напутствие

JavaScript занимает важное место во фронтенде. Хотя когда-то он использовался в основном для придания страницам динамики, сейчас он является основой многих фронтенд-фреймворков. Эти структуры решают множество задач, которые раньше выполнялись на сервере (например, маршрутизация и отображение различных тем оформления).

📖 Темы и идеи

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

💡 Напутствие

После того, как вы уделили время простому (т.н. ванильному) JavaScript, вы понимаете, что решения некоторых задач могут быть громоздкими. Особенно это касается задач, где требуется манипулировать элементами HTML. Долгое время jQuery была простейшим решением. В настоящее время её популярность угасает из-за нововведений в ванильном JS, CSS и благодаря новым JS-фреймворкам (о них поговорим позже). Тем не менее стоит потратить время на изучение базовых вещей этой библиотеки и попрактиковаться на небольшом проекте.

📖 Темы и идеи

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

💡 Напутствие

Адаптивный веб-дизайн нацелен на то, чтобы сайт выглядел и функционировал должным образом на любых устройствах. Простой пример: сайт должен классно выглядеть и работать как на компьютере, так и на смартфоне. Понимание адаптивности критично для любого фронтенд-разработчика!

📖 Темы и идеи

Доступность

💡 Напутствие

Доступность является одной из важнейших тем в изучении фронтенда. Но ей часто уделяется слишком мало времени. Создание доступных сайтов не только эстетически обосновано, но и может принести бизнесу дополнительную выгоду, так как расширяет аудиторию, которая сможет пользоваться вашим доступным интерфейсом.

📖 Темы и идеи

git

💡 Напутствие

Контроль версий и кода является неотъемлемой частью инструментария любого веб-разработчика. Существует множество различных систем контроля версий, но Git на данный момент является самой популярной из них. Вы можете (и должны!) использовать его для ведения своих проектов в процессе обучения!

📖 Темы и идеи

Node и npm

💡 Напутствие

Хотя Node.js обычно называют серверной технологией, он довольно часто используется для поддержки фронтенда. Он делает это несколькими способами, например, запуск инструментов сборки, тестирование и линтинг (всё будет рассмотрено чуть дальше!). Node Package Manager (npm) — это еще одна замечательная особенность Node.js, которую можно использовать для управления зависимостями вашего проекта (т.е. библиотеки кода, на которых может быть основан ваш проект, например, jQuery!).

📖 Темы и идеи

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

💡 Напутствие

Sass делает CSS больше похожим на язык программирования. Если вы уже успели написать некоторое количество CSS, то вы, возможно, заметили, что в конечном итоге вы много повторяетесь. Например, много раз пишите один и тот же код цвета. В Sass вы можете использовать такие вещи, как переменные, циклы и вложения, чтобы уменьшить избыточность и улучшить читаемость. После написания вашего кода на Sass вы можете быстро и легко скомпилировать его в обычный CSS.

📖 Темы и идеи

Bootstrap

💡 Напутствие

Существует много вариантов раскладки, стилизации и добавления динамики вашим сайтам. Но в какой-то момент вы обнаружите, что, начиная работу с фреймворка, вы экономите время. Bootstrap лишь один из таких фреймворков. Но он далеко не единственный. Советую вам изучить любой из фреймворков на выбор. Но лучше уделите время основам HTML, CSS и JS вместо того, чтобы досконально изучать какой-то один фреймворк.

📖 Темы и идеи

БЭМ

💡 Напутствие

Важно знать, что существуют такие системы именования и организации, как БЭМ, и зачем они используются. Проведите небольшое исследование в этом направлении, но на начальном уровне я бы не рекомендовал уделять слишком много времени этому вопросу.

📖 Темы и идеи

Gulp

💡 Напутствие

В современном процессе разработки часто возникает необходимость автоматизировать такие задачи, как пакетирование, перемещение файлов и вставка ссылок в файлы HTML. Gulp — один из инструментов, который может помочь вам в этом!

📖 Темы и идеи

Webpack

💡 Напутствие

Представьте, что у вас есть большой проект со множеством разных разработчиков, работающих над множеством разных задач. Вместо того, чтобы работать в одних и тех же файлах, вы можете разбить их на маленькие модули. Webpack помогает сделать это, позволяя вашей команде работать в отдельных модулях, а затем, когда придет время создавать приложение, Webpack соберет все вместе: HTML, CSS или Sass, JavasScript, изображения и т.д. Webpack — не единственный в своём роде, но он занимает лидирующую позицию.

📖 Темы и идеи

ESLint

💡 Напутствие

Линтер — это фантастический инструмент для проверки качества кода, улучшения читабельности и достижения единого стиля. Использование линтера поможет вам отследить синтаксические ошибки и ошибки форматирования до того, как они попадут в продакшен. Вы можете запускать линтеры вручную или включать их в процесс сборки и деплоя.

📖 Темы и идеи

React

💡 Напутствие

JavaScript-фреймворки крайне популярны в современной разработке. Одним из важных выводов здесь является то, что React, несмотря на свою невероятную популярность, является лишь библиотекой для создания пользовательских интерфейсов, тогда как фреймворки, такие как Vue и Angular, стремятся быть более полнофункциональными. Например, если вы создаете React-приложение, которому необходимо маршрутизировать различные состояния, то вам потребуется дополнительно использовать что-то вроде response-router.

📖 Темы и идеи

Redux

💡 Напутствие

По мере того, как вы создаете все больше и больше приложений, вы начинаете понимать, что трудно поддерживать состояние приложения: пользователь вошел в систему, кто он, и вообще, что происходит в приложении. Redux — это отличная библиотека, которая помогает вам поддерживать единый источник состояния, на котором может основываться логика вашего приложения.

📖 Темы и идеи

Jest

💡 Напутствие

Очень важно настроить автоматическое тестирование для ваших проектов. Автоматическое тестирование позволит вам с уверенностью вносить изменения в будущем — если вы вносите изменения и ваши тесты все ещё проходят, то вы ничего не сломали. Есть очень много фреймворков для тестирования; Jest — просто один из моих любимчиков.

📖 Темы и идеи

TypeScript

💡 Напутствие

JavaScript динамически типизирован. Тем не менее существует распространенное мнение, что статическая типизация (т.е. заблаговременное указание типов переменных, классов) является более четкой и снижает вероятность появления ошибок. Независимо от того, как вы относитесь к теме типизации, важно, по крайней мере, пощупать статически типизированную версию JavaScript, тот же TypeScript. Обратите внимание, что TypeScript компилируется в JavaScript, поэтому он может интерпретироваться браузерами (то есть браузеры не интерпретируют TypeScript как-то по-особому).

📖 Темы и идеи

Next.js

💡 Напутствие

Переходим к продвинутым темам! В настоящий момент вы создали приложение React (или Vue или Angular), которое выполняет совсем немного работы в браузере. По разным причинам (например, SEO, озабоченность по поводу производительности) вы, возможно, захотите, чтобы ваше приложение рендерилось на сервере, а не на клиенте. Вот тут и появляется фреймворк, такой как Next.js

📖 Темы и идеи

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

Предполагается, что этот список даст вам широкое представление об экосистеме фронтенда, но просто невозможно затронуть каждую отдельную тему, не говоря уже о множестве инструментов в каждой области! Если вы считаете, что я пропустил что-то очень важное, пожалуйста, загляните в раздел Contributing в репозитории Github, чтобы узнать, как вы можете помочь улучшить это руководство.

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

По мере прохождения #100ДнейКода вам понадобится один или несколько проектов, к которым вы можете применить свои новые знания. В этом разделе я попытаюсь представить несколько идей проекта, которые вы можете использовать. В качестве альтернативы предлагаю вам придумать свои собственные идеи проекта, поскольку эти идеи могут вас сильнее заинтересовать и мотивировать.

  • Идея для новичков: сайт-портфолио
  • Идея для средних и продвинутых: Создайте сайт с аналитикой твитов (если вы уже знакомы с бэкендом и 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 (±∞)

3.6K Followers

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