HTML и CSS — полный курс по вёрстке с нуля

• HTML и CSS
• Как устроен курс
• Обзор проектов
• Обзор курсов
• Работа на платформе
• AI и тренажёры
• Практика на проекте
• Рекомендуемый курс

• Настройка окружения
• Настройки VSCode
• Рекомендуемый курс
• Создание первой страницы

• Структура HTML
• Параграфы и переносы
• Заголовки
• Инспектор Chrome
• Структура документа
• Списки
• Упражнение — Вёрстка статьи
• Ссылки
• Изображения
• Комментарии
• Упражнение — Вёрстка статьи 2
• Домашнее задание AI
• Работа с gitflow
• Тест — Знакомство с HTML
• Тренажёр — Знакомство с HTML
• Занятие — Знакомство с HTML
• Домашнее задание — Знакомство с HTML

• Что такое HTML5?
• Блочные и строчные элементы
• Sup и sub
• Сущности HTML
• Семантическая разметка
• Упражнение — Разметка сайта
• Screen Readers
• Тест — Семантика и HTML5
• Тренажёр — Семантика и HTML5
• Занятие — Семантика и HTML5
• Домашнее задание — Семантика и HTML5

• Создание таблиц
• Доступность таблиц
• Colspan, rowspan
• Упражнение — Вёрстка таблицы
• Тест — Таблицы
• Тренажёр — Таблицы
• Занятие — Таблицы

• Form
• Input
• Label
• Кнопки
• Name
• Упражнение — Поиск YouTube
• Radio, Checkbox, Select
• Range
• Textarea
• Валидация форм
• Упражнение — Форма контактов
• Тренажёр — Формы
• Занятие — Формы
• Домашнее задание — Формы

• Для чего нужен CSS
• Способы стилизации
• Цвет и фон
• Работа с цветами
• Упражнение — Цвета формы
• Стилизация текста
• Font family
• Тест — Основы CSS
• Тренажёр — Основы CSS
• Занятие — Основы CSS
• Домашнее задание — Основы CSS

• Разбор интерфейса
• Компоненты и свойства
• Экспорт графики
• Измерение расстояний

• Выбор элементов
• ID элемента
• Выбор по классу
• Выбор по атрибуту
• Упражнение — Стиль страницы
• Дочерние элементы
• Соседние элементы
• Тест — CSS Selectors
• Тренажёр — CSS Selectors
• Занятие — CSS Selectors
• Домашнее задание — CSS Selectors

• Псевдоклассы
• Псевдоклассы с параметрами
• Псевдоэлементы
• Стили списков
• Упражнение — Дизайн списка
• Тест — Псевдоклассы и элементы
• Тренажёр — Псевдоклассы и элементы
• Занятие — Псевдоклассы и элементы

• Каскад CSS
• Специфичность стилей
• Important
• Наследование в CSS
• Тест — Каскад
• Занятие — Каскад

• О блочной модели
• Ширина и высота
• Границы
• Padding
• Margin
• Упражнение — Добавление отступов
• Тест — Блочная модель
• Тренажёр — Блочная модель
• Занятие — Блочная модель
• Домашнее задание — Блочная модель

• Поток документа
• Float
• Display
• Position
• Text-align
• Упражнение — Label формы
• Тест — Поток документа
• Тренажёр — Поток документа
• Занятие — Поток документа

• Проценты
• Em
• Rem
• Vh и vw
• Тест — Единицы измерения
• Занятие — Единицы измерения
• Отзыв о курсе

• Transition
• Transition timing functions
• Анализ анимации
• Transform
• Animation
• Тест — Анимация
• Тренажёр — Анимация
• Занятие — Анимация

• Что такое адаптивная вёрстка
• Media выражения
• Max и min width
• Шрифты и vmin
• Calc
• Min и max
• Clamp
• Pow
• Sqrt log exp
• Тест — Адаптивная вёрстка
• Тренажёр — Адаптивная вёрстка
• Занятие — Адаптивная вёрстка

• О flexbox
• Введение во Flexbox
• Работа с flex-direction
• Flex-wrap
• Порядок элементов
• Flex-flow
• Justify-content
• Align-items
• Align-content
• Align-self
• Размеры и flex
• Flex-grow, flex-shrink и flex-basis
• Flex-wrap с flex-basis
• Gap row-gap column-gap
• Auto margin
• Тест — CSS Flexbox
• Тренажёр — CSS Flexbox
• Занятие — CSS Flexbox
• Домашнее задание — CSS Flexbox

• Подключение шрифтов
• Google Fonts
• Упражнение — Вёрстка hero
• Упражнение — финал вёрстки
• Домашнее задание — Практика flexbox

• Зачем методологии
• БЭМ
• SMACSS
• Custom Properties
• Анимация с custom property
• Занятие — Методологии и практики

• Подготовка проекта
• Вёрстка шапки
• Шрифты и адаптив шапки
• Упражнение — Hero
• Адаптив Hero
• Aria атрибуты
• Вёрстка футера
• Стилизация футера
• Адаптив футера
• Упражнение — Блог
• Упражнение — Адаптив блога

• Подготовка проекта
• Template и gap
• Grid-auto-flow
• Ширина колонок
• Ширина элементов
• Положение элементов
• Именованные линии
• Auto-fit и auto-fill
• Адаптивный grid
• Order
• Justify и align
• Заполнение grid
• Template-areas
• Лучшие практики
• Тест — CSS Grid
• Тренажёр — CSS Grid
• Занятие — CSS Grid
• Домашнее задание — CSS Grid

• Разбор макета
• Упражнение — Вёрстка сетки
• Overflow и white-space
• Scrollbar
• Упражнение — Вёрстка карточки
• Адаптив списка курсов
• Упражнение — Нам доверяют
• Финальный адаптив

• Домашнее задание — Проект
• Куда дальше?
• Рекомендуемый курс
• Финальное тестирование
• Собеседование с AI наставником
• Практика собеседования с AI

• Основы Scrum
• Старт задачи
• Выполнение задачи
• Код ревью
• Обзор проекта
• Старт командного проекта

Сертификат