HTML и CSS
Структура и дизайн веб-страниц
Научись создавать веб-страницы с нуля: разберись, как устроен веб, размечай с помощью HTML текст, списки, таблицы, ссылки, изображения и формы и делай страницы доступными для всех с помощью семантических элементов. Затем придай им красивый вид с помощью CSS: селекторы, каскад, блочная модель, Flexbox, Grid, адаптивный дизайн, анимации и переменные. Все примеры работают прямо в браузере, поэтому результат каждого изменения виден сразу.
Содержание курса
Основы HTML
НачальныйУзнай, как устроен веб, и напиши первые страницы с текстом, списками, таблицами, ссылками и изображениями.
- 1Как устроен веб: твоя первая HTML-страницаУзнай, что происходит, когда ты открываешь сайт, и напиши первую HTML-страницу с тегами, элементами и атрибутами.15 мин
- 2Текст, списки и таблицыСтруктурируй текст заголовками и абзацами, выделяй главное и упорядочивай информацию в списках и таблицах.18 мин
- 3Ссылки и изображенияСвязывай страницы ссылками, переходи к разделам внутри страницы и добавляй изображения с осмысленным альтернативным текстом.16 мин
Формы и семантический HTML
НачальныйСоздавай формы, которые собирают данные от пользователей, и делай страницы понятными и людям, и скринридерам.
- 4Формы и поля вводаСоздавай формы с подписями, подходящими типами полей и встроенной проверкой, которая контролирует данные до отправки.18 мин
- 5Семантический HTML и доступностьИспользуй элементы, которые описывают смысл содержимого, и делай страницы удобными для всех, в том числе для пользователей скринридеров.16 мин
Основы CSS
СреднийУправляй внешним видом страницы с помощью селекторов, цветов, шрифтов, каскада и блочной модели.
- 6Основы CSS: селекторы, цвета, шрифты и каскадУзнай, как пишутся правила CSS, выбирай элементы селекторами, задавай цвета, единицы измерения и шрифты и разберись, какое правило побеждает при конфликте.22 мин
- 7Блочная модельУзнай, что каждый элемент — это блок из содержимого, внутреннего отступа, рамки и внешнего отступа, научись правильно считать размеры и упрощать себе жизнь с помощью `box-sizing`.18 мин
Раскладка страниц и современный CSS
ПродвинутыйСтрой страницы, которые подстраиваются под любой экран, с помощью Flexbox и Grid и оживляй их переходами, анимациями и CSS-переменными.
- 8Flexbox: раскладка элементов в линиюС помощью Flexbox выстраивай элементы в строку или столбец, распределяй пространство между ними, центрируй их и подстраивай под доступное место.20 мин
- 9CSS Grid и адаптивный дизайнСтрой макеты страниц из строк и столбцов с помощью CSS Grid и подстраивай их под любой экран медиазапросами и подходом «сначала мобильные».22 мин
- 10Переходы, анимации и CSS-переменныеХрани цвета и размеры в CSS-переменных и оживляй страницы плавными переходами и анимациями `@keyframes`, не забывая о пользователях, чувствительных к движению.20 мин