Онлайн учебники и справочники
HTML, CSS, JavaScript и jQuery: уроки для начинающих и подробный справочник с примерами, которые можно изменить и запустить прямо на странице.
Например:flexborder-radiusArray.mapopacityform
1 207 материалов · 4 раздела · бесплатно и без регистрации
Разделы
HTML
326 материаловСтруктура страницы: теги, текст, ссылки, изображения, таблицы и формы.
CSS
316 материаловОформление и раскладка: цвета, шрифты, flexbox, grid и позиционирование.
JavaScript
294 материалаВстроенные объекты языка и их методы с примерами, которые можно запустить.
jQuery
271 материалВыбор элементов, события, эффекты и AJAX-запросы в библиотеке jQuery.
Инструменты и тренажёры для вёрстки
СелекторыЗадания на селекторы с мгновенной проверкой и подсветкой.Специфичность и каскадЗадания на специфичность, !important, слои и наследование.nth-childФормула an+b, odd/even и of S на живом примере; nth-child против nth-of-type.Вёрстка FlexboxСоберите flex-раскладку и скопируйте готовый CSS.Вёрстка GridНастройте сетку: колонки, строки и отступы.Единицы CSSПеревод px в rem, em, vw и других единицах, весь CSS из px в rem.Размер текстаПлавный размер шрифта и шкала отступов между двумя ширинами экрана: готовый clamp() и график.Шкала шрифтовМодульная шкала размеров h1–h6 и текста: коэффициент, плавная шкала через clamp() и CSS-переменные.Контейнерные запросыКарточка в двух колонках: @container против @media, container-type и единицы cqi.ЦветаПеревод цветов между форматами, шкала оттенков и проверка контраста.Градиенты и паттерныГрадиенты и паттерны: цвета, слои, полосы, точки и сетки.Градиентный текстГрадиентная заливка текста: цвета, слои и готовый CSS.Тень блокаТени блоков: галерея, мягкие многослойные тени, свечение и inset.Тень текстаТени текста: неон, обводка, объём и длинная тень.ФильтрыФильтры для изображений: цвет, размытие и тень по контуру.ТрансформацииСдвиг, поворот, масштаб и наклон в 2D и 3D: порядок функций по шагам.Фигурная обрезкаОбрезка по контуру через clip-path: галерея фигур, редактор точек и анимация.Скругление угловРадиусы углов, эллиптические формы, галерея и готовые анимации.СтеклоСтеклянные карточки: размытие фона, заливка, рамка и тень.АнимацииАнимации и ключевые кадры: движение, повторы и готовый CSS.Кривая плавностиРедактор cubic-bezier(): точки кривой, сравнение с ease, пресеты и пружина.HTML форматтерФорматирование и бережное сжатие HTML, проверка и форматирование XML с местом ошибки.CSS форматтерСжатие CSS без перестановки правил, сохранение /*! лицензий */ и обратное форматирование.JS форматтерСжатие JavaScript через Terser, форматирование JavaScript и TypeScript.Сравнение текстаРазличия двух текстов или фрагментов кода по строкам и словам, патч в формате diff.Регулярные выраженияТестер RegExp JavaScript: совпадения в тексте, группы, замена и объяснение конструкций.JSON форматтерФорматирование и проверка JSON: ошибка с номером строки, сжатие в одну строку.Сравнение JSONРазличия между двумя JSON по путям: добавленные, удалённые и изменённые значения.Исправление JSONНевалидный JSON в корректный: кавычки, лишние запятые, комментарии и список исправлений.JSON → TypeScriptИнтерфейсы и типы TypeScript по образцу JSON: вложенные объекты, массивы и необязательные поля.YAML ↔ JSONПреобразование YAML в JSON и обратно, проверка отступов и форматирование YAML.CSV ↔ JSONТаблица CSV или TSV в JSON и обратно: разделитель, заголовки, кавычки и предпросмотр.Base64 кодированиеBase64 с кириллицей и файлами, base64url и Data URI, распознавание картинок и других двоичных данных.Картинка в Base64Изображение в Data URI для CSS и <img>: предпросмотр и размер строки.URL-кодированиеURL-кодирование и декодирование с кириллицей, данные форм и разбор адреса на части.Экранирование HTMLЭкранирование и декодирование HTML: < & , коды символов и поиск невидимых символов.Декодер JWTЗаголовок и данные токена JWT, срок действия и даты в читаемом виде, без проверки подписи.Хэши MD5 и SHAMD5, SHA-1, SHA-256, SHA-384 и SHA-512 для текста и файлов, HMAC и сверка контрольной суммы.Оптимизация SVGСжатие SVG через SVGO с сохранением viewBox, ID и доступных названий, сравнение до и после.SVG в CSSSVG в Data URI для background-image и mask-image, URL-кодирование или Base64, и обратно.SVG в JSX и VueSVG в компонент React (JSX или TSX) или Vue: атрибуты, style, currentColor и пропсы.