F

HTML

Семантика, формы, доступность и мета-теги

1

Семантическая разметка

Начальный

Семантические теги HTML передают смысл содержимого, улучшают доступность и помогают поисковикам понять структуру страницы.

7 мин
2

Работа с формами

Начальный

HTML-формы — основной способ сбора данных от пользователя. Правильная разметка улучшает UX, доступность и валидацию.

9 мин
3

Доступность (a11y)

Средний

Веб-доступность позволяет людям с ограниченными возможностями использовать ваш сайт. ARIA, семантика и клавиатурная навигация — ключевые инструменты.

10 мин
4

Мета-теги и SEO

Начальный

Мета-теги в <head> управляют тем, как браузер и поисковые системы интерпретируют страницу и отображают её в результатах поиска.

6 мин
5

Изображения в HTML: форматы WebP и AVIF, srcset, picture, lazy loading

Начальный

Изображения в HTML — форматы WebP и AVIF, адаптивные изображения через srcset и picture, ленивая загрузка loading=lazy, декодирование и лучшие практики оптимизации графики.

9 мин
6

Видео и аудио в HTML: video, audio, iframe, встраивание YouTube

Начальный

Медиа-элементы HTML — video и audio с субтитрами, iframe для YouTube, адаптивные видеоплееры, атрибуты controls autoplay muted и форматы видео.

8 мин
7

Таблицы в HTML: table, thead, tbody, адаптивные таблицы

Начальный

HTML таблицы — table, thead, tbody, tfoot, th, colspan, rowspan, адаптивные таблицы, стилизация CSS, доступность и caption для подписей.

7 мин
8

SVG: основы, inline SVG, анимации, иконки

Средний

SVG в веб-разработке — inline SVG, теги path, circle, rect, polygon, анимации через CSS и SMIL, система иконок, оптимизация и viewBox.

9 мин
9

Canvas API: рисование графики в браузере

Средний

Canvas API — рисование 2D-графики на HTML5 canvas. Линии, прямоугольники, круги, градиенты, текст, изображения, анимации и практические примеры.

10 мин
10

Web Components: Custom Elements, Shadow DOM, Templates

Средний

Web Components — нативные компоненты браузера. Custom Elements, Shadow DOM для инкапсуляции, HTML Templates и Slots, подключение стилей и атрибуты.

9 мин
11

Drag and Drop API: перетаскивание элементов в браузере

Средний

HTML Drag and Drop API — перетаскивание элементов мышью, dragstart, dragover, drop события, DataTransfer, сортируемые списки и загрузка файлов.

8 мин
12

Fullscreen API, Notification API, Clipboard API: браузерные API

Средний

Браузерные API — Fullscreen API для полноэкранного режима, Notification API для уведомлений, Clipboard API для копирования и вставки.

7 мин
13

Web Speech API: распознавание и синтез речи в браузере

Средний

Web Speech API — Speech Recognition для распознавания голоса, SpeechSynthesis для озвучивания текста, голосовое управление и доступность.

7 мин