От первой HTML-страницы до fullstack-приложения, оплат, подписок и Kanban-досок: HTML, CSS, JavaScript, React, backend, DevOps, UX, архитектура и карьера с квизами и песочницей.
Идём по порядку: от структуры страницы через стили и скрипты к backend, fullstack, инфраструктуре, UX и карьере.
Что такое HTML, как устроена веб-страница и самый первый разметочный каркас документа.
Читать урок →Заголовки, абзацы, списки и атрибуты — кирпичики, из которых строится контент.
Читать урок →Навигация между страницами, вставка картинок и табличное представление данных.
Читать урок →Зачем нужны стили, способы подключения и первые правила оформления текста.
Читать урок →Как CSS выбирает элементы, что такое коробочная модель и как двигать блоки.
Читать урок →Два мощных инструмента для построения адаптивных макетов любой сложности.
Читать урок →Переменные, типы данных, операции и первая программа на самом живом языке веба.
Читать урок →Логика программ: ветвления, повторяющиеся действия и вездесущие функции.
Читать урок →Связываем JavaScript с HTML: откликаемся на клики, меняем страницу на лету.
Читать урок →Финальный проект: объединяем HTML, CSS и JavaScript в готовый одностраничный сайт.
Читать урок →Системы контроля версий: коммиты, ветки, удалённые репозитории и публикация на GitHub Pages.
Читать урок →clamp(), container queries и современные единицы — макет, который дышит на любом экране.
Читать урок →transitions, @keyframes и препроцессор SASS: переменные, вложенность и миксины.
Читать урок →Промисы, async/await и работа с реальными API — загружаем данные с сервера в интерфейс.
Читать урок →a11y и основы поискового продвижения: семантика, aria, meta-теги и sitemap.
Читать урок →Менеджер пакетов npm, скрипты и быстрый сборщик Vite — современный рабочий процесс разработчика.
Читать урок →Компоненты, JSX, props и useState — первый переиспользуемый интерфейс на фреймворке.
Читать урок →Каталог товаров, фильтры и корзина: строим магазин на данных и чистых функциях.
Читать урок →Генерация статей из массива, фильтры по категориям и избранное в localStorage.
Читать урок →Vercel, собственный домен, аналитика и HTTPS — выводим проект в открытый интернет.
Читать урок →Первый сервер: маршруты, обработка запросов и REST API на JavaScript вне браузера.
Читать урок →SQLite, SQL, операции Create-Read-Update-Delete и безопасные параметризованные запросы.
Читать урок →Сбор данных форм, проверка ввода регулярками и загрузка файлов на клиенте и сервере.
Читать урок →Сессии, JWT, XSS и CSP — защищаем данные пользователей на фронте и на сервере.
Читать урок →ESM-модули, event loop, замыкания и IndexedDB — глубже в то, как работает язык.
Читать урок →Статическая типизация, типы, интерфейсы и компиляция — код, который проще не сломать.
Читать урок →Юнит-тесты функций и e2e-тесты интерфейса — уверенность перед каждым релизом.
Читать урок →Утилитарные классы вместо тысячи строк CSS и принципы единого визуального языка.
Читать урок →React Router, Context и мемоизация — большие интерфейсы без боли. Последний штрих к фреймворку.
Читать урок →Service Worker, манифест и установка на рабочий стол — сайт, который живёт как приложение.
Читать урок →Web Vitals, Lazy Loading и Lighthouse — ускоряем сайт и не теряем позиции в поиске.
Читать урок →Рисование скриптом, векторная графика и встраивание видео — контент без плагинов.
Читать урок →Образы и контейнеры, Dockerfile и compose — одинаковый запуск на любой машине.
Читать урок →Как собрать портфолио, обсуждать бриф и брать первые заказы с договором и сметой.
Читать урок →Типовые вопросы, живые задачи и поведение на интервью — готовимся к офферу.
Читать урок →Связываем SPA, API и базу в одно приложение: полный цикл «данные → сервер → интерфейс».
Читать урок →Постоянное соединение, push с сервера, чаты и живые уведомления без перезагрузки страницы.
Читать урок →In-memory хранилище: кэш ответов, TTL и очереди фоновых задач, разгружаем базу.
Читать урок →Статусы, пагинация, версионирование и OpenAPI — API, к которому приятно подключаться.
Читать урок →React-фреймворк со встроенным серверным рендерингом — быстро, SEO-дружелюбно и современно.
Читать урок →Модалки, аккордеоны и меню с правильной семантикой, фокус-ловушками и aria-атрибутами.
Читать урок →Сцена, камера и освещение в браузере — первый трёхмерный мир на JavaScript.
Читать урок →Дженерики, утилитарные типы и вывод типов — типизация уровня продакшена.
Читать урок →Автосборка, тесты и деплой по каждому пушу — пайплайн, который работает без вас.
Читать урок →ESLint и Prettier — единый стиль и автоматический поиск проблем в коде всей команды.
Читать урок →Проверенные решения: модули, подписка-публикация и принципы поддерживаемого кода.
Читать урок →Pull requests, ревью, конфликты и дисциплина веток — работа в команде без хаоса.
Читать урок →Сервер, reverse proxy, pm2 и systemd — продакшен без «особых условий на моей машине».
Читать урок →Объектные хранилища, serverless-функции и управляемые базы — инфраструктура по запросу.
Читать урок →Sentry, логи и алерты — узнаём о падениях раньше, чем пользователи расскажут.
Читать урок →Big O, хэш-таблицы и сортировки — фундамент для живых задач на собеседованиях.
Читать урок →Capstone: полное приложение под ключ — авторизация, CRUD, API, деплой и тесты из портфолио.
Читать урок →useMemo, useCallback, React.memo и кастомные хуки — производительность рендера React.
Читать урок →Кэш серверных данных и лёгкий стор вместо «голого» useEffect-фетчинга.
Читать урок →React Hook Form + zod: быстрые формы без лишних рендеров и типизируемая валидация.
Читать урок →Индексы, транзакции и версии схемы в коде — «боевой» уровень работы с БД.
Читать урок →Запрашиваете ровно те поля, что нужны; когда GraphQL лучше REST, а когда нет.
Читать урок →Полнотекстовый поиск с релевантностью, когда LIKE уже не тянет.
Читать урок →Каталог компонентов со сценариями и controls — документация, разработка, визуальные тесты.
Читать урок →Цикл «тест → код → рефакторинг» и нагрузочные проверки API на к6.
Читать урок →XSS, CSRF, IDOR, инъекции — почему это стандарт интервью и веб-безопасности.
Читать урок →npm audit, секреты вне кода, .env в gitignore — зависимости и ключи под контролем.
Читать урок →Оркестрация контейнеров: поды, деплойменты и масштабирование без даунтайма.
Читать урок →Раздача из узлов рядом с пользователем, защита и кэширование на границе.
Читать урок →Описание окружений кодом: plan/apply, ревью изменений и воспроизводимость.
Читать урок →Макеты, токены и flexbox-аналогии: читаем дизайн и вытаскиваем стили.
Читать урок →Простые интерфейсы, A/B-тесты и метрики — почему люди остаются или уходят.
Читать урок →Вклад в реальные репозитории — менторы, портфолио и первые строчки в чужих проектах.
Читать урок →Оценка сроков, договор и ТЗ, оплата по этапам — как начать брать заказы.
Читать урок →Компилируемый Go и быстрый рантайм Bun — второе дыхание серверной разработки.
Читать урок →CRUD, графики, фильтры и экспорт CSV — панель управления на реальных данных.
Читать урок →Stripe/ЮKassa, webhook-статусы и безопасные платежи — «вау»-проект в портфолио.
Читать урок →Изолированные переиспользуемые элементы на чистом стандарте без фреймворка.
Читать урок →Локализация строк, дат и денег: Intl, файлы локалей и многоязычные приложения.
Читать урок →Перетаскивание, буфер обмена и hotkeys — интерфейсы уровня настоящих продуктов.
Читать урок →Клиент, API, БД, кэш и CDN: как думать о системе целиком и не пасовать в интервью.
Читать урок →Когда что разумно, цена распределённых систем и путь аккуратной декомпозиции.
Читать урок →Схема базы, миграции и типизированные вызовы — ошибки ловим до прода.
Читать урок →Сообщения между сервисами: асинхронность, ретраи и событийные системы.
Читать урок →Ограничения запросов, защита от брутфорса и сканеров в продакшене.
Читать урок →API, который не ломается от повторов: ключи идемпотентности и цепочка middleware.
Читать урок →Спринты, роли, story points и ретроспектива — как реально работают команды.
Читать урок →Разметка README, решения через ADR и контракты API вместо хаоса в голове.
Читать урок →STAR-метод, самопрезентация и кейсы от HR и тимлидов без стресса.
Читать урок →Тот же React — приложение для Android и iOS из знакомого стека.
Читать урок →Десктоп-приложения из веб-стека: когда Electron, когда лёгкий Tauri.
Читать урок →Системно: якоря, группы, квантификаторы и практика поиска в тексте.
Читать урок →Часовые пояса, ISO 8601 и форматирование — даты без головной боли.
Читать урок →Stripe Subscriptions, пробный период и личный кабинет с историей платежей.
Читать урок →Drag-and-drop карточек, realtime через WebSocket и деплой — на зачёт всех навыков.
Читать урок →Вы прошли все уроки WebDev Уроки. Отличная работа!
Сертификат выдан: Ваше имя
Всё, что нужно, чтобы сделать первый сайт самому.
Каждый урок содержит живые примеры и задания, которые сразу можно открыть и трогать.
Отмечайте пройденные уроки — браузер запомнит ваш прогресс (данные хранятся локально).
HTML → CSS → JavaScript. После курса вы сможете собрать полноценный лендинг.
Flexbox, Grid, семантическая разметка и чистый современный JavaScript — без устаревших приёмов.
Проверяйте знания сразу: правильный тест автоматически засчитывает урок пройденным.
Экспериментируйте с HTML, CSS и JS прямо в браузере — результат виден мгновенно.