🧩 Карта навыков — что в каких задачах нужно

Матрица навыков × задач. Используй, чтобы видеть compound-эффект: где конкретный концепт впервые появляется и где он снова требуется.

Колонка где впервые — это твой шанс выучить концепт не под давлением. Если пропустил — он догонит в следующей колонке, но уже среди других новых вещей.

Обозначения

  • 🆕 — концепт впервые требуется в этой задаче
  • 🔁 — концепт переиспользуется (compound)
  • 🔓 — опциональный
  • ❌ — не нужен
  • — — не применимо

CSS

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
Flexbox + Grid 🆕 🔁 🔁 🔁 🔁 — 🔁
Media queries / responsive 🆕 🔁 🔁 🔁 🔁 — 🔁
@keyframes анимации 🆕 🔁 🔁 🔓 🔓 — 🔁
CSS transitions 🆕 🔁 🔁 🔓 🔓 — 🔁
CSS transforms 🆕 🔁 🔁 🔓 🔓 — 🔁
Псевдоклассы (hover, checked) 🆕 🔁 🔁 🔁 🔁 — 🔁
Относительные единицы (rem/em/vh/vw/fr) 🆕 🔁 🔁 🔁 🔁 — 🔁
CSS-переменные 🔓 🔓 🆕 🔓 🔓 — 🔓
Mobile-first подход 🔓 🆕 🔁 🔁 🔁 — 🔁
Sass ❌ 🔓 🔓 🔓 🔓 — 🔓

Ссылки: Flexbox vs Grid · Media queries · Keyframes · transition -- плавные переходы · transform -- rotate, scale, translate · Псевдоклассы · CSS переменные · Mobile-first подход · Sass

HTML

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
Семантическая вёрстка 🔓 🆕 🔁 🔁 🔁 — 🔁
Формы 🔓 🔓 🆕 🆕 🆕 — 🆕
A11y базы — 🆕 🔁 🔁 🔁 — 🔁

Ссылки: Семантическая разметка · Формы в HTML · Доступность -- основные принципы

JavaScript — базис

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
DOM API ❌ 🆕 (P3) 🔁 🔁 🔁 — 🔁
Манипуляция DOM ❌ 🆕 🔁 🔁 🔁 — 🔁
Делегирование событий ❌ 🆕 🔁 🔁 🔁 — 🔁
События (click/input/submit) ❌ 🆕 🔁 🔁 🔁 — 🔁
Методы массивов ❌ 🔓 🆕 🔁 🔁 🔁 🔁
Деструктуризация ❌ 🔓 🔓 🆕 🔁 🔁 🔁
Spread и Rest ❌ 🔓 🔓 🆕 🔁 🔁 🔁
Замыкания (Closures) ❌ 🔓 🆕 🔁 🔁 🔁 🔁
Strict mode ❌ 🔓 🆕 🔁 🔁 🔁 🔁
Arrow / Function Declaration ❌ 🔓 🆕 🔁 🔁 🔁 🔁
Модули (import/export) ❌ ❌ 🔓 🆕 🔓 🔁 (CJS) 🔁

Ссылки: _MOC DOM · Манипуляция DOM · Делегирование событий · События · Методы массивов -- map, filter, reduce · Деструктуризация · Spread и Rest · Замыкания (Closures) · Strict mode · Arrow Function · Function Declaration · Модули -- import и export

JavaScript — асинхронность

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
Promise ❌ ❌ 🔓 🆕 🔓 🔁 🔁
async/await ❌ ❌ 🔓 🆕 🔓 🔁 🔁
Fetch API ❌ ❌ 🔓 🆕 ❌ ❌ 🔁
Event Loop ❌ ❌ 🔓 🔓 🔓 🆕 🔁
Error handling async ❌ ❌ 🔓 🆕 🔓 🔁 🔁
AbortController ❌ ❌ ❌ 🔓 ❌ ❌ 🔓

Ссылки: Promise · async-await · Fetch API · Event Loop · Error handling · AbortController

Браузерные API

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
localStorage ❌ ❌ ❌ 🆕 🔁 — 🔓
Web Crypto API ❌ ❌ ❌ 🆕 ❌ ❌ ❌
HTMLAudioElement ❌ ❌ 🔓 🆕 ❌ ❌ ❌
HTMLVideoElement ❌ ❌ 🔓 (JS30-4) ❌ ❌ ❌ ❌
Canvas API ❌ ❌ 🔓 ❌ ❌ ❌ ❌
Web Audio API ❌ ❌ 🔓 (JS30-1) ❌ ❌ ❌ ❌
DOMParser ❌ ❌ ❌ 🆕 ❌ ❌ ❌
requestAnimationFrame ❌ ❌ 🔓 ❌ ❌ ❌ 🆕
History API ❌ ❌ ❌ 🆕 🔓 ❌ 🔁

Ссылки: Web Storage -- localStorage и sessionStorage · Web Crypto API · HTMLAudioElement · HTMLVideoElement · Canvas API основы · Web Audio API · DOMParser · requestAnimationFrame · History API

Паттерны

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
Debounce / Throttle ❌ ❌ ❌ 🆕 ❌ ❌ 🔓
State management (vanilla) ❌ ❌ 🔓 🆕 🔁 — 🔁
Pagination ❌ ❌ ❌ 🆕 ❌ — 🔁

Ссылки: Debounce и Throttle для DOM-событий · State Pattern

Node.js (только HTML Builder)

Концепт Нужен в
Что такое Node.js HTML Builder · опц. AsyncRace (Vite)
fs / fs.promises HTML Builder
Streams HTML Builder
EventEmitter HTML Builder
path HTML Builder
process HTML Builder
CommonJS modules HTML Builder
readline HTML Builder

Ссылки: Что такое Node.js · fs · Stream API -- потоки · events -- EventEmitter · path · process · CommonJS vs ES Modules в Node

TypeScript (только Async Race)

Концепт Podcast (опц.) AsyncRace (обязательно)
Что такое TypeScript 🔓 🆕
TS базовые типы 🔓 🆕
interface vs type 🔓 🆕
TS Narrowing и Type Guards 🔓 🆕
Типизация API-ответов 🔓 🆕
Union Types 🔓 🆕
Generics ❌ 🆕

Ссылки: Что такое TypeScript · TS базовые типы · interface vs type -- когда что · TS Narrowing и Type Guards · Типизация API-ответов · Union Types · Generics

Git + Workflow (нужно во ВСЕХ задачах)

Концепт Slider Shelter JS30 Podcast NFC HTMLb AsyncRace
Commit convention 🆕 🔁 🔁 🔁 🔁 🔁 🔁
PR description schema 🆕 🔁 🔁 🔁 🔁 🔁 🔁
Cross-check process 🆕 🔁 🔁 🔁 🔁 🔁 🔁
gh-pages deployment 🆕 🔁 🔓 (Netlify) 🔁 🔁 — 🔁
Ветки gh-pages + фичевые 🆕 🔁 🆕 (shared repo) 🔁 🔁 🔁 🔁

Ссылки: Git Commit Convention · PR Description Schema · Cross-Check процесс · gh-pages деплой · Repo Workflow для bootcamp

Compound-цепочка (визуально)

              CSS Meme Slider
                    │
                    ▼ (+ HTML/CSS/Figma/responsive)
              Shelter P1-3
                    │
                    ▼ (+ DOM, events, vanilla JS basis)
              JS30 (2 widgets)
                    │
                    ▼ (+ Fetch, async, SPA, localStorage, Web Crypto)
              Podcast Player
                    │
                    ▼ (+ state machine, game loop, full persistence)
              Not Fight Club
                    │
                    ▼ (+ Node.js, fs, streams, CommonJS)
              HTML Builder
                    │
                    ▼ (+ TypeScript, REST, requestAnimationFrame, Vite, sorting)
              Async Race  ◄── финальный синтез всех слоёв

Следующее