HTML & CSS roadmap

Что такое язык HTML и зачем он нужен? 
 Что такое DOCTYPE? 
  Что размещается в <head>, а что в <body>?
Что такое тег? Категории тегов. Чем отличается <div> от <span>?
Доп. вопросы
Какие теги нельзя вложить друг в друга? Что произойдёт при незакрытом теге или неправильной вложенности?
Что такое семантическая разметка. Какие теги семантические и как их применять?
HTML5 теги
header, main, footer, section, article, aside, nav; blockqoute, address, time, em, strong, sup, sub; table, details, dialog, search; picture, figure, audio, video
Как делать разметку форм? Рассказать про input и его варианты type
Варианты type:
Наиболее применяемые: text, tel, email, password, number, checkbox, radio, file Все
Теги формы
<form> и его атрибуты: method, action, enctype, autocomplete, novalidate; <output>, <fieldset>, <legend>, <label>, <textarea>, <select> + <option>;
О form
Об атрибутах form
Общие Атрибуты и атрибуты input:
name, value, required, disabled, checked, autocomplete, inputmode, pattern, minlenght, maxlenght;
Интересные атрибуты элементов: hidden, lang data-, inert
Дилемма <button> или <a>. Атрибуты <a>
Как именовать сущности? Расскажите по БЭМ, Atomic CSS, OOCSS, SMACSS, ITCSS.
Задание:
сделать разметку страницы;
сделать разметку формы;
сделать разметку с использованием БЭМ

Расскажите про тег <video> и <audio>. Что такое autoplay и как он работает? Можно ли autoplay сделать со звуком?
Расскажите про работу с изображениями: <img> srcset, loading, <picture>, <source, <figure>, <figcaption>
Что такое ретиновые изображения? Как их вставить черeз html и css? (image-set)
Что такое фоновые избражения? Как создать градиентное изобаржения?
Какие есть способы скрытия элементы со страницы?
Стили для работы с изображением: aspect-ratio, object-position, object-fit, background-size

Что такое SVG?
Какие есть способы подключения SVG на страницу?
Как сделать и использовать SVG спрайт?
В чём отличие <g> от <symbol> и от <defs>? Что такое path? В чём отличие fill от stroke?
Как реализуются градиенты в SVG?

Что такое блочная модель? 
Что делает свойство box-sizing? 
Разница между margin и padding. 
Какая особенности у отступов margin?
Что такое селекторы? Виды селекторов. Что такое универсальный селектор?
Что такое каскадность, наследование и специфичность в css? В чём они отличаются?
Доп. вопросы:
Как изменить специфичность? :where
Что специфичнее:
.class vs header
.class.class vs header header
#id vs header
#id vs header !important
style='background: red' vs #id { background: blue;}
style='background: red' vs #id { background: blue; !important}
Что такое псевдоклассы и псевдоэлементы? Привести примеры. Что делают :has(), :not(), :is()
Виды позиционивания. 
Особенности position и z-index
Что такое состояния элементов и как ими можно управлять? 
Составные селекторы. Что такое: сестринский, дочерний селектор? Какие существуют селекторы по атрибуту?

Какие есть единицы измерения css и типы значений в css? 
Что делают директивы в css? @supports @media @font-face
Как можно выровнить элементы? 
Отличие Flex от Grid. В каких ситуациях лучше Flex, а в каких Grid?
Задание
Стилизовать карточки товаров на flex и на grid
Что такое Container Queries?
Какие есть способы стилизации текста? 
Как использовать text-decoration, text-shadow, text-transform? 
Что такое неразрывный пробел и когда и где его нужно ставить?
Доп. вопрос про шрифты
Как подключать, стилизовать, форматировать шрифты?
Какие языки имеют написание справа налево? 
Как изменить направление текcта? 
(lang + text-direction + dir) (margin-inline-start / end, margin-block)

Какие функции в css есть и что они делают? filter, color-mix, color-contrast; 
Как работает backdrop-filter?
css layers, css nesting
Рамки, тени. Реализовать треугольник, многоугольник, сердце. (Css графика)
Как можно управлять скроллом? 
 custom scrollbars: scroll-snap, scroll-behaviour, scroll-padding, scroll-color, scrollbar-gutter
Как в css создать анимацию?
Как улучшить перфоманс? will-change, content-visibility, translateZ(0)
Доп. вопросы
Виды минификации и пост процессинга css.
Является ли css render blocking и в каких случая?
Как оптимизировать загрузку css, rel=preload

Что такое Доступность?
Как обеспечить доступность интерактивных элементов и контента?
передвигаться с клавиатуры клавишей Tab при нажатии или фокусе с клавиатуры
Допускается делать недоступные для скринридеров элементы, если равносильная функциональность или контент уже доступны 
Как могут пригодится эти атрибуты для доступности: aria-label, label, alt, width, height, aria-hidden, focusable