Все статьи

Карта сайта - все опубликованные страницы блога, сгруппированные по разделам и урокам. Разворачивай нужный раздел и переходи прямо к уроку.

HTML - основы44 урока с нуля до семантики CSS - стили53 урока: селекторы, Flexbox, Grid CSS - анимации35 уроков живых интерфейсов Мини-проекты4 готовые страницы с разбором кода

44уроков HTML опубликовано

53уроков CSS опубликовано

35уроков CSS-анимаций опубликовано

4мини-проекта

6страниц блога

HTML - основы

1. Введение в HTML5 уроков

01Что такое HTML и как он работает→ 02Структура HTML-документа→ 03Теги, атрибуты и вложенность→ 04HTML-сущности: как показать символы <, > и &→ 05Комментарии и правила читаемого кода→

2. Текст и заголовки10 уроков

06HTML-заголовки: структура и применение→ 07Что такое абзац в HTML→ 08Тег hr и br: тематический разрыв и перенос строки→ 09Списки: ul, ol и вложенные списки→ 10Списки определений: теги dl, dt и dd→ 11Выделение текста: strong, em, mark→ 12Ещё 7 тегов HTML: abbr, time, sub, sup, small, del, ins→ 13Ещё 7 тегов HTML: kbd, samp, s, u, var, data, dfn→ 14Ссылки: тег a и его атрибуты→ 15Цитаты и блоки кода в тексте→

3. Медиа и таблицы8 уроков

16Изображения: тег img и атрибут alt→ 17Видео и аудио в HTML5→ 18Подпись к картинке: figure и figcaption→ 19Адаптивные изображения: picture и srcset→ 20Таблицы: table, tr, td, th→ 21Объединение ячеек: colspan и rowspan→ 22Секции таблицы: thead, tbody, tfoot и caption→ 23iframe: встраивание внешнего контента→

4. Формы9 уроков

24Тег form и как отправляются данные→ 25Поля ввода: input и его типы→ 26Автозаполнение в HTML: тег datalist→ 27label, placeholder и доступность форм→ 28select, textarea и checkbox/radio→ 29Индикаторы в HTML: теги progress и meter→ 30Встроенная валидация форм→ 31Группировка полей: fieldset и legend→ 32Кнопки: button vs input type=submit→

5. Семантика и доступность12 уроков

33Семантическая вёрстка: header, main, footer→ 34nav, article, section, aside→ 35Ещё 2 семантических тега HTML: address и search→ 36Аккордеон на чистом HTML: теги details и summary→ 37Модальное окно на HTML без JS-библиотек: тег dialog→ 38ARIA-атрибуты: когда они нужны→ 39Мета-теги и SEO-разметка head→ 40Микроразметка Schema.org на практике→ 41Валидация HTML и типичные ошибки→ 42data-атрибуты и работа с ними→ 43Итоговый чек-лист по HTML-основам→ 44Мини-проект: собираем страницу «Визитка»→

CSS - стили

1. Введение в CSS3 урока

01Что такое CSS и как он работает→ 02Три способа подключения CSS: инлайн, внутренний и внешний→ 03Комментарии в CSS: как закомментировать код→

2. Селекторы8 уроков

04Селекторы типа, класса и id - три базовых способа выбора элементов→ 05Групповые и универсальный селекторы→ 06Селекторы по атрибуту: [attr] и [attr=value]→ 07Комбинаторы: потомок, дочерний, соседние элементы→ 08Псевдоклассы: :hover, :focus, :nth-child и другие→ 09Псевдоэлементы ::before и ::after→ 10Каскад и специфичность: что побеждает в CSS→ 11Наследование: какие свойства передаются от родителя→

3. Текст6 уроков

12Цвет текста: свойство color→ 13Семейство шрифтов: font-family→ 14Подключение своих шрифтов: @font-face и Google Fonts→ 15Размер шрифта и единицы измерения: px, em, rem→ 16Насыщенность шрифта: font-weight→ 17Выравнивание и оформление текста: text-align и text-decoration→

4. Цвета и фоны3 урока

18Цвет фона: background-color→ 19Форматы цвета: HEX, RGB и RGBA→ 20Градиенты и фоновые изображения: background-image, linear-gradient→

5. Блочная модель9 уроков

21Что такое блочная модель CSS→ 22Внутренние отступы: padding→ 23Внешние отступы: margin→ 24Границы: border→ 25Ширина и высота: width и height→ 26Box-sizing: content-box и border-box→ 27Скругление углов: border-radius→ 28Overflow: что делать с содержимым, которое не помещается→ 29Тени: box-shadow→

6. Flexbox5 уроков

30Что такое Flexbox и зачем он нужен→ 31Направление: flex-direction→ 32Выравнивание по главной оси: justify-content→ 33Выравнивание по поперечной оси: align-items→ 34Идеальное центрирование элемента на CSS→

7. CSS Grid3 урока

35Что такое CSS Grid и зачем он нужен→ 36Создание сетки: grid-template-columns и grid-template-rows→ 37Позиционирование в сетке: grid-column, grid-row и grid-area→

8. Позиционирование7 уроков

38Блочные и строчные элементы: display block, inline, inline-block→ 39Основы позиционирования: свойство position→ 40Относительное позиционирование→ 41Абсолютное позиционирование→ 42Фиксированное позиционирование→ 43«Прилипающее» позиционирование: position sticky→ 44Z-index и порядок наложения→

9. Адаптивный дизайн6 уроков

45Что такое адаптивный дизайн→ 46Метатег viewport→ 47Гибкие макеты: относительные единицы вместо px→ 48Единицы измерения viewport: vw, vh, vmin, vmax→ 49Основы media queries→ 50Гибкие изображения→

10. Переменные и вычисления2 урока

51Переменные CSS: --custom-свойства и функция var()→ 52Функция calc()→

11. Итоги курса1 урок

53Итоговый чек-лист по CSS-основам→

CSS - анимации

1. Переходы: transition6 уроков

01Что такое CSS-переходы и как они работают→ 02Какие свойства можно анимировать: transition-property→ 03Длительность и задержка: transition-duration и transition-delay→ 04Функции плавности: transition-timing-function→ 05Сокращённое свойство transition→ 06Анимация при наведении: практика с transition и :hover→

2. Трансформации: transform8 уроков

07Что такое CSS-трансформации: свойство transform→ 08Перемещение элементов: translate, translateX, translateY→ 09Масштабирование: scale, scaleX, scaleY→ 10Как повернуть элемент в CSS: rotate→ 11Наклон элементов: skew→ 12Порядок и комбинирование трансформаций→ 13Точка трансформации: transform-origin→ 14Матрица трансформаций: matrix() и matrix3d()→

3. Ключевые кадры и animation8 уроков

15Правило @keyframes: создаём анимацию с нуля→ 16Свойство animation-name и подключение анимации→ 17Длительность и повтор: animation-duration и animation-iteration-count→ 18Направление анимации: animation-direction→ 19Функция плавности анимации: animation-timing-function→ 20Что происходит до и после: animation-fill-mode→ 21Пауза и запуск: animation-play-state→ 22animation: сокращённая запись и несколько анимаций через запятую→

4. Фильтры: filter4 урока

23filter: визуальные эффекты, которые раньше делали только в Photoshop→ 24Размытие и яркость: blur, brightness, contrast→ 25Оттенки и насыщенность: grayscale, sepia, saturate, hue-rotate→ 26backdrop-filter: матовое стекло за полупрозрачным блоком→

5. Практика: живые интерфейсы5 уроков

27Анимированные кнопки и ссылки: практика→ 28Анимация появления элементов при загрузке страницы→ 29Индикатор загрузки на чистом CSS→ 30Аккордеон и раскрывающееся меню с анимацией→ 31Мини-проект: анимированная карточка товара→

6. Производительность и доступность4 урока

32Как анимации влияют на производительность страницы→ 33will-change: подсказка браузеру о будущей анимации→ 34prefers-reduced-motion: уважение к выбору пользователя→ 35View Transitions API: плавные переходы между страницами без JavaScript→

Мини-проекты

Готовые страницы с разбором кода4 проекта

01Мини-проект: страница «Визитка»→ 02Мини-проект: сайт-портфолио→ 03Мини-проект: форма регистрации и входа→ 04Мини-проект: анимированная карточка товара→

Страницы блога

О блогеЧто это за сайт и для кого он Об автореКто пишет уроки и почему КонтактыTelegram, email и соцсети Частые вопросыОтветы на популярные вопросы Политика конфиденциальностиКакие данные собираются ДисклеймерОб точности и использовании материалов