Разработка сайтов: HTML, CSS, JS
Веб-Старт: первый сайт своими руками (8–11 лет)
- 01: HTML: первые теги — Как устроен сайт, заголовки, абзацы, ссылки, картинки, списки, таблицы и формы. Находим ошибки в сломанной странице.
- 02: CSS: первые стили — Цвета, шрифты, отступы, рамки, тени и фоны — страница становится красивой.
- 03: CSS: интерактивность — :hover, :focus, псевдоэлементы, CSS-переменные, плавные переходы и transform.
- 04: Flexbox — Раскладываем блоки в ряд и в колонку: меню, карточки, выравнивание.
- 05: CSS Grid — Сетки для галерей и макетов в несколько колонок.
- 06: CSS-анимации — @keyframes, спиннеры, пульсация, выезжающие элементы.
- 07: Проект 1: сайт-портфолио — От эскиза до готовой страницы о себе с шапкой, работами и формой.
- 08: JavaScript: старт — Переменные, условия, циклы, массивы, объекты и функции; читаем ошибки в консоли.
- 09: DOM: оживляем страницу — Кнопки, события, новые элементы, формы, localStorage и таймеры. Проект — список дел.
- 10: Адаптивный дизайн — Сайт, который хорошо выглядит и на телефоне, и на мониторе; меню-гамбургер.
- 11: Проект 2: игровой сайт — Сайт игры с персонажами, мини-играми, таблицей рекордов и тёмной темой.
- 🚀: Финальное портфолио — Три лучших проекта на одном сайте, публикация на GitHub Pages вместе со взрослым и защита.
Frontend Старт: первый сайт (10–14 лет)
- 00: Быстрый старт: HTML и CSS с нуля — Как устроен сайт, первые теги, ссылки и картинки, таблицы, CSS и box model — для тех, кто начинает с нуля.
- 01: HTML5 и семантика — Семантические теги, медиа, формы и валидация, SEO-теги, доступность, SVG, основы PWA.
- 02: CSS3 мастерство — Каскад и специфичность, тени и фильтры, custom properties и тёмная тема, :has(), Grid, Container Queries.
- 03: CSS-анимации и эффекты — Transitions, 3D-трансформации, @keyframes, Web Animations API, анимация при прокрутке, SVG.
- 04: JavaScript: основы — Переменные, условия, массивы, объекты, функции, строки, дата, Math, ошибки, регулярные выражения, JSON.
- 05: DOM и интерактивность — Делегирование событий, Drag and Drop, клавиатура и жесты, live-валидация, Observer API. Проект — Kanban-доска.
- 06: Адаптивный дизайн — vw/vh, clamp(), адаптивные изображения, dark mode, печать, адаптивные таблицы.
- 07: JavaScript ES6+ — Promise, async/await, модули, генераторы, Web Workers. Проект — Task Manager.
- 08: Fetch API и работа с данными — REST, fetch, открытые API, CORS, кэширование, FormData, WebSocket. Проект — дашборд с API.
- 09: CSS-архитектура и Bootstrap — БЭМ, SCSS, PostCSS, Bootstrap 5, Tailwind, Styled Components.
- 10: Инструменты разработчика — npm, Vite, ESLint и Prettier, Git и GitHub, GitHub Pages, DevTools, Lighthouse.
- 11: Проект 1: квиз-игра — Вопросы, таймер, баллы, рекорды, звуки и тёмная тема.
- 12: Проект 2: портфолио — Анимированный hero, навыки, фильтр проектов, форма, SEO и деплой.
- 13: Проект 3: погодное приложение — Реальное API погоды, прогноз, геолокация, график, PWA.
- 🚀: Проект 4: блог — Блог без бэкенда: Markdown, поиск, теги, комментарии, RSS, SEO и аудит Lighthouse.
Frontend Pro: современная веб-разработка (14–18 лет)
- 01: JavaScript Pro — ООП и прототипы, this, генераторы, Proxy, паттерны, функциональный стиль, тесты на Jest.
- 02: TypeScript — Типы, интерфейсы, generics, utility types, классы, type guards.
- 03: React 19: основы — Компоненты, props, хуки, формы, React Router 7, custom hooks, ref как проп, portals, Error Boundaries.
- 04: React: advanced — Context, useReducer, Zustand, TanStack Query, оптимизация, react-hook-form + Zod, Motion, тестирование, CSS Modules и Tailwind, доступность, e2e-тесты Playwright.
- 05: Node.js + Express — Сервер, маршруты, middleware, REST API, JWT, валидация, обработка ошибок.
- 06: Python Flask — Маршруты, шаблоны Jinja2, формы, SQLAlchemy, авторизация, REST API, тесты.
- 07: Django + DRF — Модели, админка, views, формы, авторизация, Django REST Framework, JWT, тесты.
- 08: Базы данных — SQL, JOIN, агрегаты, индексы, транзакции, PostgreSQL, SQLAlchemy, Redis.
- 09: Проект 1: Gym Tracker — React + Django: регистрация, кабинет, посещения, графики, QR-коды.
- 10: Проект 2: учебная платформа — Роли ученика и преподавателя, расписание, домашние задания, журнал оценок, i18n.
- 11: Проект 3: E-commerce — Каталог, корзина, оформление заказа, оплата в тестовом режиме, отзывы.
- 🚀: Деплой и фронтенд в продакшене — Git, Docker, CI/CD, VPS, HTTPS, мониторинг, безопасность; Vite-сборка, Core Web Vitals, SEO для SPA, деплой на Netlify/Vercel — и защита портфолио из трёх проектов.
