Open in app

Sign in

Write

Sign in

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

Workafrolic (±∞)
14 min readFeb 14, 2019

Перевод «A Timeboxed, Day-by-Day #100DaysOfCode» Ника Сциалли

Это слегка самоуверенный учебный план по изучению фронденда за 100 дней. Поскольку он — этот план — охватывает широкий спектр тем, то его можно воспринимать как обзорный. Но он вряд ли подойдёт для глубокого погружения в какую-то отдельную область. После того, как вы завершите программу по этому учебному плану, вы получите общее представление о каждой из представленных в ней тем, и в дальнейшем сможете углубиться в любую из них при необходимости.

На создание этого учебного плана меня вдохновила дорожная карта Modern Frontend Developer Кармана Ахмеда. Это великолепно! Обязательно загляните по ссылке.

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

Если вы считаете, что этот учебный план полезен, то поставьте звезду в репозитории на Гитхабе, чтобы следить за обновлениями, и делитесь им в социальных сетях!

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

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

Я предполагаю, что на старте все читатели будут разного уровня. Это нормально. Как начинающие, так и опытные разработчики смогут извлечь пользу из краткосрочной практики в каждой из представленных областей.

Рекомендуемый распорядок:

  • День 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) является стандартным языком разметки для создания веб-страниц и веб-приложений. В связке с каскадными таблицами стилей (CSS) и JavaScript он образует триаду краеугольных технологий веба. Браузеры получают HTML-документы с веб-сервера или из локального хранилища и превращают их в страницы. HTML описывает семантическую структуру страницы и обычно включает в себя подсказки для отрисовки/интерпретации документа браузерами.

💡 Напутствие

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

📖 Темы и идеи

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

Каскадные таблицы стилей (CSS) — это язык таблиц стилей, он используется для описания внешнего вида документа, написанного на языке разметки, например HTML. CSS является краеугольной технологией веба, наряду с HTML и JavaScript. CSS предназначен для разделения внешнего вида и содержимого, включая расположение элементов, цвета и шрифты. Такое разделение улучшает доступность контента, обеспечивает бо́льшую гибкость и контроль над свойствами внешнего вида.

💡 Напутствие

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

📖 Темы и идеи

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

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

💡 Напутствие

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

📖 Темы и идеи

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

jQuery — это быстрая, маленькая и многофункциональная JavaScript-библиотека. Она может пройтись по HTML и манипулировать элементами, обрабатывать события, управлять анимацией и Ajax. Все эти вещи становятся намного проще с помощью простого в использовании API, который работает во множестве браузеров. Благодаря сочетанию универсальности и масштабируемости, jQuery изменил способ, которым миллионы людей пишут JavaScript. jQuery.com

💡 Напутствие

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

📖 Темы и идеи

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

Адаптивный веб-дизайн (RWD, Responsive Web Design)— это подход к дизайну, позволяющий красиво отображать страницы на различных устройствах с разными размерами экранов. С недавних пор в расчёт берётся также удалённость пользователя от экрана. Контент, дизайн и производительность необходимы на всех устройствах, чтобы обеспечить удобство использования и удовольствие от посещения сайта. Сайт, разработанный с использованием RWD, адаптирует макет к среде просмотра, используя плавные, пропорциональные сетки, гибкие изображения и медиавыражения CSS. Википедия.

💡 Напутствие

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

📖 Темы и идеи

Доступность

Доступность сайтов (A11y, Accessibility) — это всеобъемлющая практика, позволяющая людям с различными ограничениями пользоваться сайтами. Когда сайты правильно спроектированы, разработаны и отредактированы, как правило, все пользователи имеют равный доступ к информации и функциональности. Википедия.

💡 Напутствие

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

📖 Темы и идеи

git

Git — это бесплатная распределенная система контроля версий с открытым исходным кодом, предназначенная для быстрой и эффективной работы с проектами любого размера. Git.

💡 Напутствие

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

📖 Темы и идеи

Node и npm

Node.js — это кроссплатформенная среда исполнения JavaScript с открытым исходным кодом, которая выполняет JS-код вне браузера. JavaScript используется в основном для реализации функциональности на клиентской стороне. Скрипты, написанные на JavaScript, встроены в HTML страницы и выполняются на стороне клиента в браузере пользователя. Node.js позволяет разработчикам использовать JavaScript для написания инструментов по работе с командной строкой и для серверных скриптов — запуска скриптов на стороне сервера для создания динамического содержимого страницы перед её отправкой в браузер пользователя. Следовательно, Node.js представляет собой парадигму «JavaScript везде», объединяющую разработку веб-приложений вокруг единого языка программирования, а не разных языков для скриптов на стороне сервера и на стороне клиента. Википедия.

💡 Напутствие

Хотя 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 помогает хорошо организовать большие таблицы стилей. Также можно быстро запускать маленькие CSS-файлы с помощью библиотеки стилей Compass. Sass Reference

💡 Напутствие

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

📖 Темы и идеи

Bootstrap

Альтернативы: Foundation, Bulma, Materialize.

Bootstrap — это бесплатный фронтенд-фреймворк с открытым исходным кодом для разработки сайтов и веб-приложений. Он содержит шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, навигации и других компонентов интерфейса, а также дополнительные расширения JavaScript. Википедия.

💡 Напутствие

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

📖 Темы и идеи

БЭМ

Методология Блок, Элемент, Модификатор (обычно называемая БЭМ) — это популярное соглашение об именах для классов в HTML и CSS. Цель этого соглашения заключается в том, чтобы помочь разработчикам лучше понять взаимосвязь между HTML и CSS в проекте. BEM.info.

💡 Напутствие

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

📖 Темы и идеи

Gulp

Gulp — это инструментарий для автоматизации болезненных или трудоемких задач вашего процесса разработки, так что вы можете забыть о рутине и просто творить. Gulpjs.com

💡 Напутствие

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

📖 Темы и идеи

Webpack

По своей сути Webpack представляет собой пакет статических модулей для современных JavaScript-приложений. Когда Webpack обрабатывает ваше приложение, он самостоятельно строит граф зависимостей, который включает в себя каждый модуль, в котором нуждается ваш проект, и генерирует один или несколько пакетов. Webpack.js.org.

💡 Напутствие

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

📖 Темы и идеи

ESLint

ESLint — это утилита для линтинга JavaScript с открытым исходным кодом, изначально созданная Николасом Закасом в июне 2013 года. Линтинг кода — это тип статического анализа, который часто используется для поиска проблемных кусков кода, которые не соответствуют определенным рекомендациям по стилю. Для большинства языков программирования существуют линтеры, и компиляторы иногда включают линтинг в процесс компиляции. Eslint.org.

💡 Напутствие

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

📖 Темы и идеи

React

Альтернативы: Vue, Angular, Ember.

React (также известный как React.js или ReactJS) — это JavaScript-библиотека для создания пользовательских интерфейсов. Он разрабатывается командой Facebook и сообществом отдельных разработчиков и компаний. React можно использовать в качестве основы при разработке одностраничных или мобильных приложений. Сложные приложения React обычно требуют использования дополнительных библиотек для управления состоянием, маршрутизации и взаимодействия с API. Википедия.

💡 Напутствие

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

📖 Темы и идеи

Redux

Redux — это контейнер с предсказуемым состоянием для JavaScript-приложений. Он помогает вам писать приложения, которые ведут себя согласованно, работают в разных средах (клиентских, серверных и собственных) и легко тестируются. Кроме того, он предоставляет отличные возможности для разработчиков. Redux.js.org

💡 Напутствие

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

📖 Темы и идеи

Jest

Jest — это восхитительная среда тестирования JavaScript с упором на простоту. Он работает с проектами, использующими: Babel, TypeScript, Node, React, Angular, Vue и другие! Jestjs.io

💡 Напутствие

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

📖 Темы и идеи

TypeScript

Альтернатива: Flow.

TypeScript — это язык программирования с открытым исходным кодом, разработанный и поддерживаемый Microsoft. Это расширение JavaScript со строгим синтаксисом, которое добавляет в язык необязательную статическую типизацию. TypeScript предназначен для разработки больших приложений и транскомпилируется в JavaScript. Поскольку TypeScript это расширение JavaScript, программы JavaScript также являются допустимыми программами TypeScript. TypeScript может использоваться для разработки JavaScript-приложений как для выполнения на стороне клиента, так и на стороне сервера (Node.js). Википедия.

💡 Напутствие

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

📖 Темы и идеи

Next.js

Next.js — это минималистичный фреймворк для серверных React-приложений. Next.js

💡 Напутствие

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

📖 Темы и идеи

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

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

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

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

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

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

Я нашел следующие абсолютно бесценные при обучении разработке источники:

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

Особая благодарность Natalia Ryzhova за редактуру! 📝

Junior Developer
Frontend
Learning To Code
React
Web Development

--

--

Workafrolic (±∞)

Written by Workafrolic (±∞)

3.6K Followers

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю.

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams