Подробные пошаговые уроки по языкам программирования, базам данных и инструментам разработки. От установки до реальных проектов.
Привет входящим
Смотреть все курсыВыбери тему и начни обучение прямо сейчас
Основы языка: синтаксис, типы данных, функции, ООП, работа с файлами и модулями.
Настройка среды разработки: проекты, отладка, виртуальные окружения и горячие клавиши.
Среда разработки для Java: проекты, отладка, рефакторинг, Git и плагины.
Основы фреймворка: IoC, DI, бины, AOP, JDBC, MVC и Spring Security.
Быстрый старт веб-приложений: REST API, JPA, test, Docker и деплой.
Системы сборки Java: pom.xml, build.gradle, жизненный цикл и CI.
Тестирование Java: JUnit 5, ассерты, параметризация, Mockito и покрытие.
API и UI тестирование: Karate DSL, сценарии Gherkin, JSON, параметризация и отчёты.
Git и GitLab: репозитории, ветки, Merge Request, CI/CD pipelines и GitLab Runner.
Хостинг репозиториев: issues, pull requests, Actions, GitHub Pages и ревью кода.
Современный редактор кода: workspace, отладка, Git, терминал, сниппеты и расширения.
Быстрая вёрстка: сокращения для HTML, CSS-подобные выражения и генерация кода.
Поиск проблем в коде: правила, конфиг, flat config, автофикс и интеграция с редакторами.
Аудит сайтов: Performance, Accessibility, Best Practices, SEO и оптимизация Core Web Vitals.
Инструменты разработчика: Elements, Console, Network, Performance, Sources и Device Mode.
Проектирование API: HTTP-методы, статусы, ресурсы, версионирование, авторизация и Postman.
Точная вёрстка по макету: отступы, шрифты, спрайты, сравнение слоёв и идеальная сетка.
Как поставить ОС с флешки: Rufus, UEFI, разметка диска, dual boot и частые ошибки.
ОС и командная строка: файлы, права, процессы, сеть, пакеты и systemd.
Текстовый редактор: режимы, навигация, поиск, замена и настройка .vimrc.
Тестирование на Python: тесты, фикстуры, параметризация, coverage и моки.
Язык запросов: SELECT, JOIN, GROUP BY, индексы, транзакции и нормализация БД.
Популярная СУБД: установка, администрирование, запросы и работа из Python.
Продвинутая СУБД: psql, JSON, расширения, и сравнение с MySQL.
NoSQL БД: документы, коллекции, запросы, агрегация, индексы и PyMongo.
In-memory хранилище: структуры данных, TTL, кэширование и Pub/Sub.
Контейнеризация: образы, контейнеры, Dockerfile, docker-compose и Docker Hub.
Оркестрация: поды, Deployment, Service, Ingress, Helm и рабочие команды kubectl.
Автоматизация: inventory, playbook, модули, переменные, роли и ansible-vault.
Инфраструктура как код: HCL, провайдеры, plan/apply, state, модули и backends.
Тестирование Ansible-ролей: сценарии, драйверы, converge, verify и idempotence.
Мониторинг: метрики, экспортеры, targets, PromQL и правила алертов.
Дашборды: датасорсы, панели, переменные, алерты и provisioning.
Сбор и анализ логов: Elasticsearch, Logstash, Kibana и Filebeat.
Нейросети в разработке: промптинг, генерация кода, отладка, тесты и API.
Веб-фреймворк: маршруты, шаблоны Jinja2, формы, работа с БД и REST API.
Современный API-фреймворк: Pydantic, автоматическая документация, async.
Вёрстка страниц: теги, семантика, формы, таблицы, медиа и атрибуты.
Стилизация: селекторы, box-model, Flexbox, Grid, анимации и адаптивность.
Практика раскладки: flex для рядов и панелей, grid для сеток и каркаса страницы.
Переходы, cubic-bezier, @keyframes, scroll-анимации и микроинтеракции интерфейса.
Шрифты, размеры rem/em, межстрочный интервал, мера строки и кириллица.
Палитры, цветовые модели, WCAG, состояния элементов и тёмная тема.
Письма на таблицах: инлайновые стили, кнопки, адаптив и доставляемость.
Сквозной проект: соберите лендинг на HTML и CSS от скелета до публикации.
Семантика, клавиатура, скринридер, ARIA, контраст и чек-лист WCAG.
Поля, типы, ввод, валидация, автозаполнение и отправка форм на HTML.
srcset, sizes, picture, ленивая загрузка и оптимизация картинок под экраны.
Как встроить, viewBox, градиенты, спрайты, маски и адаптивные SVG-иконки.
Core Web Vitals, критический CSS, шрифты, preload и проверка в Lighthouse.
Специфичность, токены, БЭМ, состояния, @layer и переиспользование без дублей.
Прогрессивное улучшение, @supports, префиксы, полифиллы и проверка в caniuse.
Мета-теги, заголовки, Open Graph, Schema.org, canonical и sitemap.
Box model: содержимое, padding, рамка и margin, box-sizing и коллапс полей.
display: block, inline, inline-block, hidden, flow-root и выбор типа коробки.
px, em, rem, %, vw, vh, чанки ch и как считать размеры контента.
Селекторы элементов, атрибутов, комбинаторы; hover, focus, not, child и nth.
::before, ::after, ::marker и ::selection: декоративные вставки и SDK-паттерны.
Как CSS применяется: каскад, специфичность, порядок, наследование и important.
static, relative, absolute, fixed, sticky: оффсеты, z-index и стекирование слоёв.
overflow, text-overflow, скрытие, скролл и борьба с вылезающим контентом.
background-color, изображения, паттерны и градиенты linear/radial/conic.
box-shadow, border, border-radius: мягкие тени, скругления и рамки-декор.
translate, rotate, scale, skew, origin, transform-origin и 3D-трансформации.
blur, brightness, contrast, grayscale, hue-rotate и backdrop-filter для UI.
@media по ширине, mobile-first, prefers-*, брейкпоинты и чек-лист адаптива.
Гамбургер-меню, ломающиеся сетки, clamp-шрифты и тач-зоны на мобильных.
Стили по размеру контейнера: container-type, cqw-единицы и компонентные сетки.
@media print: разрывы страниц, очистка интерфейса и шрифты под бумагу.
Doctype, html, head, charset, title, viewport и подключение ресурсов.
header, nav, main, article, section, aside, footer и заголовочная иерархия.
ul, ol, dl, вложенные списки, маркеры через list-style и меню-списки.
a: href, target, download, rel, якоря, состояния ссылок и навигация по сайту.
img, alt, width/height, lazy-загрузка, picture, srcset и форматы WebP/AVIF.
video, audio, source, controls, preload, poster, все форматы и субтитры track.
Встраивание карт и видео, sandbox, lazy, CSP и безопасность виджетов.
table, thead/tbody/tfoot, th+scope, colspan/rowspan, caption и стили таблиц.
nbsp, ламп, сущности < &, числовые коды и типографика в HTML.
link и script: CSS/JS, defer/async, preconnect, preload и кеширование.
SVG-спрайты, inline-SVG, icon-font, emoji, favicon для всех платформ и A11y.
button vs a, состояния, варианты размера/цвета и доступные клик-зоны.
Паттерн карточки: изображение, контент, CTA, сетка auto-fill и состояния.
id, class, lang, dir, hidden, title, data-*, aria-*, tabindex и translate.
Интерактивность: переменные, функции, DOM, события, запросы и анимации.
Типизация JavaScript: типы, интерфейсы, дженерики, компиляция и работа с React/Vue.
Прогрессивный фреймворк: Composition API, SFC, директивы, компоненты и роутер.
Библиотека интерфейсов: компоненты, хуки, state, эффекты, маршрутизация и запросы.
CSS-препроцессор: переменные, вложенность, миксины, функции, частичные файлы и модули.
Сборщик нового поколения: dev-сервер, HMR, переменные окружения и продакшен-сборка.
Сборка фронтенда: entry, output, loaders, plugins, code splitting и production-оптимизация.
Состояние в Vue 3: store, state, getters, actions, модули и persist в localStorage.
UI-библиотека для Vue 3: компоненты, формы, таблицы, темы и кастомизация.
Тестирование на Vite: describe/it, expect, моки, vue-test-utils и покрытие кода.
Тестирование JS/TS: матчеры, моки, fake timers, снапшоты и тесты компонентов.
Интерфейс-дизайн: фреймы, авто-лейаут, компоненты, прототипы и экспорт.
Растровая графика: слои, выделение, маски, цветокоррекция и ретушь.
Векторная графика: перо, пути, цвет, типографика и экспорт SVG.
Моушн-графика: композиции, ключевые кадры, маски, выражения и рендер.
3D-моделирование: модификаторы, материалы, свет, рендер и анимация.
Конструктор сайтов: блоки, Zero Block, формы, стили и публикация.
Креативные сайты: артборды, свободное размещение, скролл-эффекты.
Компилируемый язык: типы, указатели, память и RAII, ООП, STL, файлы и CMake.
Игровой движок: редактор, уровни и актёры, Blueprints, C++, материалы, физика, UI и пакинг.
Игровой движок: сцены, компоненты, скрипты C#, физика, префабы, UI, анимация и сборка игры.
3D-студия: моделирование, UV, материалы, свет, рендер Arnold, риггинг и анимация.
Процедурная 3D: ноды, VEX, разрушения, симуляции жидкости и экспорт в движки.
Скульптинг: кисти, DynaMesh, ZRemesher, маски и полигруппы для персонажей и пропов.
Текстурирование: PBR, слои, маски, генераторы, запекание и экспорт в Unity и Unreal.
Одежда для персонажей: выкройки, сшивание, симуляция ткани и экспорт со складками.
UV-развёртка: разрезы, островки, упаковка, texel density и экспорт для текстур.
Презентация 3D: PBR-материалы, HDRI-свет, камеры, турнтейбл и рендер портфолио.
Массивы, индексация, операции, трансляции, линейная алгебра и случайные числа на Python.
DataFrame, чтение данных, фильтрация, группировка, объединение таблиц и экспорт на Python.
Линейные графики, scatter, гистограммы, subplots, стили и экспорт графиков на Python.
Статистическая визуализация: heatmap, boxplot, violin, регрессионные и категориальные графики.
Ячейки, кернелы, markdown, магические команды, визуализация и публикация тетрадей.
Классификация, регрессия, кластеризация, пайплайны, кросс-валидация и подбор гиперпараметров.
Графы, autodiff, Keras API, тренировка моделей, TF Serving и производственный ML на Python.
Sequential и Functional-модели, слои, обучение, колбэки, кастомные компоненты на Python.
Тензоры, autograd, nn-модули, циклы обучения, DataLoader и перенос моделей на GPU.
Репозитории, коммиты, ветки, merge, rebase, GitHub Flow и совместная разработка.
WebDriver, поиск элементов, ожидания, формы, скриншоты и автотесты UI на Python.
Колоночная OLAP-БД: движки таблиц, агрегации, TTL, партиции и потоковая загрузка.
NoSQL-БД: CQL, ключи, репликация, TTL и моделирование данных под запросы.
Топики, партиции, продюсеры, консьюмеры, группы и потоковая обработка событий.
DataFrame, RDD, Spark SQL, трансформации, кластеры и потоковая обработка данных.
HQL, таблицы, партиции, bucketing и SQL-слой поверх Hadoop/HDFS.
Распределённый SQL: коннекторы, федеративные запросы и интерактивный анализ больших данных.
Интерактивные блокноты, интерпретаторы SQL/Python/Spark и живые графики.
Power Query, модель данных DAX, визуализации, отчёты и публикация в службу.
Витрина приложений Microsoft: визуалы Power BI, приложения для Teams и интеграции.
Основы с нуля: план счетов, двойная запись, проводки, баланс, ОСВ и первичные документы.
Программа 1С 8 с нуля: справочники, банк и касса, документы, зарплата, ОСВ и закрытие месяца.
НДС, налог на прибыль, НДФЛ, взносы, УСН, сроки уплаты и календарь бухгалтера.
Регистрация, выбор налогообложения, страховые взносы, касса, отчётность и закрытие ИП.
Налог на профдоход: ставки 4% и 6%, «Мой налог», чек, лимиты и частые ошибки.
Как настроить рекламу с нуля: кабинет, кампании, ключевые фразы, объявления, бюджет и Метрика.
Как вести бизнес с нуля: плюсы и минусы, допродажи и пакеты, найм, запасы, логистика, бюджетирование, полезные сервисы и признаки здорового бизнеса.
Серверный JavaScript: run-время, модули, npm, файлы, потоки и работа с базами данных.
Фреймворк для Node.js: маршруты, middleware, шаблоны, обработка ошибок и REST API.
Веб-фреймворк на Python: модели, миграции, админка, ORM, шаблоны и аутентификация.
Простой и быстрый язык: типы, функции, структуры, интерфейсы, goroutines и HTTP-сервер.
Самый массовый веб-язык: синтаксис, формы, PDO, сессии, ООП и деплой на хостинг.
Язык и платформа Microsoft: типы, ООП, LINQ, файлы и веб-приложения ASP.NET Core.
Utility-first CSS: утилиты, конфиг, адаптивность, тёмная тема и интеграция с фреймворками.
Компонентный CSS-фреймворк: сетка, утилиты, компоненты, модальные окна и темы.
SSR-фреймворк на React: App Router, серверные компоненты, данные, API и деплой.
Фреймворк на Vue 3: роутинг, layouts, data fetching, модули и SSR/SSG.
Компилируемый фронтенд: реактивность, компоненты, stores и фреймворк SvelteKit.
Корпоративный framework: компоненты, директивы, DI, RxJS, формы и роутинг.
Как работает интернет: DNS, запросы и ответы, методы, статусы, cookies, HTTPS и DevTools.
Типы хостинга, домен и DNS, GitHub Pages, Netlify, Vercel, Nginx, HTTPS и CI/CD.
Поисковое продвижение: семантика, meta и Open Graph, Core Web Vitals, sitemap и аналитика.
О-нотация, массивы, деревья, хеш-таблицы, сортировки, рекурсия и подготовка к собеседованиям.
Как составить резюме, собрать портфолио, найти вакансию и пройти собеседование до оффера.
Куда расти разработчику: пути frontend, backend, DevOps и data, порядок изучения и мини-проекты.
Разработка под Android: Android Studio, Kotlin, Activity, Compose, сеть, Room и публикация.
Разработка под iOS: Xcode, Swift, SwiftUI, навигация, сеть, Core Data и App Store.
Кроссплатформенная разработка: Dart, виджеты, layout, state, сеть и сборка APK.
Мобильные приложения на React: компоненты, стили, навигация, сеть и Expo.
ИИ-напарник в редакторе: автодополнение, chat, slash-команды, тесты и проверка кода.
ИИ-агенты в разработке: автономные задачи, инструменты, работа с репозиторием и файлáми.
Как правильно просить нейросети: структура промпта, few-shot, цепочки рассуждений и ошибки.
Создание ботов на aiogram: токены, команды, клавиатуры, FSM, файлы и деплой.
Веб-сервер и reverse proxy: server, location, статика, проксирование, HTTPS и кэш.
CI/CD-сервер: установка, jobs, pipelines, триггеры, креденшелы и интеграция с Git.
Автоматизация в репозитории: workflow, jobs, matrix, секреты, артефакты и деплой.
Управление секретами: KV, политики, auth-методы, динамические секреты и интеграция с приложениями.
Архитектура: монолит vs микросервисы, API Gateway, сервис-дискавери, очереди и observability.
Корпоративная СУБД: установка, SQL*Plus, таблицы, PL/SQL, индексы и транзакции.
NoSQL от AWS: ключи, чтение и запись, query vs scan, индексы и работа из Python.
Графовая БД: узлы, связи, язык Cypher, индексы и примеры графов данных.
Поиск и аналитика: документы, индексы, mapping, поисковые запросы и агрегации.
Пароли и 2FA, фишинг, безопасная разработка, обновления, бэкапы и приватность.
Главные угрозы веб-приложений: инъекции, XSS, аутентификация, доступ и конфигурация.
Как создан этот проект, что внутри, чем отличается от платных курсов и как поддержать.
Частые вопросы: с чего начать, сертификаты, практика, авторы и использование материалов.
Практические задания по HTML, CSS, JavaScript, Python, SQL и DevOps с самопроверкой.
16 вопросов с проверкой и объяснениями: разметка, селекторы, flexbox, grid, цвет и доступность.
Плавное изменение свойства при смене состояния.
Какие свойства анимировать при переходе: all или список.
Кривые ускорения: ease, ease-in, cubic-bezier, steps.
Свойство анимации по ключевым кадрам: имя, длительность и пр.
Описание этапов анимации: от to, с процентами.
Преобразование элемента: translate, rotate, scale, skew.
Центр вращения и масштабирования: центр, углы, проценты.
Отдельные свойства вместо разрозненных в transform: проще и быстрее.
Сколько времени длится один цикл анимации.
Состояние до/после анимации: none, forwards, backwards, both.
Направление циклов: normal, reverse, alternate.
Дискретные шаги вместо плавности: эффект «пиксель» и спрайтов.
Пауза и продолжение анимации на лету.
Вращение в трёх измерениях: rotateX/rotateY и глубина.
Глубина сцены для 3D-эффектов: точка схода.
Дочерние 3D-элементы сохраняют глубину сцены.
Подсказка браузеру о будущих изменениях: ускорение анимаций.
Уважение к настройке пользователя: выключить или смягчить движения.
transitionend и animationend: «поймать» конец анимации из JS.
Движение элемента по заданной траектории (path).
Что включает width: только содержимое или с padding и границей — ключ к вёрстке.
Определяет, как элемент живёт в потоке: блок, строка, grid, flex…
Ширина и высота элемента: явные значения и авто.
Ограничения ширины: нет меньше/больше заданного — адаптивность.
Ограничения высоты: гарантированный минимум или потолок.
Внешний зазор вокруг элемента: управляет пространством между блоками.
Вертикальные margin соседей не складываются — берётся больший.
Зазор между содержимым и границей элемента: «воздух» внутри.
Линия вокруг элемента: ширина, стиль и цвет.
Скруглённые углы: радиус, эллипсы, полное окружение.
Контур вне бокса: не влияет на размеры, часто — фокус.
Тень элемента: сдвиг, размытие, распространение, цвет.
Как ведут себя тень/фон при разрыве строки на две части.
Рамка из фрагментов изображения вместо сплошной линии.
Тип позиционирования: static, relative, absolute, fixed, sticky.
Шорткат для top/right/bottom/left у позиционированных элементов.
Кто сверху при наложении: значение и контекст стека.
Обтекание текстом элементов: исторически для колонок, сегодня для картинок.
Прекращает обтекание: новый блок начинает ниже флоатов.
Что с содержимым за пределами бокса: visible, hidden, scroll, auto.
Видимость без удаления из потока: visible, hidden, collapse.
Прозрачность всего элемента 0–1: плавные появления в анимациях.
Вид курсора над элементом: pointer, move, not-allowed.
Как медиа вписывается в контейнер: cover, contain, fill.
Положение вписанного медиа внутри бокса при cover/contain.
Разрешает пользователю менять размер элемента.
Разрешает выделение текста: none для интерфейсов, auto для текста.
Разрешает клики и ховер элементу: none — сквозной «прозрачный» слой.
Фиксированное отношение сторон: видеоблоки без «прыжков».
Стили полос прокрутки: scrollbar-color, scrollbar-width.
Толщина линии: 1px, 2px, medium, а также по сторонам.
Вид границы: solid, dashed, dotted, double, none.
Цвет границы: свой или через currentcolor.
Режим границ таблицы: separate или collapse.
Расстояние между ячейками таблицы при border-collapse: separate.
fixed или auto: как трактуются ширины колонок.
Газетная вёрстка: columns в одну строку.
Элемент, занимающий все колонки: заголовок над текстом.
Линия между колонками: ширина, стиль, цвет.
Как элемент рвётся между колонками или страницами.
Сколько строк должно остаться в начале/конце фрагмента.
Шорткат маркеров: тип, изображение, позиция.
внутри или снаружи: где лежит маркер относительно текста.
Фактический текст псевдоэлементов ::before/::after.
Auto-нумерация через counter-reset и counter-increment.
Изображение вместо стандартного маркера.
Цвет текста элемента: основной инструмент читаемости.
Цвет подложки элемента: базовый фон блоков.
Фоновое изображение элемента вместо вставки img.
Повторение фоновой картинки: no-repeat, repeat-x, round.
Положение фонового изображения: проценты, ключевые слова, px.
Масштаб фоновой картинки: contain, cover, конкретные значения.
Фон прикреплён к вьюпорту, элементу или скроллится с контентом.
Куда распространяется фон: border-box, padding-box, content-box, text.
Откуда отсчитывается фон: от границы, паддинга или содержимого.
Режим наложения нескольких фоновых слоёв друг на друга.
Плавный переход цветов вдоль заданного направления.
Переход цветов от центра или точки наружу: блики, тени, лучи.
Переход цветов по кругу вокруг точки: спидометры, прогресс.
Градиент, повторяемый с заданным шагом: полосы и узоры.
Ключевое слово — «цвет текста элемента»: удобно для иконок и границ.
Подсказывает браузеру, тёмная или светлая схема у элемента.
Цвет системных элементов: чекбоксы, радио, range, прогресс.
Цвет каретки в текстовых полях ввода.
Функция смешивает два цвета с указанной долей: оттенки без палитры.
Цветовая модель: просто задаются светлота и тон — удобно для тем.
Цвет через оттенок, насыщенность и светлоту: интуитивно для подбора тем.
Четвёртая составляющая: альфа-канал через rgba(), hsla() или / 50%.
Визуальная обработка элемента: размытие, яркость, сепия, контраст.
Фильтрует всё, что находится ПОД элементом: стеклянные панели.
Смешение элемента с тем, что под ним: multiply, screen, difference.
Обрезка элемента по фигуре: круги, многоугольники, скруглённые формы.
Маска скрывает части элемента по альфа-каналу изображения.
Практика: проверяем соотношение контраста текста и фона по WCAG.
Практика: поддержка prefers-color-scheme и схемы оформления.
Практика: заливка букв градиентом через background-clip.
Включает flex-раскладку: дети становятся строками одной оси.
Row или column: раскладка детей горизонтально или вертикально.
Распределение детей вдоль главной оси: start, center, space-between.
Выравнивание детей по поперечной оси: stretch, center, flex-start.
Перенос детей на новые строки при нехватке ширины.
Зазор между элементами flex/grid без margin-костылей.
Насколько элемент растянется на свободное место по главной оси.
Насколько элемент может сжиматься при нехватке места.
Размер до распределения пространства: авто, px, проценты, 0.
flex: grow shrink basis — три свойства одной строкой.
Flex-контейнер, который ведёт себя как инлайновый бокс.
Выравнивание ПЕРЕНЕСЁННЫХ строк по поперечной оси в контейнере.
Переопределяет align-items для отдельного ребёнка.
Визуальный порядок детей flex/grid без изменения HTML.
Практика: идеальная центровка блока — одна строка.
Раскладка по строкам И столбцам: мощнее флекса для целой страницы.
Задаёт ширину колонок: fr, px, %, minmax, repeat.
Задаёт высоту строк сетки.
Зазор между ячейками сетки и в flex.
Явные grid-row / grid-column: элемент с линии до линии.
Раскладка по именованным зонам: наглядно и читаемо.
Минимум и максимум размера: колонка не схлопнется и не распухнет.
Поток авторазмещения: row, column, dense — порядок ячеек.
Ячейка занимает несколько колонок или строк.
justify/align для items и content: выравнивание внутри ячеек и сетки.
Повторение треков и «резина»: repeat(auto-fit, minmax(200px, 1fr)).
Одной строкой: строки, колонки и зоны.
Grid внутри grid: карточка сама маленькая сетка.
Вложенный grid использует линии родительского трека.
Шорткаты размещения одной ячейки: линия к линии или span.
Классическая раскладка для лендингов: колонки по долям места.
margin-inline, inset-inline и пр.: зависят от направления письма.
Создаёт собственный стеку-контекст, не трогая z-index.
Откладывает рендер содержимого вне экрана: быстрее длинные страницы.
Слои стилей с точным порядком: грань между библиотеками и своими правилами.
Правила внутри правил: структура без дублирования селекторов.
«Защёлкивание» прокрутки к точкам: карусели, галереи.
Отступ для якорных точек прокрутки под липкими шапками.
Плавная прокрутка к якорям страницы.
Поведение при достижении границы скролла: цепочки прокруток.
Условные стили по поддержке свойства или функции.
Плавный переход состояний страницы: новая API браузера.
Привязка всплывающих блоков к якорю без абсолютной математики.
Значение сразу светлое и тёмное: автоматическая тема.
Стартовые стили для анимации появления элементов.
Разрешает анимировать дискретные состояния в переходах.
@container style(): условия по значению переменной.
Точечные окна на HTML-popover с фоном ::backdrop.
Стили после взаимодействия пользователя с формой.
Анимации, привязанные к прокрутке: прогресс чтения и параллакс.
База стилей: сбрасываем расхождения браузеров правильно.
Классический каркас: шапка, меню, контент, сайдбар, футер.
Карточка: изображение, заголовок, текст, кнопка.
Логотип, ссылки, кнопки: горизонтальный тулбар.
Подвал со ссылками, контактами и соцсетями.
Один компонент и модификаторы: default, ghost, big.
Поля, лейблы, ошибки: форма без сюрпризов.
Первая секция: заголовок, подзаголовок, действие.
Три колонки цен с выделенным «популярным».
Мнения клиентов: карточки с фото и текстом.
Поле ввода и кнопка: быстрый модуль.
Логин и пароль с проверкой и кнопкой входа.
Диалог: подложка, панель, фокус.
Раскрывающиеся блоки: заголовок кликабелен.
Переключение панелей с активным состоянием.
Подменю при наведении или клике с правильным позиционированием.
Футер внизу даже на коротких страницах.
Маленькие метки: количество, статус, версия.
Несколько круглых фото с наложением: группа.
Пульсирующее место вместо контента при загрузке.
Всплывающее сообщение в углу экрана.
Пояснение поверх элемента по наведению.
Индикатор завершения задачи: проценты.
Вращающийся индикатор: лёгкая анимация.
Навигационный путь: «Главная / Раздел / Статья».
Страницы-номера: список ссылок с активной.
Набор меток категорий: chip-элементы.
Данные в таблице: головка, полосы, границы.
Статья: заголовок, автор, тизер, секции, подпись.
Раздел с фото команды, текстом и статистикой.
Карточки сотрудников: фото, роль, ссылки.
Крупная сетка «почему мы»: иконка, заголовок, текст.
Призыв к действию: текст и большая кнопка.
Фото, цена, старая цена, кнопка купить.
Список обсуждений с аватарами и временем.
Сетка портфолио с подписью и фильтрами.
Целая история страницы: hero, features, cta, footer.
Элементы «выезжают» при попадании в зону видимости.
Условные стили по характеристикам устройства: ширина, ориентация.
Сначала базовые стили для телефона, затем расширения через min-width.
Выбор ширины, после которой макет меняется осмысленно.
Сравнение направлений: что брать для чего.
Стили по размеру КОНТЕЙНЕРА: компонент адаптируется в любом месте.
Картинка под ширину контейнера без искажений: max-width 100%.
Сетка из процен/функций, адаптирующаяся к любой ширине.
Проценты, rem, vw вместо жёстких размеров: волновое масштабирование.
Размеры шрифта, меняющиеся с шириной: clamp и шкалы.
Гамбургер и раскрытие навигации на телефоне.
Меньше воздуха на телефоне, больше на десктопе.
Не дать таблице «уплыть» на телефоне: горизонтальный скролл.
Встраиваемое видео не вылезает за контейнер.
Условия по точности ввода: hover, pointer, coarse.
Стили для portrait и landscape.
Условия по плотности пикселей: retina-стили.
Версия страницы для печати: @media print.
Всплывающие стили фокуса под разные устройства ввода.
Шапка, меняющая структуру между мобильной и десктопной.
Колонки футера сжимаются в стопку на телефоне.
Рядом шапка-сайдбар-контент перетекает в одну колонку.
Эмуляция устройств и советы по отладке адаптивности.
and, or, not и логические связки в медиазапросах.
<picture> и srcset/sizes: браузер выбирает подходящий ресурс.
Применяет стили ко всем элементам указанного типа: базовые правила и сбросы.
Применяет стили к элементам с указанным классом: самый частый инструмент.
Стили к единственному элементу по уникальному id: очень высокая специфичность.
Стили к элементам по атрибуту и его точному значению.
Маски по подстроке в атрибуте: ^= начало, $= конец, *= вхождение.
Стили к элементам любого уровня внутри предка: вложенность правило не ограничена.
Стили к прямым детям: только первый уровень вложенности.
Стили к элементу сразу после другого: следующий брат.
Стили к всем следующим братьям: различия по «родным» порядкам.
Одно правило для нескольких селекторов через запятую.
Применяется ко всем элементам: сбросы и типовые базовые правила.
Стили при наведении курсора: визитка интерактивности.
Стили в момент нажатия кнопки или ссылки.
Стили при получении фокуса: клавиатура, клик, скрипты.
Стили фокуса, видимые только при навигации с клавиатуры (а не мышью).
Стили посещённых ссылок: история навигации посетителя.
Элемент по позиции среди братьев: даже, нечётные, формулы.
Элемент по позиции среди элементов того же типа.
Первый и последний ребёнок: края списка, тонкие границы.
Элементы, не соответствующие селектору: исключения.
Спасает от повторов: сужает правило к любому из селекторов.
Как :is, но специфичность нулевая: всегда переопределяемо.
Применяет стили к предку по его содержимому: «если внутри есть …».
Псевдоэлемент корня: место для переменных и глобальных установок.
Псевдоэлемент до контента элемента: иконки, украшения, счётчики.
Псевдоэлемент после контента: разделители, звёздочки, эффекты.
Стили первой буквы: буквицы и декоративные начала абзацев.
Стили для выделенного пользователем текста: цвет фона и текста.
Стили текста-подсказки placeholder в полях ввода.
Стиль маркера или номера списка: цвет, размер, содержание.
Выбор шрифта: системный стек или веб-шрифт с запасными вариантами.
Крупность текста: абсолютные и относительные единицы.
Вес шрифта от 100 до 900: обычно normal 400 и bold 700.
Обычный, курсив и наклонный текст: важно для цитат и акцентов.
Расширенный/сжатый шрифт: condensed, expanded, по указанному проценту.
Расстояние между строками: ключ читаемости текста.
Автоматическая регулировка расстояний между буквами.
Управление начертанием цифр: lining/oldsyth и совсем испытат.
Продвинутые возможности OpenType: лигатуры, стилистические наборы.
Один файл, тысячи начертаний: веса и оси управляются свойствами.
Автоматическая подстройка начертания под размер текста.
Разрешает браузеру «синтезировать» курсив/жирность, если их нет.
Расстояние между буквами: разрядка заголовков и акцентов.
Расстояние между словами: тонкая настройка строки.
Выравнивание текста: left, right, center, justify.
Выравнивание последней строки абзаца.
Линии: подчёркивание, зачёркивание, надчёркивание.
Тип линии: solid, dotted, dashed, wavy.
Толщина линии оформления текста.
Расстояние подчёркивания от букв.
Преобразование регистра: uppercase, lowercase, capitalize.
Тень для букв: эффект глубины и читаемости на фоне.
Многоточие при переполнении строки в паре с overflow и nowrap.
Как сохраняются пробелы и переносы: nowrap, pre, break-spaces.
Перенос длинных слов: где и как ломать строку.
Перенос строки внутри слов: спасение от выпирающих URL.
Автоперенос через дефис по правилам языка (lang обязателен).
Отступ первой строки абзаца («красная строка»).
Позиция инлайновых элементов относительно строки и соседей.
Умное разбиение строк: balance для заголовков, pretty для абзацев.
Обрезает текст на фиксированном числе строк с многоточием.
Вертикальное письмо и поворот глифов для восточных языков.
Направление строк: горизонтальное или вертикальное — и LTR/RTL.
Управление авто-масштабированием текста в мобильных браузерах.
Направление текста: ltr или rtl на уровне документа.
Управление поведением текста в смешанных направлениях.
Подсказка браузеру о качестве отрисовки: скорость против чёткости.
Вынос знаков препинания за край строки: ровный край колонки.
Сколько пробелов занимает символ табуляции в pre/code.
Объединение цифр в одно место при вертикальном письме.
Размеры бывают абсолютными и относительными: ключ к гибкой вёрстке.
Абсолютная единица экрана: точная, но негибкая.
Относится к font-size родителя: удобно, но накапливается.
Относится к размеру корня (html): стабильная иерархия.
Значение от соответствующего размера родителя.
Доли ширины и высоты окна браузера.
Доля меньшей или большей стороны вьюпорта.
Ширина «0» текущего шрифта: удобно для меры строки.
Вертикальный «корпус» буквы: экзотичная, но осмысленная.
cm, mm, in, pt, pc — для печати и офисной вёрстки.
Смешивание единиц в одном значении: математика размеров.
Плавный диапазон размера: clamp(мин, предпочтит., макс).
Выбор меньшего или большего из двух значений.
Собственные свойства: значение с именем, переиспользование.
Переменные видимы в поддереве, где объявлены.
Второй аргумент var(): значение на случай отсутствия.
Тёмная и светлая темы через набор переменных.
Число раздельно от единицы: легче арифметика в calc().
У нуля единицы не нужны: факт экономии и чистоты кода.
Единый шаг отступов: сетка, выравнивание, системность.
Практика: весь размер шрифта и отступы в rem.
Размеры «дышат» вместе с экраном через clamp + vw.
Разница выбора: от родителя (% ) или от окна (vw/vh).
Размеры относительно контейнера: cqw, cqh, cqi и пр.
dvh, svh, lvh: учёт динамических панелей браузера.
Альтернативный текст картинки: читалка озвучит его слепому, поиск возьмёт в индекс.
Присваивает элементу имя класса для CSS-стилей и селекторов скриптов.
Разрешает пользователю редактировать содержимое прямо в браузере.
Хранит пользовательские данные элемента, доступные скриптам через dataset.
Задаёт направление текста: слева направо (ltr) или справа налево (rtl).
Подсказывает браузеру сохранить файл по ссылке, а не открыть в окне.
Разрешает элементу участие в drag&drop: браузерные события начинают работать.
Скрывает элемент из отображения и из дерева доступности одним атрибутом.
Задаёт целевой адрес ссылки: URL, якорь, почтовый или телефонный адрес.
Даёт элементу уникальное имя: для якорей, связи с label и скриптов.
Сообщает язык содержимого: переносы, синтез речи, проверка орфографии.
Ограничивает количество вводимых символов в поле ввода.
Имя поля формы: именно под этим ключом данные уходят на сервер.
Показывает пример ввода, пока поле пустое; исчезает при вводе.
Запрещает изменять поле, но значение отправляется с формой.
Описывает связь ссылки с документом: noopener, nofollow, external.
Обязательное поле: форма не отправится, пока не заполнено.
Явно объявляет роль элемента для считывающих программ, когда тег неясен.
Включает или отключает подчёркивание ошибок в текстовых полях.
Предоставляет несколько версий картинки для разных плотностей и ширин.
Управляет порядком фокуса при нажатии Tab: вручную установить порядок.
Определяет, где откроется ссылка: в текущей вкладке, новой или во фрейме.
Добавляет всплывающую подсказку при наведении: уточняет, но не заменяет текст.
Запрещает или разрешает автоматический перевод содержимого элемента.
Управляет автоматическим включением заглавных букв на мобильной клавиатуре.
Подсказывает браузеру, как автозаполнять поле: адрес, пароль, карту.
Передаёт фокус полю при загрузке страницы — пользователь сразу печатает.
Связывает label или output с полем по id: клик по подписи фокусирует поле.
Задаёт способ кодирования данных формы при отправке: особенно для файлов.
Определяет HTTP-метод отправки: get — в адресной строке, post — в теле.
Разрешает выбирать несколько значений в select или загружать несколько файлов.
Проверяет поле регулярным выражением прямо в браузере.
Ограничивает типы выбираемых файлов в поле input type=file.
Предвыбирает чекбокс или радио по умолчанию.
Зацикливает воспроизведение аудио или видео: после конца начинается снова.
Задаёт шаг изменения числовых полей: точность значений.
Начинает воспроизведение медиа сразу: требует тишины muted в большинстве браузеров.
Правило: тег описывает роль содержимого, а не его вид. Семантика помогает SEO, читалкам и коллегам.
Правильный порядок в head: кодировка первой, потом title, meta, стили, скрипты.
Title, description и заголовки определяют, как страница выглядит в выдаче.
Отмечает главный адрес страницы среди дублей: поисковик склеивает их.
Разметка для превью ссылок: заголовок, описание, картинка при шаринге.
Машиночитаемое описание контента в блоке script: рецепты, товары, статьи.
Файл для поисковых роботов: что можно сканировать, а что нет.
XML-файл со списком валидных страниц для ускорения индексации.
Мета-тег viewport задаёт ширину макета: без него мобильная страница съежится.
Значок сайта для вкладок и закладок: SVH, PNG и apple-touch-icon.
Язык и направление текста страницы: правильная разметка для всего мира.
Принцип: страница работает и без новых возможностей, а с ними — ещё лучше.
Атрибуты aria- уточняют, как элемент читается вспомогательными технологиями.
Все действия должны работать с клавиатуры: табуляция, Enter, Esc.
Векторная графика прямо в разметке: масштабируется без потери качества.
Все иконки в одном svg с symbol — спрайт загружается 1 раз и переиспользуется.
Картинки и фреймы грузятся по мере прокрутки: экономят трафик и контент быстрее.
Один тег img с srcset — разные версии для дисплеев и сеток.
Форма удобна, когда у каждого поля есть label, типы осмысленные, ошибки понятны.
Клиентская проверка ловит ошибки мгновенно, серверная — обязательна всегда.
Карты, видео и виджеты встраиваются в iframe: изоляция контента.
Аудио и видео дополняют фолбеком: несколько форматов и описательный текст.
defer ждёт разбора HTML, async исполняет сразу — выбор влияет на скорость.
Разметка данных прямо в тегах: поисковики собирают отзывы, цены, факты.
Тег в head запрещает индексацию и переходы по ссылкам страницы.
Браузерные метаданные темы: цвет адресной строки и схема оформления.
Ссылки на электронную почту, телефон, скачивание и якоря — один href.
Объединение ячеек rowspan/colspan и структура thead/tbody/tfoot.
Ответ «не найдено» понятным сообщением и ссылками — спасает ушедших посетителей.
Подсказки браузеру: preload грузит критичное, prefetch — следующее.
Подсказывает поисковику про версии страницы на разных языках.
Собственные теги на автономном JS: инкапсуляция разметки, стилей и логики.
Заметки в коде, невидимые пользователю: <!-- текст -->.
Спецсимволы через &код;: <, &, и кавычки.
Собственные атрибуты с вашими данными для JS и тестов.
Семантика для скринридеров: role, aria-label, live-области.
Как сделать HTML и ресурсы легче: минификация, gzip, кэш.
Скорость загрузки: LCP, шрифты, preload, тяжёлая графика.
XSS, rel="noopener", CSP: защита сайта от атак.
Запрос и ответ: методы, статусы, заголовки, кэш.
Где живёт сайт: хостинг, статические площадки, storage.
Открыть сайт с диска или поднять локальный сервер.
Как появились HTML, CSS, JS и что дал стандарт HTML5.
Где смотреть свойства и поддержку браузеров.
Один и тот же сайт в разных браузерах и устройствах.
Что означают 200, 301, 404, 500 и как они управляют браузером.
Формат, сжатие, размеры: фото и видео без лишних мегабайт.
Браузер, сервер, DNS, домены: путь клика до загрузки страницы.
Главный тег навигации: превращает текст или картинку в кликабельную ссылку на другую страницу, якорь или файл.
Оформляет аббревиатуру и раскрывает её значение при наведении и для считывающих программ.
Размечает контактную информацию раздела или страницы: адрес, телефон, почту.
Задаёт кликабельную область внутри карты-изображения map: прямоугольник, круг или полигон.
Отмечает независимый контент, который имеет смысл сам по себе: статью, пост, карточку новости.
Отделяет связанный, но вспомогательный контент: сайдбар, цитату, блок «об авторе».
Встраивает аудиоплеер без плагинов: воспроизведение, пауза, громкость.
Выделяет текст жирным для чисто визуального акцента, не меняя смысла.
Задаёт базовый URL для всех относительных ссылок страницы: один тег в head.
Отделяет участок текста с направлением письма, чтобы он не влиял на соседей.
Принудительно меняет направление письма внутри текста.
Оформляет длинную цитату отдельным блоком с указанием источника.
Корневой контейнер всего видимого содержимого документа: один на страницу.
Принудительный перенос строки внутри текста там, где составные части — одна строка по смыслу.
Интерактивная кнопка для действий интерфейса: отправка форм, вызов скриптов.
Область для программного рисования через JavaScript API: графика, диаграммы, игры.
Подписывает таблицу: подпись доступна читалке и стоит над таблицей.
Указывает название цитируемого произведения: книги, фильма, статьи, песни.
Размечает фрагмент программного кода в строке текста моноширинным шрифтом.
Описывает свойства целой колонки: ширину или фон без повторения в каждой ячейке.
Группирует колонки таблицы для общей стилизации через вложенные col.
Связывает содержимое с машинным значением через атрибут value.
Предоставляет список подсказок для поля ввода: пользователь выбирает или вводит своё.
Задаёт определение или значение термина внутри списка описаний dl.
Отмечает удалённую часть текста: старую цену, исправление, убранный фрагмент.
Создаёт сворачиваемый блок, открываемый кликом, без единой строчки JavaScript.
Отмечает определяемый здесь термин: первое упоминание с объяснением.
Показывает модальное или обычное диалоговое окно, управляемое open и showModal().
Универсальный контейнер без своего значения: группа элементов для стилей и раскладки.
Список описаний вида «термин — определение»: глоссарий, параметры, FAQ.
Задаёт термин внутри списка описаний dl, которому соответствует dd.
Выделяет текст с логическим ударением: синтезатор произнесёт его с напряжением.
Встраивает внешний контент: анимации, плагины, визуализации через атрибут src.
Группирует связанные поля формы и окружает их рамкой, а legend даёт подпись.
Даёт подпись к figure: пояснение к картинке, диаграмме, фрагменту кода.
Оборачивает самодостаточное содержимое — картинку, схему, график — с подписью figcaption.
Описывает завершающую часть секции или страницы: копирайты, ссылки, контакты.
Контейнер интерактивных данных: собирает значения полей и отправляет их на сервер.
Самый важный заголовок страницы: один на документ, определяет его тему.
Заголовок второго уровня: начинает раздел внутри h1, структурирует текст.
Заголовок третьего уровня: выделяет подраздел внутри h2.
Заголовок четвёртого уровня для глубокой структуры длинных документов.
Заголовок пятого уровня для очень детальных технических документов.
Самый глубокий заголовок — крайний случай, который лучше избегать.
Служебная зона документа: метаданные, стили, шрифты, подключения скриптов.
Вводная часть страницы или секции: логотип, навигация, заголовок.
Группирует заголовок и подзаголовок, чтобы они читались одним смысловым блоком.
Тематическое разделение контента горизонтальной линией: граница сцен или разделов.
Корневой элемент страницы: оборачивает head и body, задаёт язык документа.
Наклонный текст без смыслового акцента: термины, мысли, иностранные слова.
Встраивает в страницу другую страницу или виджет: видео, карту, документ.
Встраивает изображение на страницу: один тег, атрибуты src и alt обязательны.
Универсальный элемент форм: текст, число, дата, файл, чекбокс — тип задаётся атрибутом.
Отмечает текст, добавленный в документ: исправления, дополнения, новую цену.
Размечает клавишу или сочетание клавиш, которое нужно нажать.
Подписывает поле формы и включает его в клик: клик по подписи фокусирует поле.
Даёт имя группе полей fieldset: читалка озвучит его перед вариантами.
Элемент списка: пункт в ul, ol или menu.
Подключает внешние ресурсы из head: стили, иконки, канонические адреса.
Выделяет основной контент страницы: он единственный и подчёркивает суть.
Привязывает кликабельные зоны (area) к изображению через атрибут usemap.
Подсвечивает фрагмент текста, который важно выделить: результат поиска, ключевую мысль.
Список действий или команд интерфейса, близкий к ul по поведению в вёрстке.
Разовые метаданные документа: кодировка, описание, авторы, Open Graph.
Показывает измеряемое значение в диапазоне: загрузку диска, заполненность.
Отмечает основной блок навигации: меню сайта, оглавление, список разделов.
Показывает контент, когда JavaScript отключён или не выполняется.
Встраивает документ, картинку или медиа с указанием type: универсальный «встроитель».
Список с порядковыми номерами: шаги инструкции, рейтинг, этапы.
Группирует элементы option в выпадающем списке: категории для навигации.
Один вариант выбора в select/datalist; value определяет отправляемое значение.
Отображает результат вычисления (форма, скрипт): живое значение без обновления DOM.
Базовый блок текста: один абзац — одна связная мысль.
Выбирает лучший вариант картинки по медиаусловиям и формату через source.
Сохраняет пробелы и переносы как в коде: для примеров кода и схем.
Показывает ход выполнения задачи: загрузки, прогресса, заполнения.
Оформляет цитату внутри строки: браузер добавит кавычки.
Показывает скобки вокруг фуриганы в ruby для браузеров без поддержки.
Добавляет произношение (фуригану) над иероглифом в ruby.
Группирует иероглиф с его произношением: фуригана у восточных письменностей.
Отмечает текст, который больше не актуален или неверен: старое значение, устаревшее.
Размечает вывод программы или результат команды моноширинным шрифтом.
Подключает или встраивает JavaScript: внешний файл через src или inline-код.
Обозначает самостоятельный тематический раздел в документе с своим смыслом.
Оборачивает элементы поиска: поле ввода, кнопку, подсказки как единый блок.
Поле выбора одного или нескольких вариантов из списка option.
Точка подстановки контента в веб-компоненте: сюда попадает разметка пользователя.
Обозначает менее значимый контент: примечания, копирайты, дисклеймеры.
Указывает формат и источник для audio/video/picture: несколько вариантов по типам.
Универсальный строчный контейнер для стилизации фрагмента текста.
Выделяет действительно важный текст: читалка озвучит его с усилением.
Встраивает CSS в документ: стили для этой страницы, scoped-контекст.
Опускает текст вниз строки: формулы, химические обозначения.
Видимый заголовок сворачиваемого блока details: клик по нему открывает/закрывает.
Поднимает текст: степени, сноски, порядковые показатели.
Структурирует данные в строки и колонки: прайсы, графики, справочники.
Группирует строки данных таблицы отдельно от заголовков and подвала.
Обычная ячейка таблицы, содержащая значение в строке.
Хранит разметку, которую не показывают, но клонируют скриптом.
Многострочное текстовое поле для отзывов, комментариев, кода.
Строка итогов таблицы: суммы, итоги, примечания внизу таблицы.
Ячейка-заголовок таблицы: читалка озвучивает её как имя данных колонки.
Группирует строки заголовков таблицы: первая логическая часть.
Машиночитаемая дата или время с атрибутом datetime для программ.
Заголовок документа во вкладке браузера и в поисковой выдаче.
Строка таблицы, объединяющая ячейки td/th.
Добавляет субтитры, переводы или подписи (для глухих) к видео в формате WebVTT.
Подчеркивает текст без изменения смысла: иноязычные фразы, имена собственные.
Маркированный список без нумерации: элементы, меню, категории.
Размечает переменную в математике или коде: курсором читалка назовёт её.
Встраивает видеоплеер: источники, управление, постер.
Разрешает браузеру переносить строку в этом месте без видимого символа.
Все уроки открыты без регистрации и оплаты.
Каждый раздел с примерами кода, которые можно запустить.
Сайт адаптирован под мобильные устройства и планшеты.
Логичная последовательность: язык, БД, инструменты, веб-разработка.
Всё, что вы видите здесь, создано с помощью опенкода — искусственного интеллекта, который помогает писать код. Человек объяснял нейросети, что нужно сделать, а она писала код и собирала страницы.
Научиться программировать с помощью этого сайта, возможно, не получится. Но, может быть, он просто поможет вам понять, что такое программирование. Это не магия и не секретные знания. Это умение объяснять компьютеру, что делать, — а научиться этому может каждый.