Koddo
начать бесплатно

Справочник по вебу

От запроса к серверу до разметки, стилей и раскладки: DNS, HTTP и REST API, теги HTML, ссылки, картинки, таблицы и формы, селекторы CSS, шрифты, переменные, отступы, position, анимация, Flexbox и Grid. Примеры вёрстки открываются в HTML/CSS-песочнице.

Путь запроса

Что происходит, когда вводишь адрес сайта в браузере

Что происходит после ввода адреса в браузере: DNS, TCP, TLS, HTTP и отрисовка страницы. Пошаговый разбор со схемами, замерами curl и ответом для собеседования.

Что такое DNS простыми словами: сервер, записи и TTL

DNS переводит имя сайта в адрес сервера. Чем A отличается от CNAME, зачем MX и TXT, как проверить записи через dig и почему правки применяются не сразу.

Коды ответов HTTP: что значат 200, 301, 400, 404 и 500

Что означает каждый класс кодов HTTP и какой возвращать самому: 2xx, 3xx, 4xx, 5xx. Разбор 301 против 308, 401 против 403, 304 и «кода 0» — с замерами curl.

REST API простыми словами: ресурсы, методы и запросы

Как устроен REST API: URL, GET и POST, PUT и PATCH, JSON и статусы. Разбор API задач, повторных запросов и проверка HTTP через curl на своём компьютере.

HTML: разметка страницы

Теги HTML: основные теги страницы с примерами

Теги HTML с примерами: каркас страницы с head и body, заголовки h1–h6, абзацы, ссылки, картинки, списки и семантические теги. Таблица основных тегов.

Ссылки в HTML: тег a, href, якоря, телефон и почта

Как сделать ссылку в HTML: тег a и href, ссылка на раздел страницы, на телефон и почту, в новой вкладке, картинка-ссылка. Оформление в CSS и пример с кодом.

Картинки в HTML: img, alt, размеры и object-fit

Как вставить картинку в HTML: тег img, src и alt, размеры через width и height и через CSS, картинка на ширину блока, object-fit, figure и ленивая загрузка.

Таблицы в HTML: table, tr, td, объединение ячеек и оформление

Как сделать таблицу в HTML: table, tr, td и th, подпись и шапка, объединение ячеек через colspan и rowspan, рамки и прокрутка на телефоне. Пример с кодом.

Формы в HTML: form, input, label и проверка без JavaScript

Как сделать форму в HTML: form, input, select и label, что уходит на сервер и зачем полям name, проверка заполнения без JavaScript. Пример формы записи.

CSS: стили и раскладка

Селекторы CSS: виды, комбинаторы, псевдоклассы и специфичность

Селекторы CSS: по тегу, классу, id и атрибуту, комбинаторы, псевдоклассы и псевдоэлементы. Как считается специфичность. Шпаргалка и пример с кодом.

Отступы в CSS: margin и padding, блочная модель и box-sizing

Отступы в CSS: padding и margin, запись от одного до четырёх значений, блочная модель и box-sizing, схлопывание margin и gap. Пример с кодом.

position в CSS: relative, absolute, fixed и sticky на примерах

position в CSS: relative, absolute, fixed и sticky на примере. От чего отсчитывает absolute, почему sticky не прилипает и как работает z-index.

Flexbox в CSS: выравнивание, перенос и размеры элементов

Как работает Flexbox в CSS: главная и поперечная оси, gap, flex-wrap, grow, shrink и basis. Собираем адаптивную шапку и разбираем длинный текст с min-width: 0.

CSS Grid: адаптивная сетка карточек на одном примере

Как сделать адаптивную сетку карточек на CSS Grid: готовый HTML и CSS, разбор repeat, minmax и auto-fit, схемы и защита от переполнения на узком экране.

Как выровнять по центру в CSS: текст, блок и картинка

Как выровнять по центру в CSS: текст через text-align, блок через margin: auto, по обеим осям через Grid и Flexbox. Картинка и частые ошибки.

Анимация CSS: transition и @keyframes с примерами

Анимация CSS: плавный переход через transition, свои кадры через @keyframes и animation, спиннер загрузки, движение без рывков и prefers-reduced-motion.

CSS: стили и раскладка

Шрифты в CSS: font-family, размер, жирность и цвет текста

Как задать шрифт в CSS: font-family и запасные шрифты, подключение Google Fonts, размер в px, rem и em, жирность, межстрочный интервал и цвет текста.

CSS-переменные: --имя, var() и тёмная тема на примере

Как создать переменные в CSS: объявление в :root, var() с запасным значением, наследование и переопределение в блоке, тёмная тема и calc(). Пример с кодом.