Все статьи

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

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

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

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

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

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

150тегов в справочнике

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Мини-проект: анимированная карточка товара→

Справочник HTML-тегов

1. Основные теги (структура документа)11 тегов

01<doctype>→ 02<html>→ 03<head>→ 04<body>→ 05<title>→ 06<meta>→ 07<link>→ 08<style>→ 09<script>→ 10<noscript>→ 11<base>→

2. Семантические теги11 тегов

01<header>→ 02<nav>→ 03<main>→ 04<article>→ 05<section>→ 06<aside>→ 07<footer>→ 08<figure>→ 09<figcaption>→ 10<address>→ 11<search>→

3. Заголовки и абзацы10 тегов

01<h1>→ 02<h2>→ 03<h3>→ 04<h4>→ 05<h5>→ 06<h6>→ 07<hgroup>→ 08<p>→ 09<hr>→ 10<br>→

4. Форматирование текста32 тега

01<strong>→ 02<em>→ 03<mark>→ 04<b>→ 05<i>→ 06<u>→ 07<s>→ 08<small>→ 09<sub>→ 10<sup>→ 11<code>→ 12<pre>→ 13<cite>→ 14<q>→ 15<blockquote>→ 16<abbr>→ 17<dfn>→ 18<time>→ 19<data>→ 20<var>→ 21<samp>→ 22<kbd>→ 23<ruby>→ 24<rt>→ 25<rp>→ 26<bdi>→ 27<bdo>→ 28<span>→ 29<div>→ 30<wbr>→ 31<ins>→ 32<del>→

5. Гиперссылка1 тег

01<a>→

6. Таблицы10 тегов

01<table>→ 02<caption>→ 03<colgroup>→ 04<col>→ 05<thead>→ 06<tbody>→ 07<tfoot>→ 08<tr>→ 09<td>→ 10<th>→

7. Списки7 тегов

01<ul>→ 02<ol>→ 03<li>→ 04<dl>→ 05<dt>→ 06<dd>→ 07<menu>→

8. Формы15 тегов

01<form>→ 02<input>→ 03<button>→ 04<select>→ 05<option>→ 06<selectedcontent>→ 07<optgroup>→ 08<textarea>→ 09<label>→ 10<fieldset>→ 11<legend>→ 12<datalist>→ 13<output>→ 14<progress>→ 15<meter>→

9. Мультимедиа и изображения14 тегов

01<img>→ 02<picture>→ 03<source>→ 04<video>→ 05<audio>→ 06<track>→ 07<iframe>→ 08<embed>→ 09<object>→ 10<canvas>→ 11<svg>→ 12<math>→ 13<map>→ 14<area>→

10. Интерактивные и служебные теги6 тегов

01<details>→ 02<summary>→ 03<dialog>→ 04<geolocation>→ 05<template>→ 06<slot>→

11. Устаревшие теги33 тега

01<center>→ 02<font>→ 03<marquee>→ 04<blink>→ 05<acronym>→ 06<big>→ 07<strike>→ 08<tt>→ 09<frame>→ 10<frameset>→ 11<noframes>→ 12<fencedframe>→ 13<applet>→ 14<param>→ 15<rb>→ 16<rtc>→ 17<menuitem>→ 18<image>→ 19<bgsound>→ 20<keygen>→ 21<multicol>→ 22<content>→ 23<shadow>→ 24<nextid>→ 25<basefont>→ 26<dir>→ 27<isindex>→ 28<listing>→ 29<nobr>→ 30<noembed>→ 31<plaintext>→ 32<spacer>→ 33<xmp>→

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

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