Разработка сайтов: HTML, CSS, JS
Frontend Старт: первый сайт (10–14 лет)
- 01: Как устроен интернет — Что такое браузер, сервер, HTML/CSS/JS — три роли веб-страницы. Знакомство с DevTools.
- 02: HTML5: структура страницы — Теги, семантика, заголовки, списки, ссылки. Первая страница — от шапки до подвала.
- 03: Формы и поля ввода — Текстовые поля, кнопки, чекбоксы, select — как сайт принимает данные от пользователя.
- 04: Таблицы данных — Строки, колонки, объединение ячеек — оформляем расписание или таблицу результатов.
- 05: CSS3: цвета и шрифты — Синтаксис CSS, цветовые модели, подключение шрифтов. Страница начинает выглядеть как сайт.
- 06: Box model и отступы — Margin, padding, border — как браузер считает размер и пространство вокруг каждого блока.
- 07: Фоны и изображения — Форматы JPEG/PNG/SVG, фоновые изображения, градиенты — картинки на странице выглядят аккуратно.
- 08: Шрифты и иконки — Google Fonts, иконочные шрифты — типографика, которая делает сайт узнаваемым.
- 09: Flexbox — Современное выравнивание блоков без таблиц — карточки, меню, центрирование.
- 10: CSS Grid — Сетки для сложных макетов: галереи, раскладки в несколько колонок.
- 11: Навигация и ссылки — Меню сайта, якорные ссылки, относительные и абсолютные пути между страницами.
- 12: Адаптивность — Media queries, mobile-first — сайт хорошо выглядит и на телефоне, и на мониторе.
- 13: Псевдоклассы и простые анимации — :hover, :focus, transition — кнопки и ссылки, которые реагируют на действия пользователя.
- 14: Bootstrap: готовые компоненты — CSS-фреймворк — кнопки, карточки и сетка, которые собирают страницу быстрее.
- 15: JavaScript: переменные и логика — Переменные, условия, циклы — учим страницу "думать".
- 16: DOM и события — Клик, ховер, ввод в поле. Первый интерактив: кнопки, которые реагируют.
- 17: Локальное сохранение данных — localStorage — список дел или заметки, которые не исчезают после перезагрузки страницы.
- 18: Мини-проект: фотогалерея — Галерея с сеткой, подписями и эффектом при наведении — первый самостоятельный проект.
- 19: Мини-проект: калькулятор и переключатель темы — Рабочий калькулятор и светлая/тёмная тема на JavaScript.
- 20: Git и GitHub Pages — Контроль версий, публикация сайта — настоящий адрес в интернете.
- 🚀: Финальный проект: сайт-портфолио — Личная страница-портфолио из нескольких секций, опубликованная на GitHub Pages.
Frontend Pro: современная веб-разработка (14–18 лет)
- 01: Современный JavaScript (ES6+) — let/const, стрелочные функции, деструктуризация, модули — код в современном стиле.
- 02: Асинхронность — Promise, async/await, fetch API — работа с данными, которые приходят не сразу.
- 03: Работа с API — Подключение реальных открытых API, JSON, обработка ошибок запросов.
- 04: TypeScript: типизация JS — Зачем нужны типы, interface, базовая типизация функций и объектов.
- 05: CSS-архитектура — БЭМ-методология, CSS-переменные, основы Sass — стили, которые легко поддерживать.
- 06: Продвинутый CSS: анимации и трансформации — Keyframes, transform, transition timing — плавные и эффектные интерфейсы.
- 07: Доступная вёрстка — Семантика, основы a11y — сайт, удобный для всех пользователей.
- 08: Инструменты разработчика — npm, Vite — сборка проекта как в настоящей команде.
- 09: Введение в React — Компоненты, props, JSX — первый интерфейс на React.
- 10: React: хуки — useState, useEffect, списки и формы — интерактивное приложение.
- 11: React Router: многостраничное приложение — Маршрутизация между страницами без перезагрузки — настоящий SPA.
- 12: Формы и валидация в React — Управляемые поля ввода, проверка данных, сообщения об ошибках.
- 13: Управление состоянием: Context API — Глобальное состояние приложения без библиотек — тема, пользователь, корзина.
- 14: Основы Node.js и Express — Простой backend-сервер — фронтенд начинает общаться со своим собственным API.
- 15: Базы данных: первое знакомство — Как и где хранятся данные приложения — простое знакомство с базами и REST.
- 16: Тестирование: первые шаги — Зачем нужны тесты, базовые проверки компонентов на Jest.
- 17: Git в команде — Branches, pull request, слияние изменений — работа как в настоящей команде разработки.
- 18: Оптимизация производительности — Lazy loading, code splitting — приложение, которое быстро загружается.
- 19: Основы SEO и скорости — Почему сайт загружается быстро и его находит Google — базовые принципы.
- 20: Деплой проекта — Публикация на Netlify/Vercel, собственный домен.
- 21: Командный проект — Разработка сайта в паре: распределение задач, код-ревью.
- 🚀: Финальный проект для портфолио — Полноценное SPA-приложение на React с собственным API, задеплоенное в продакшн.
