YouIT
Trainee Junior Middle Senior
Язык разметки HTML & HTML5
Таблицы стилей CSS & CSS3
Язык программирования JavaScript
JavaScript и Браузеры
SPA-фреймворки React.js, Angular.js, Vue.js и JS-библиотеки
Рефакторинг и Контроль качества кода
Алгоритмы и Структуры Данных
Парадигмы программирования и Объектно-ориентированное программирование
Принципы SOLID и Шаблоны проектирования GoF
Архитектурные шаблоны и Атрибуты качества (Quality Attributes)
Серверная часть и Базы данных
Веб-безопасность, Шифрование данных, OWASP
Системы контроля версий: Git, Mercurial
Гибкие методологии разработки / Эстимации / Требования

Вступайте в сообщества ВКонтакте, Фейсбук или Телеграм, чтобы:
- получать уведомления о любых улучшениях в Картах Знаний
- принимать активное участие в формировании новых Карт Знаний или улучшении существующих


Язык разметки HTML & HTML5

Уровень Темы Материалы
Структура HTML-документа | Элемент DOCTYPE | DOM | Основные HTML-теги: div, span, table, html, head, title, body, script, a, form, input, textarea, p, ul, h1...h6, select... | Блочные и строчные элементы Структура HTML-кода Элемент DOCTYPE HTML-теги Блочные и строчные элементы DOM-дерево Разница между тегами div и span Книга HTML, XHTML, and CSS Bible, Steven M. Schafer
Семантическая вёрстка, Теги HTML5: article, aside, footer, header, main, mark, nav, section, summary... | Тег base Семантические элементы HTML5 HTML5 Семантическая вёрстка Как использовать HTML-тег base Учебник HTML5
Работа с формами | Тег form и атрибуты action, method, novalidate | Теги legend, fieldset | Тег input и атрибуты type (значения text, radio, submit, button, checkbox, date, datetime, email, hidden, url, range), placeholder, name, value, required, readonly HTML Forms HTML. Элементы форм Формы в HTML Книга HTML, XHTML, and CSS Bible, Steven M. Schafer
Сравнение табличной и блочной верстки Спор между сторонниками табличной верстки и верстки блоками Почему блочная верстка лучше табличной?
Понимание элементов frame и iFrame Iframe и Frame — что это такое и как лучше использовать фреймы в Html Что Такое iFrame?
Элемент Canvas, Отображение текста, линий, фигур, градиентов, изображений HTML5 Canvas
Шаблоны проектирования HTML Книга Pro CSS and HTML Design Patterns: Michael Bowers, Глава 2
Веб компоненты (Web-components): Пользовательские элементы (Custom elements), Теневая модель документа (Shadow DOM), Шаблоны (Templates) Веб-компоненты Веб-компоненты в реальном мире An Introduction to Web Components
Работа с аудио и видео | Теги audio и video HTML5-видео Видео и аудио контент HTML YouTube Videos
Обзор основных стандартов W3C W3C Что это или что такое стандарты HTML. Урок 2
Браузерная совместимость семантических элементов Браузерная совместимость семантических элементов
Масштабируемая векторная графика (Scalable Vector Graphics, SVG) SVG Tutorial Знакомство с SVG-графикой
Понимание основных принципов SEO | Оптимизация HTML-страниц под поисковые системы | SPA vs Web-site для поисковых систем Оптимизация для новичков: HTML-теги и атрибуты в SEO Советы по оптимизации HTML-кода сайта Как сделать SPA-сайты SEO-Friendly?
Основы 3D графики с использованием WebGL (Web-based Graphics Library) Введение в WebGL
Использование API геолокации Зачем нужна геолокация посетителей? Использование API IP-геолокации HTML5 Geolocation

Контрольные вопросы:


Таблицы стилей CSS & CSS3

Уровень Темы Материалы
Основы CSS: Внешние vs Внутренние vs Встроенные стили, Виды селекторов, Группировка селекторов, Наследование и каскад Основы CSS Книга Pro CSS and HTML Design Patterns: Michael Bowers, Глава 3
Блочная модель CSS: Свойства width, height, margin, padding, border, background, overflow, visibility | Свойство display: static, inline, block, inline-block | Блочные и строчные элементы Книга Pro CSS and HTML Design Patterns: Michael Bowers, Главы 4-5 CSS блочная модель Блочные и строчные элементы
Псевдо-элементы (::before, ::after, ::first-letter. ::first-line, ::selection) и псевдо-классы (:active, :enabled, :focus, :hover, :nth-child(), :visited, :required) Книга Pro CSS and HTML Design Patterns: Michael Bowers, Глава 3
Работа с текстом и шрифтами: Свойства text-align, text-indent, letter-spacing, hyphens, word-break, white-space... | Подключение сторонних шрифтов | Оформление текста: Свойства text-shadow, text-decoration... CSS-текст Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон CSS-шрифты CSS3-оформление текста
Фоны в CSS: Свойства background-color, background-repeat, background-image... | Рамки в CSS: Свойства border-style, border-color, border-width... CSS-фон CSS-рамка
Цвета в CSS: RGB, RGBA, HSL, HSLA | Свойства color, transparent CSS-цвета
Оформление таблиц | Табличные свойства в CSS: table-layout, border-collapse, border-spacing, empty-cells... CSS-таблицы
Единицы измерения px, pt, pc, mm, in, ex, em, cm, % CSS - Measurement Units
Фреймворк Twitter Bootstrap: Подключение, Система сеток (Grid System), Компоненты, Иконки Bootstrap 4 Учебник Справочник на русском примеры Bootstrap Introduction
Адаптивная верстка: Понятие, Необходимость, Техники, Инструменты Адаптивная верстка сайтов: обзор подходов и CSS фреймворков Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы
Позиционирование элементов в CSS | Свойства position (static/absolute/relative/fixed/sticky), float (left/right), clear, top/left/right/bottom | Слои и свойство z-index Книга Pro CSS and HTML Design Patterns: Michael Bowers, Главы 7-9 CSS блочная модель Блочные и строчные элементы CSS-позиционирование CSS - Layers
Системы CSS Grid и Flexbox | Многоколоночная верстка CSS Flexbox CSS Grid Layout: С чего начать CSS3 columns CSS Grid CSS flexbox
CSS3: Анимации, Трансформации, Переходы, Тени, Градиенты CSS3-анимация CSS3-трансформации CSS3-переходы CSS3-тень блока CSS3-градиент
Медиазапросы в CSS3: Свойства @import и @media, Логические операторы CSS3-медиазапросы
CSS-препроцессоры Sass (SCSS) и Less Less. Путеводитель для новичков
Объявление и использование CSS-переменных Нативные переменные в CSS. Уже пора… Everything you need to know about CSS Variables
Правила в CSS: @import, @charset, @font-face, !important CSS - @ Rules
Организация CSS-кода с использованием OOCSS, SMACSS, and BEM Organizing CSS: OOCSS, SMACSS, and BEM All CSS methodologies compared examples at one place.
Относительные единицы измерения в CSS3 Единицы измерения vh, vw, vmin, vmax
Написание кросс-браузерного CSS-кода CSS Browser Support Reference A Guide To CSS Support In Browsers 5 CSS techniques for better cross-browser compatibility
CSS-оптимизация веб-страницы для печати на принтере Инструкция: CSS-оптимизация веб-страницы для печати CSS Printing - @media Rule

Контрольные вопросы:


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

Уровень Темы Материалы
Предназначение JavaScript | JavaScript vs Java | JavaScript vs EcmaScript Введение в JavaScript Справочники и спецификации Книга Professional Javascript for Web Developers, Nicholas Zakas, Глава 1 Книга The Definitive Guide, David Flanagan, Глава 1
Основы языка JavaScript: Синтаксис, Ключевые слова, Переменные, Типы данных | Массивы | Объекты | null vs undefined | Отличия ссылочных типов данных от значимых | Оператор typeof | Операторы | Условия | Циклы | Функции Основы JavaScript Книга Professional Javascript for Web Developers, Nicholas Zakas, Главы 2-8
Правила преобразования примитивных типов данных в JavaScript | Явное и неявное преобразования Преобразование типов Неявное преобразование типов в JavaScript. Сколько будет !+[]+[]+![]?
Области видимости в JavaScript | Подъем переменных (Function hoisting) | Ключевые слова var, let и const Область видимости переменных в JavaScript В чём разница между var, let и const в JavaScript Книга Professional Javascript for Web Developers, Nicholas Zakas, Глава 4
Ссылочные типы данных | Создание объектов, ключевое слово new, ключевое слово this Книга The Definitive Guide, David Flanagan, Глава 6 Книга Professional Javascript for Web Developers, Nicholas Zakas, Глава 5
Основы сборки мусора в JavaScript Сборка мусора Книга Professional Javascript for Web Developers, Nicholas Zakas, Глава 4
Обработка исключений с помощью ключевых слов try..catch Обработка ошибок, "try..catch"
Использование функций setTimeout и setInterval Планирование: setTimeout и setInterval
Понимание методов обратного вызова (callbacks) | Использование промисов для обработки ответов сервера | Обработка ошибок в промисах Введение: колбэки Промисы Промисы: обработка ошибок
Классы и объекты, Наследование классов, Прототипное наследование, Оператор instanceof | Свойства get и set | Модули: экспорт и импорт Классы Книга The Definitive Guide, David Flanagan, Глава 9 Модули Свойства - геттеры и сеттеры
Статические, приватные и защищенные свойства классов Статические свойства и методы Приватные и защищённые методы и свойства
Флаги и дескрипторы свойств объектов Флаги и дескрипторы свойств
Работа с коллекциями Map и Set Map и Set
Работа с датой и временем, Объект Date Дата и время
Функции: Привязка контекста к функции (call(), apply(), bind()) | Стрелочные функции (Arrow functions) | Понимание Замыканий (Clojures) Привязка контекста к функции Замыкание
Преобразование объектов в примитивы Преобразование объектов в примитивы
Реализация многоуровневых промисов | Использование ключевых слов async и await Цепочка промисов Async/await
Создание пользовательских исключений, Класс Error Пользовательские ошибки, расширение Error
Модули: Динамические импорты, Необходимость, Имплементация Динамические импорты
Работа с асинхронными итераторами и генераторами Асинхронные итераторы и генераторы
Работа с регулярными выражениями в JavaScript, Объект RegExp Регулярные выражения
Работа с объектами Proxy и Reflect Proxy и Reflect
Реализация Каррирования в JavaScript, Необходимость применения Каррирование
Утечки памяти в JavaScript: Причины, Инструменты диагностики, Способы устранения 4 вида утечек памяти в JavaScript и как с ними бороться Eradicating Memory Leaks In Javascript
Работа с коллекциями WeakMap и WeakSet WeakMap и WeakSet
Написание высокопроизводительного JavaScript-кода JS Performance 20 Best Practices for Improving JavaScript Performance

Контрольные вопросы:


JavaScript и Браузеры

Уровень Темы Материалы
DOM-дерево: Структура, Поиск элементов, Навигация по элементам, Модификация дерева DOM-дерево Навигация по DOM-элементам Поиск: getElement*, querySelector* Что такое DOM дерево?
Жизненный цикл HTML-страницы: События DOMContentLoaded, load, beforeunload, unload Страница: DOMContentLoaded, load, beforeunload, unload
Объекты document и window JavaScript Window - The Browser Object Model
Основные браузерные события (click, mouseover, mousemove, submit, focus, keydown, scroll...) | Всплытие (bubbling) и Перехват (capturing) Введение в события Интерфейсные события Формы, элементы управления
Технология AJAX: Необходимость применения, Как использовать Введение в AJAX и COMET AJAX Introduction
Формат JSON: Структура, Правила | JSON vs XML Формат JSON, метод toJSON JSON: основы использования
Внешний и встроенный JavaScript | Ключевые слова async и defer при подключении скриптов Подключение внешних скриптов Скрипты: async, defer
"Куки" (Cookies), Локальное хранилище (Local Storage), Хранилище сессии (Session Storage): Сходства, Отличия, Когда что использовать Что такое файлы cookies и зачем они нужны Cookies, sessionStorage, localStorage: В чем разница
Работа с объектом Promise: API Состояния, Создание цепочек промисов, Обработка ошибок Введение в ES6 Promises, или четыре функции, которые вам нужно знать Promise API
Принципы работы браузеров Принципы работы современных веб-браузеров Важные аспекты работы браузера для разработчиков. Часть 1
Работа с HTML5 Drag and Drop | File API HTML5 Drag and Drop Используем HTML5 File API для работы с файлами в браузере
Работа с IndexedDB API IndexedDB Краткое, но исчерпывающее руководство по IndexedDB
Работа с History API Управление историей браузера
Работа с Web Workers и Service Workers Как работает JS: веб-воркеры и пять сценариев их использования Web Workers vs Service Workers in JavaScript Service Workers: an Introduction
Событийный цикл в JavaScript Событийный цикл: микрозадачи и макрозадачи
Работа с FileSystem API Exploring the FileSystem APIs
Работа с объектом MutationObserver MutationObserver: наблюдатель за изменениями
Необходимость и основные концепции прогрессивных веб-приложений (Progressive Web App, PWA) Основы прогрессивных веб-приложений Ваше первое прогрессивное веб-приложение
Стратегии Mobile First и Offline First Стратегия Mobile First: что это и почему на него стоит обратить внимание? Offline First Offline first подход к созданию веб-приложений

Контрольные вопросы:


SPA-фреймворки React.js, Angular.js, Vue.js и JS-библиотеки

Уровень Темы Материалы
Принципы Одностраничных приложений (Single Page Application, SPA) | SPA vs Web-site Что такое SPA-приложения
Создание простых одностраничных веб-приложений с помощью фреймворков React.js, AngularJS, Vue.js TodoMVC Example Getting Started with Angular: Your First App How to create the React app in 5 minutes?
Понимание предназначения основных инструментов JavaScript-разработчика: NPM, Yarn, Webpack, Karma, Nightwatch.js, Grunt/Gulp, JSLint, Babel... Список инструментов разработчика JavaScript Лучшие инструменты для JavaScript-разработчика
Работа с библиотекой jQuery: использование селекторов, событий, анимаций... Основы jQuery Урок 1. Введение в jQuery. Начало работы
Работа с инструментами Developer Tools в Chrome: Использование консоли, Анализ исходящих запросов, Отладка, Редактирование CSS-кода Chrome DevTools 14 наиболее полезных особенностей Chrome DevTools
Понимание основных элементов SPA-фреймворков:
  • React.js: Components, Lifecycle, State, Props, Refs, Events, Forms, JSX...
  • Vue.js: Instances, Template, Components, Events, Directives...
  • AngularJS: Components, Modules, Data Binding, Event Binding, Templates, Services, Directives, Pipes, Forms, Dependency Injection...
React Tutorial Angular7 Tutorial VueJS Tutorial
Работа с библиотекой Underscore.js/Lodash Lodash
Работа с основными инструментами JavaScript-разработчика:
  • NPM
  • Yarn
  • Webpack
  • Karma
  • Nightwatch.js
  • Grunt/Gulp
  • JSLint/JSHint
  • Babel
Использование Permormance и Memory профайлеров в Chrome DevTools Chrome DevTools
Продвинутая работа с SPA-фреймворками:
  • React.js: Redux, React Fiber, Routing, HOC...
  • Vue.js: Vuex, Vue Router, Mixins, Slots, Lifecycle Hooks, Custom directives...
  • AngularJS: Lifecycle Hooks, NgModule...
3.14 Компоненты более высокого порядка Getting Started with Redux Вступление в архитектуру React Fiber Advanced Vue.js concepts: Mixins, custom directives, and more React.js Продвинутое руководство
Архитектура React/Angular/Vue веб-приложений | Flux In-Depth Overview Разбираемся с Flux, реактивной архитектурой от facebook
Рендеринг на стороне сервера для AngularJS, React.js и Vue.js Server-side Rendering (SSR): An intro to Angular Universal T Руководство по серверному рендерингу Vue.js Server Side Rendering для React App на Express.js
Инструменты визуализации данных: Chartjs, PivotTable.js, Highcharts.js... Chart.js PivotTable.js Examples Highcharts JS

Контрольные вопросы:

Рефакторинг и Контроль качества кода

Уровень Темы Материалы
Что такое Рефакторинг? Чистый код Что такое рефакторинг кода? Основные принципы и правила рефакторинга
Юнит-тесты при рефакторинге Книга Рефакторинг. Улучшение существующего кода, Martin Fowler, Глава 2
Основные Запахи кода (Code Smells): Длинный метод, Большой класс, Длинный список параметров, Дублирование кода, Временное поле Martin Fowler, CodeSmell Запахи кода Collection of javascript code smells Книга Refactoring HTML: Improving the Design of Existing Web Applications
Валидация HTML и CSS кода Валидаторы - проверяем валидность HTML, JS, CSS кода
Стандарты написания кода и соглашение об именовании в JavaScript Стиль написания кода на JavaScript для Uprock: Перевод и расширение JavaScript Style Guide and Coding Conventions
Ключевые техники рефакторинга: Извлечение метода, Встраивание метода, Замена алгоритма, Расщепление переменной, Переименование метода, Инкапсуляция поля, Замена магического числа символьной константой и других. Книга Refactoring Improving the Design of Existing Code by Martin Fowler Приёмы рефакторинга
Другие техники рефакторинга: Удаление управляющего флага, Декомпозиция/Слияние условного оператора Книга Refactoring Improving the Design of Existing Code by Martin Fowler Приёмы рефакторинга
Статические анализатора кода в JavaScript: JSLint, JSHint, ESLint JSLint Статические анализаторы JavaScript и ошибки, от которых они помогут отучиться A Comparison of JavaScript Linting Tools
Процесс проведения, инструменты и лучшие практики процедуры Код-ревью Code review по-человечески (часть 1) Еще одна статья о code review
Документирование кода с помощью комментариев Комментарии Книга Code Complete by Steve McConnell
Метрики качества кода: Цикломатическая сложность, Количество строк кода, Глубина наследования, Число Входящих и исходящих зависимостей класса Метрика программного обеспечения
Сопровождение, рефакторинг и повторное использование унаследованного кода Книга Working Effectively with Legacy Code, Michael Feathers
Как работать с техническим долгом Два вида технического долга и их погашение Управление техническим долгом - Концепция Continuous Inspection
Выполнение Large-scale рефакторинга How To Do Large Scale Refactoring My year of refactoring a large scale AngularJS project…

Контрольные вопросы:

Серверная часть и Базы данных

Уровень Темы Материалы
REST | Клиент-серверная архитектура | HTTP протокол REST Архитектура клиент-сервер Что такое протокол HTTP и как он работает Обзор протокола HTTP
Протоколы клиент-серверной коммуникации: HTTP, HTTPS, HTTP/2, WebSockets WebSocket HTTP vs Websockets: A performance comparison WebSocket
Понимание основных концепций реляционных баз данных: Таблицы, Кортежи, Отношения "один-ко-многим" и "многие-ко-многим", Нормализация, Первичные и Внешние ключи... Что такое реляционная база данных? Основы реляционных баз данных и языка SQL
Написание простых SELECT запросов с использованием операторов WHERE, MIN/MAX/AVG/COUNT, GROUP BY, HAVING, JOIN... Простой оператор SELECT SQL SELECT Statement
Транзакции в реляционных базах данных | Свойства ACID | Уровни изоляции транзакций ACID Уровни изоляции транзакций в SQL. Шпаргалка
Сравнение Нормализации и Денормализации | Техники денормализации баз данных Часть 1. История бизнес-записей Денормализация БД. Зачем? Когда? Как?
Принципы нереляционных баз данных | SQL vs NoSQL | ACID vs BASE Что такое базы данных NoSQL? Нереляционные данные и базы данных NoSQL Транзакции, ACID, CAP

Комментарии (7)

Авторизируйтесь для участия в дискуссии

Google Facebook ВКонтакте
Dmitrii Kulbaka
Dmitrii Kulbaka 7 дней назад
Огромная благодарность за проделанную работу. Лучшая Road-Map по JS Frontend разработке что я встречал. Четко разложено по темам, сама суть, только нужное. Шаг за шагом, пройдя все пункты - 100% уверенный джун .))) А главное очень правильный путь развития. PS А хейтеры пусть учаться гуглить.))) Все платное есть в бесплатно доступе...
0   0
Комментировать
Не комментировать
Алексей Краснов
Алексей Краснов 124 дня назад
Спасибо, оч. хорошая работа! Эх, по бэкенду бы такую полезную вещь!
1   0
Комментировать
Не комментировать
Alexey Prokhin
Alexey Prokhin 161 день назад
Нужно больше ссылок на платные источники! Может сразу ссылка на платный курс?
0   1
Комментировать
Не комментировать
Petesso Deneb
Petesso Deneb 162 дня назад
У Каррирования и "Работа с объектами Proxy и Reflect" ссылка одинаковая
2   0
Комментировать
Не комментировать
YouIT
YouIT 162 дня назад
Спасибо, исправили.
1   0
Комментировать
Не комментировать
Сергей Осинцев
Сергей Осинцев 163 дня назад
Огонь, автору бесконечное уважение
1   0
Комментировать
Не комментировать
Max Pryakhin
Max Pryakhin 163 дня назад
Спасибо за материал!
2   0
Комментировать
Не комментировать