Чем frontend отличается от backend’а? объясняем на мемах

Содержание:

Впечатления от бэкенда после фронтенда

Нет работы с UI. Вообще. Раньше приходилось убивать время на исправление багов в UI, сейчас – нет. Минусы такого положения – конечный пользователь не видит результатов конкретно моей работы, как это было с фронтом. Я пытался определить, что же сложнее – бэк или фронт, и понял, что (лично для меня) тяжелее всегда было работать с многопоточностью и сетевым стеком

И тут уже не так важно – за фронт ты или за бэк. На фронте я просто столкнулся с такими задачами впервые, без подготовки, а на бэкенде уже с каким-никаким опытом

Набраться опыта и делать что-то крутое можно в любой области, было бы желание и усидчивость, здесь практики сходятся – сделать что-то (и сделать хорошо), и чтобы это работало надежно и легко поддерживалось. Причем для бэкендера не столь критично наличие или отсутствие опыта во фронте. Если разраб учитывает все мелочи, сам продумывает корнер-кейсы и в целом понимает, как будут использовать его API, то он и без фронт-знаний сделает все, как надо.

Мне проще обнаруживать возможные проблемы как раз потому, что я знаю особенности реализации наших мобильных приложений. Но это не какая-то сверхспособность – это набор знаний, которыми так или иначе обрастает любой бэкендер, который часто работает с фронтами.

Что нужно знать и уметь бэкенд-разработчику

Практическое руководство как стать senior frontend developer

Базовый набор знаний, которыми должен обладать backend-developer:

знание как минимум 1 языка программирования, лучше – нескольких;
умение работать с серверами;
знание API;
умение писать код;
владение популярными веб-фреймворками;
умение тестировать продукт;
знание основ сетевой безопасности;
навыки работы с базами данных;
базовые знания фронтенда, т. к. обе части проекта должны работать согласованно.

Дополнительным плюсом будет:

владение JavaScript;
модель OSI;
администрирование UNIX или Linux-систем;
умение работать с HTTP;
умение читать, составлять и оценивать ТЗ.

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

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

Личные качества

Бэкендеру в работе пригодятся такие качества, как:

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

Эти качества позволят выполнять работу качественно, получать от нее удовольствие и удовлетворение.

Что нужно знать начинающему front-end разработчику

Объясняем на пальцах, что такое очно-заочная форма обучения

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

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

Также начинающий front-end разработчик должен знать, где именно он может получить соответствующие знания и образование, подкрепленное дипломом. Во-первых, он может поступить в Международный учебный центр IT-образования «Компьютерная академия Шаг». Здесь только очное отделение, а выпускники получают соответствующие сертификаты и международный диплом. На сегодняшний день филиалы академии представлены в шестнадцати странах мира. Во-вторых, можно пройти онлайн-курсы в Образовательном IT-портале GeekBrains. За шестинедельный курс здесь можно пройти стажировку.

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

Чем занимаются фронтенд-разработчики

Чем гвэ отличается от егэ?

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

Что нужно знать фронтенд-разработчику:

Языки: HTML, CSS, JavaScript, всё чаще требуется TypeScript.
Фреймворки: React, Vue или Angular. Нужно уметь работать с одним из них.
Дополнительные инструменты: работа с внешними расширениями через NPM или Yarn, настройка сборки фронтенда (например, Webpack).

Рассмотрим типичную задачу младшего фронтенд-разработчика.

Предположим, у команды есть проект на React и TypeScript. В него нужно добавить компонент, выводящий на страницу иконку. Иконка может быть разных цветов в зависимости от ситуации, в которой она появляется:

‘primary’ — основной цвет,

‘secondary’ — вспомогательный цвет,

‘error’ — цвет в случае ошибки,

‘success’ — цвет в случае успешной операции.

Все цвета заданы в дизайн-системе. Связь названий и цветов описана в файле utils.ts. Выглядит он примерно так:

// utils.ts

type TIconTypes = 'secondary' | 'primary' | 'error' | 'success';

export type TIconProps = { type: TIconTypes, onClick?:() => void; };
export const getIconColor = (type: TIconTypes) => {

  return `${
    type === 'secondary'
      ? '#8585AD'
      : type === 'error'
      ? '#E52B1A'
      : type === 'success'
      ? '#00CCCC'
      : '#F2F2F3'
  }`;
};

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

// icon.tsx

import React from 'react';
import { getIconColor, TIconProps } from './utils';

export const Icon = ({ type }: TIconProps) => {
  return (
    <svg
      xmlns="<http://www.w3.org/2000/svg>"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={getIconColor(type)}
    >
      <path d="/* здесь будет длинный набор чисел, описывающих svg-изображение */"/>
    </svg>
  );
};

В файле icon.tsx создаем саму иконку так, чтобы при встраивании этого компонента в любое место приложения можно было задать ее состояние.

Это лишь небольшой пример задачи, но он наглядно демонстрирует необходимость понимания дополнительных технологий помимо HTML, CSS и JavaScript: например, React и TypeScript. То, какие технологии потребуются на конкретном проекте, определяет стек, принятый внутри команды или компании. Его нужно либо знать, либо быть готовым быстро в него погрузиться.

JavaScript шаблоны

Шаблоны проектирования — это архитектурные конструкции, выработанные разработчиками после многократных столкновений со структурно одинаковыми задачами. Чтобы девелоперы каждый раз не изобретали “велосипеды” и не писали спагетти-код, как раз и были придуманы специальные паттерны, позволяющие оперативно решать часто встречающиеся задачи. Соответственно, уместное применение шаблонов говорит о высокой грамотности разработчика, а также делает код легко поддерживаемым и расширяемым.

Библиотека jQuery

JavaScript-библиотека, которая содержит множество готовых решений. То, что раньше решалось на JS при помощи десятков строчек кода теперь компактно собрано в одной команде — таково преимущество jQuery, упрощающее работу веб-программиста. Если вы владеете языком JavaScript на уровне курса JavaScript Advanced, изучение данной библиотеки для вас не составит труда.

Сегодня jQuery нечасто используется в новых решениях. Однако, если вам придется работать с уже существующими веб-проектами, вы гарантированно встретитесь с этой библиотекой, и её знание будет дополнительным преимуществом как в глазах работодателя, так и с точки зрения экономии вашего времени на изучение данной технологии. Здесь вам поможет одноименный курс jQuery на ITVDN.

Как взаимодействуют backend и frontend?

Надпись на листе: Ошибка 500 (внутренняя ошибка сервера). Источник

500 Internal Server Error — распространенная ошибка, которая появляется из-за дисконнекта frontend и backend. Она означает, что сервер не может обработать запрос пользователя, а браузер не может сообщить, что именно пошло не так.

Причиной может быть ошибка в коде или скрипте сайта или элементарная нехватка оперативной памяти

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

Перевод: я в backend: завершил работу над backend всего за один день / Я работаю во frontend: как, черт возьми, выровнять эту кнопку по центру? Источник

Когда frontend понимает, как работает серверная часть сайта и какие ошибки могут возникнуть, а backend имеет представление о работе интерфейса — это значительно упрощает работу в команде. Но это не значит, что они должны разбираться в деталях и выполнять обязанности друг друга (особенно если им за это не доплачивают).

Перевод: Когда в твоей компании нет frontend-разработчика и тебя просят писать на CSS (язык разметки для frontend) / У меня есть вопрос. К богу. ЗА ЧТО? Источник

Frontend- и backend-разработчиков одинаково бесит, когда работодатели не различают их функционал. Эта проблема возникает из-за стереотипа «тыжпрограммист», когда backend-разработчика просят поправить кнопку на сайте, а frontend — разобраться с ошибкой на сервере. Избавиться от этой проблемы помогает грамотный проджект-менеджер, который точно знает зону ответственности каждого специалиста в команде и обращается с задачами к нужным людям.

Как выбрать сферу и начать в ней развиваться

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

Бэкенд основывается на других вещах: на первый план выходят понятия стабильности работы и отказоустойчивости сервисов, скорости их работы, безопасности хранения и передачи данных, оптимизации производительности процессов в программах. Такая деятельность подойдет скрупулёзному человеку, который проявляет внимательность к деталям и может предположить самые неожиданные исходы в различных ситуациях.

Фронтенд-разработчику стоит начать с изучения HTML, CSS, JavaScript. Бэкенд-разработчику нужно изучить хотя бы один из скриптовых языков (например, Python или Ruby), разобраться с основами работы сетей и интернета. Также нужно будет освоить взаимодействие с реляционными и нереляционными базами данных на выбранном языке.

Если человек начинает с нуля, то стоит прочесть книгу Чарльза Петцольда «Код. Тайный язык информатики» — в ней простым языком рассказывается о том, как работает компьютер. Она пригодится как начинающим бэкендерам, так и фронтендерам. Для старта в обеих областях достаточно знания школьной математики и английского.

Dependency Injection. Adopt

Мы рекомендуем использовать паттерн DI и вместе с ним IoC-контейнеры. Кажется, что DI не сильно распространен во фронтенд-разработке за пределами Angular, но у нас в компании этот паттерн получил широкий охват, в том числе на проектах с React, где мы используем собственный фреймворк Tramvai.js, который построен на DI.

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

Нужно понимать, что DI повышает порог входа в проект. В некоторых случаях, особенно если у вас множество простых и уникальных задач, когда меньше возможности что-либо переиспользовать, смысл использовать DI уменьшается.

Наш коллега Сергей Нестеров сделал доклад Dependency injection в React-приложении — советуем посмотреть.

Язык программирования JavaScript (JS)

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

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

Bootstrap 4

Это пользующаяся популярностью платформа, которая способствует разработке адаптивных веб-приложений. Bootstrap используют для построения сайтов и интерфейсов администраторских панелей. Среди плюсов данной платформы:

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

С изучением Bootstrap версии 4 поможет одноименный видео курс на ITVDN.

Будущее фронтендера

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

Node.js/Express

▍Сильные стороны Node.js

Появление Node.js сделало возможным фуллстек-разработку веб-проектов на JavaScript. В результате в распоряжении разработчиков серверных частей приложений оказались и сильные возможности JavaScript, и наработки экосистемы JS, библиотеки, которыми стало реально воспользоваться в серверном окружении.
JavaScript-код, аналогичный по функционалу, например, коду, написанному на C, оказывается компактнее. Производительность JavaScript-кода при этом достаточно высока для применения его в проектах, в которых важна скорость работы кода.
Код клиентских и серверных частей проектов легче поддерживать в согласованном состоянии, так как и там и там используется один и тот же язык.
Один и тот же код можно совместно использовать и на клиенте, и на сервере.
Благодаря существованию модулей Node.js, которые, в сущности, представляют собой особым образом оформленные фрагменты кода, разработчики могут с удобством использовать в своих проектах чужой код, а так же собственные наработки.
Платформа Node.js, и, соответственно, основанные на ней фреймворки, отличаются нетребовательностью к ресурсам и масштабируемостью. Именно поэтому Node.js — это платформа, к которой часто прибегают те, кто пользуется микросервисными архитектурами.
Эта платформа хорошо подходит для разработки микросервисов ещё и из-за существования системы модулей Node.js, которые можно представить себе в виде строительных блоков серверных приложений.
В Node.js JavaScript код компилируется в машинный код, что позволяет получить гораздо более высокую производительность, чем при интерпретации кода. Сообщество JavaScript-разработчиков видит постоянное улучшение производительности Node.js за счёт того, что Google постоянно работает над совершенствованием V8.
Благодаря тому, что в Node.js имеется система ввода-вывода, не блокирующая главный поток, эта платформа демонстрирует высокую производительность. Достойная скорость обработки запросов достигается благодаря использованию JavaScript-механизмов конкурентного однопоточного выполнения кода.
Node.js — это опенсорсный проект, вокруг которого собралось огромное сообщество разработчиков. Это значит, что тот, кто столкнётся с какой-то проблемой, сможет достаточно быстро найти её решение.
Node.js, в ближайшем будущем, может стать платформой, которую будут использовать для проведения «тяжёлых» вычислений, наподобие тех, которые применяются для решения задач машинного обучения.

Методологии разработки Agile/SCRUM

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

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

SCRUM является одной из наиболее популярных реализаций agile-подхода. Ему успешно находят применение многие команды (и не только из области IT!), а потому знание особенностей работы со SCRUM-моделью — частый пункт во множестве IT-вакансий. Познакомиться с данной техникой ведения разработки вы сможете при помощи курса “Методологии управления проектами, Вступление в Scrum”.

Что читать для знакомства с фронтендом и бэкендом

Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — frontend или backend — в вашем случае.

Front-end

HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств — Фрейн Бен

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

JavaScript. Шаблоны – Стоян Стефанов

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

CSS. Каскадные таблицы стилей. Подробное руководство – Эрик А. Мейер

В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.

Accessibility for everyone – Laura Kalbag

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

Back-end

Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов – Давид Скляр

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Ruby on Rails для начинающих. Изучаем разработку веб-приложений на основе Rails – Майкл Хартл

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby

Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.. Django 2.1

Практика создания веб-сайтов на Python – Владимир Дронов

Django 2.1. Практика создания веб-сайтов на Python – Владимир Дронов

Как и в прошлой книге, для чтения этой книги необходимо хотя бы на базовом уровне владеть связкой HTML-CSS-JavaScript и Python. Книга примечательна тем, что содержит минимум воды и большое разнообразие примеров.

Spring в действии – Крейг Уоллс

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Робин Никсон

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

Где найти backend программиста на проект?

В интернете есть много профильных ИТ-сайтов, на которых можно бесплатно разместить объявление о поиске разработчика.
Посмотрите каталог веб-программистов. При помощи фильтров в каталоге можно найти разработчиков, владеющих нужными вам технологиями.
Добавьте проект на биржу для программистов. Добавление вакансий на ней – бесплатное.

Frontend-разработчик

Front-end – «лицевая» часть сайта: всё, что видит пользователь. Меню, текст, картинки, раздражающие (или, если сделано хорошо, не раздражающие) рекламные баннеры – всем этим занимается frontend-разработчик. В разработке дизайна он тоже участвует: «рисует» всё, конечно, веб-дизайнер, но контролирует его работу именно фронтенд.

Задачи frontend-разработчика

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

Три основных инструмента frontend-разработчика: HTML, CSS, JavaScript.

Как стать back-end разработчиком

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

Найти работу в данной сфере довольно легко: на рынке большой спрос на высококвалифицированных специалистов, и крупные компании предлагают выгодные условия сотрудничества

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

Главная задача, которая ставится перед back-end разработчиком – продумывание и создание логики и систем, позволяющих продвигаемой платформе функционировать без каких-либо проблем.

Trunk based development (TBD). Assess

TBD — это модель ветвления, которая диктует частые интеграции и отсутствие долгоживущих веток. Для реализации этих требований должны быть развиты процессы и инфраструктура разработки.

В TBD ветки с новым кодом вливаются в основную ветку не реже чем раз в 24 часа. С помощью этого команда получает ускоренный цикл обратной связи по задаче. В более распространенных моделях ветвления изменения дольше копятся, часто в момент попадания изменений в основную ветку объявляются неожиданные проблемы, исправление которых несет дополнительную сложность из-за позднего времени их обнаружения. В TBD все изменения делаются максимально атомарными, интегрируются с самой новой версией основной ветки как можно чаще, что создает определенные требования к архитектуре приложения, такие как поддержка Feature Flags, чтобы иметь возможность отключать из исполнения еще не завершенные задачи.

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

Совместно с TBD ценность парного программирования возрастает за счет важности код-ревью прямо в моменте создания кода и стремления выявить ошибки в коде на ранних этапах. При использовании TBD участники команды лучше видят, кто над чем работает, а не ждут крупного логического этапа для ревью

Модель TBD является более командной за счет атомарных изменений короткими циклами, что позволяет выявлять проблемы на самом раннем этапе работы, что в сумме повышает эффективность команды. TBD хорошо приживется в командах со зрелой инженерной культурой.

С чего начать и что читать? Чек-лист обучения

1. Как работает Веб

How the Web Works: A Primer for Newcomers to Web Development or anyone really (FreeCodeCamp);
Как работает Веб — Mozilla (MDN);
Всё, что нужно знать про HTTP.

2. Среда разработки

VSCode — бесплатный быстрый редактор с большим количеством дополнений для разработки;
JetBrains WebStorm — полноценная IDE, есть пробный период и возможность получить доступ по студенческой лицензии;
Если у вас возникает потребность отправить другому человеку фрагмент кода, быстро проверить или сохранить код в сети, можно воспользоваться онлайн-редактором, например, Codepen.

3. Основы HTML

Руководство по HTML — Mozilla (MDN);
Справочник по HTML, уроки по HTML и CSS — Webref;
FreeCodeCamp — Learn to code at home — очень полезный источник для практического изучения HTML, CSS, JS и др. (пошаговые задачи в интерактивном режиме обучения);
Введение в Chrome DevTools. Панель Elements для просмотра HTML-элементов сайта;
Семантика (HTML5 Semantic Tags: What Are They and How To Use Them!, рус. перевод);
Доступность (Writing HTML with accessibility in mind, рус. перевод).

4. CSS

CSS и CSS3. Свойства для форматирования HTML элементов — Html5Book;
Cascading Style Sheets (CSS) — Mozilla (MDN);
Справочник по CSS — Webref;
Инструменты разработчика Chrome DevTools для просмотра стилей;
Вёрстка на Flexbox в CSS. Полный справочник (перевод и оригинал на CSS Tricks);
10 modern layouts in 1 line of CSS от Google;
БЭМ Методология;
БЭМ для начинающих. Очевидные и неочевидные вопросы верстки.

5. Система контроля версий Git

Интерактивный тур по GIT для начинающих — GitHowTo;
Github — крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки.

6. Язык программирования JavaScript

Современный учебник JavaScript — отличный источник с множеством примеров;
Серия книг «Вы не знаете JS» — подробный гид по основным механизмам языка (каждая книга подробно разбирает часть языка);
Не забывайте про уже упомянутый FreeCodeCamp с задачками для практики JS;
Онлайн-курс по JavaScript для начинающих в виде рассылки писем от Дэна Абрамова (разработчик из Facebook, создатель Redux и Create React App);
Chrome Dev Tools. Отладка JavaScript кода.

11. Препроцессоры CSS

Sass (SCSS);
Stylus;
Less.

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

PostCSS

стандарт компании Airbnb

Prettier;
ESLint;
EditorConfig;
Husky.

14. Изучение фреймворка/UI-библиотеки

официальной документацииModern React and Reduxпроверка типов с помощью PropTypesJSDocцикл статейReduxпереводомGetting Started with Reduxдокументация

16. Углубленное

Как браузеры рендерят сайт (Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015);
Как работают браузеры — Html5Rocks;
Филипп Робертс: Что за чертовщина такая event loop? | JSConf EU 2014;
CSS-модули (статья Glen Maddern);
Оптимизация производительности фронтенда;
Вводный курс по VSCode для JS разработчиков (Владилен Минин);
Руководство для начинающих по HTTP и REST;
Что такое CORS;
Паттерны проектирования (книга Javascript Design Patterns);
Progressive Web Applications;
Redux-Saga для продвинутого управления состоянием React-приложения.