HTML и CSS с абсолютного нуля
Структура веб-страницы, семантический HTML, CSS, box model, Flexbox и адаптивность.
← Все курсы
HTML · Ноль → уверенная вёрстка
КАК ПРОХОДИТЬ КУРС
Не листай уроки как обычный справочник
Переходи дальше только после того, как можешь воспроизвести идею самостоятельно и понимаешь, зачем она нужна.
01Понятьновую идею
02Повторитьпример руками
03Изменитьи проверить эффект
04Решитьсамостоятельно
05Проверитьпонимание
06Применитьв проекте
КОНТРОЛЬ ЗНАНИЙ
Войти для прохождения →Контрольные точки и итоговый экзамен
После модулей закрепляй материал практикой и проверками. Курс считается освоенным только после выполнения критериев, а не после простого открытия всех страниц.
ПРОГРАММА
0 из 54 подтвержденоСодержание курса
МОДУЛЬ
0 / 4 уроковHTML
МОДУЛЬ
0 / 6 уроковCSS
04
Изучить →05
Изучить →06
Изучить →07
Изучить →08
Изучить →09
Изучить →
Первый CSS
CSS-правило выбирает элемент и задаёт свойства.
class и повторное использование
Класс позволяет применять стиль многократно.
Flexbox
Flexbox раскладывает элементы по осям.
Box model: content, padding, border, margin
Каждый элемент занимает прямоугольную область.
Flexbox: выстраиваем элементы
Flexbox решает большинство одномерных раскладок.
Grid: строки и колонки
CSS Grid удобен для двумерных сеток.
МОДУЛЬ
0 / 1 уроковАдаптивность
МОДУЛЬ
0 / 1 уроковПроект
МОДУЛЬ
0 / 12 уроковСовременный HTML/CSS
21
Изучить →22
Изучить →23
Изучить →24
Изучить →25
Изучить →26
Изучить →27
Изучить →28
Изучить →29
Изучить →30
Изучить →31
Изучить →32
Изучить →
CSS variables
В этом уроке тема «CSS variables» разбирается не как готовая команда, а как инструмент для конкретной задачи.
::before и ::after
В этом уроке тема «::before и ::after» разбирается не как готовая команда, а как инструмент для конкретной задачи.
position
В этом уроке тема «position» разбирается не как готовая команда, а как инструмент для конкретной задачи.
z-index и stacking context
В этом уроке тема «z-index и stacking context» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Адаптивная типографика
В этом уроке тема «Адаптивная типографика» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Mobile-first
В этом уроке тема «Mobile-first» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Container queries
В этом уроке тема «Container queries» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Доступность и reduced motion
В этом уроке тема «Доступность и reduced motion» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Transitions и animations
В этом уроке тема «Transitions и animations» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Состояния форм
В этом уроке тема «Состояния форм» разбирается не как готовая команда, а как инструмент для конкретной задачи.
CSS-компоненты
В этом уроке тема «CSS-компоненты» разбирается не как готовая команда, а как инструмент для конкретной задачи.
Итог HTML/CSS
В этом уроке тема «Итог HTML/CSS» разбирается не как готовая команда, а как инструмент для конкретной задачи.
МОДУЛЬ
0 / 30 уроковProfessional
33
Изучить →34
Изучить →35
Изучить →36
Изучить →37
Изучить →38
Изучить →39
Изучить →40
Изучить →41
Изучить →42
Изучить →43
Изучить →44
Изучить →45
Изучить →46
Изучить →47
Изучить →48
Изучить →49
Изучить →50
Изучить →51
Изучить →52
Изучить →53
Изучить →54
Изучить →55
Изучить →56
Изучить →57
Изучить →58
Изучить →59
Изучить →60
Изучить →61
Изучить →62
Изучить →
SEO basics
В этом уроке «SEO basics» разбирается от проблемы к решению, а не как набор команд.
Open Graph
В этом уроке «Open Graph» разбирается от проблемы к решению, а не как набор команд.
Accessible forms
В этом уроке «Accessible forms» разбирается от проблемы к решению, а не как набор команд.
ARIA: когда не нужна
В этом уроке «ARIA: когда не нужна» разбирается от проблемы к решению, а не как набор команд.
Cascade layers
В этом уроке «Cascade layers» разбирается от проблемы к решению, а не как набор команд.
Specificity control
В этом уроке «Specificity control» разбирается от проблемы к решению, а не как набор команд.
Logical properties
В этом уроке «Logical properties» разбирается от проблемы к решению, а не как набор команд.
Subgrid
В этом уроке «Subgrid» разбирается от проблемы к решению, а не как набор команд.
Aspect ratio и media
В этом уроке «Aspect ratio и media» разбирается от проблемы к решению, а не как набор команд.
Responsive images
В этом уроке «Responsive images» разбирается от проблемы к решению, а не как набор команд.
Critical rendering path
В этом уроке «Critical rendering path» разбирается от проблемы к решению, а не как набор команд.
Web fonts
В этом уроке «Web fonts» разбирается от проблемы к решению, а не как набор команд.
CLS и размеры
В этом уроке «CLS и размеры» разбирается от проблемы к решению, а не как набор команд.
Design tokens
В этом уроке «Design tokens» разбирается от проблемы к решению, а не как набор команд.
Component states
В этом уроке «Component states» разбирается от проблемы к решению, а не как набор команд.
Dark theme system
В этом уроке «Dark theme system» разбирается от проблемы к решению, а не как набор команд.
CSS naming architecture
В этом уроке «CSS naming architecture» разбирается от проблемы к решению, а не как набор команд.
Utility thinking
В этом уроке «Utility thinking» разбирается от проблемы к решению, а не как набор команд.
Visual regression mindset
В этом уроке «Visual regression mindset» разбирается от проблемы к решению, а не как набор команд.
Browser compatibility
В этом уроке «Browser compatibility» разбирается от проблемы к решению, а не как набор команд.
Print stylesheet
В этом уроке «Print stylesheet» разбирается от проблемы к решению, а не как набор команд.
Empty loading error states
В этом уроке «Empty loading error states» разбирается от проблемы к решению, а не как набор команд.
Content hierarchy
В этом уроке «Content hierarchy» разбирается от проблемы к решению, а не как набор команд.
Form error recovery
В этом уроке «Form error recovery» разбирается от проблемы к решению, а не как набор команд.
HTML CSS JS boundary
В этом уроке «HTML CSS JS boundary» разбирается от проблемы к решению, а не как набор команд.
Backend components
В этом уроке «Backend components» разбирается от проблемы к решению, а не как набор команд.
Case-study page
В этом уроке «Case-study page» разбирается от проблемы к решению, а не как набор команд.
Performance audit
В этом уроке «Performance audit» разбирается от проблемы к решению, а не как набор команд.
Accessibility audit
В этом уроке «Accessibility audit» разбирается от проблемы к решению, а не как набор команд.
Профессиональный HTML/CSS capstone
В этом уроке «Профессиональный HTML/CSS capstone» разбирается от проблемы к решению, а не как набор команд.