Онлайн учебники и справочники
HTML, CSS, JavaScript и jQuery: уроки для начинающих и подробный справочник с примерами, которые можно изменить и запустить прямо на странице.
Например:flexborder-radiusArray.mapopacityform
1 207 материалов · 4 раздела · бесплатно и без регистрации
Разделы
HTML
326 материаловСтруктура страницы: теги, текст, ссылки, изображения, таблицы и формы.
CSS
316 материаловОформление и раскладка: цвета, шрифты, flexbox, grid и позиционирование.
JavaScript
294 материалаВстроенные объекты языка и их методы с примерами, которые можно запустить.
jQuery
271 материалВыбор элементов, события, эффекты и AJAX-запросы в библиотеке jQuery.
Хочешь научиться создавать сайты? Начни с учебника HTML— он научит создавать страницы, а с помощью учебника CSS ты сможешь их стилизовать.
Инструменты для разработки
СобеседованияПрактика и пробное собеседование по вашему набору: темы, записи и самооценка.Формы и валидацияСобирайте HTML-формы, исследуйте ограничения, доступность и данные; решайте задания.Размеры и позиционированиеИсследуйте блочную модель и позиционирование: размеры, отступы, relative, absolute, fixed и sticky.СелекторыЗадания на селекторы с мгновенной проверкой и подсветкой.Специфичность и каскадЗадания на специфичность, !important, слои и наследование.Переменные и темыИсточники CSS-переменных, наследование, fallback, @property и темы из палитры.Позиционные селекторыФормула an+b, odd/even и of S на живом примере; nth-child против nth-of-type.Координаты SVGViewBox и preserveAspectRatio: масштаб, обрезка, выравнивание и практические задания.Вёрстка 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.ПереходыПереходы transition: свойства на шкале времени, обратный переход и появление элемента.Переходы состоянийАнимация смены DOM и страниц: списки, фильтры, карточки, аккордеон, галерея, вкладки, тема и переход между HTML-страницами.Кривая плавностиРедактор 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-кодирование и декодирование с кириллицей, данные форм, разбор адреса и домены в Punycode.Экранирование HTMLЭкранирование и декодирование HTML: < & , коды символов и поиск невидимых символов.Строки JS и JSONТекст в строку JavaScript или JSON и обратно: кавычки, \n, \uXXXX, шаблонные строки, ошибки с позицией.Декодер JWTЗаголовок и данные токена JWT, срок действия и даты в читаемом виде, проверка подписи по ключу.Хэши MD5 и SHAMD5, SHA-1, SHA-256, SHA-384 и SHA-512 для текста и файлов, HMAC и сверка контрольной суммы.Оптимизация SVGСжатие SVG через SVGO с сохранением viewBox, ID и доступных названий, сравнение до и после.ВолныМногослойные волны и разделители секций: форма, цвета, SVG и CSS-фон.Редактор путиКоманды d, перемещение точек, перевод координат и CSS-анимация рисования линии.SVG-спрайтНесколько SVG-иконок в одном файле: symbol, уникальные ID, предпросмотр и код use.SVG в CSSSVG в Data URI для background-image и mask-image, URL-кодирование или Base64, и обратно.SVG в JSX и VueSVG в компонент React (JSX или TSX) или Vue: атрибуты, style, currentColor и пропсы.