Логотип Prowid — курсы программирования PROWIDIT Education Academy

HTML & CSS

Курс HTML & CSS — Prowid
Длительность курса
2 мес/ 16 уроков
Индивидуально
В мес 160 AZN
В группе
В мес 130 AZN
При оплате за весь курс в группе
15% скидка
Оплата по частям
50/50
По подписке
от 30 AZN в мес
HTML и CSS — два основных языка для создания веб-страниц. В курсе вы с нуля научитесь верстать современные, адаптивные и доступные сайты.

Идёт набор в новую группу — оставьте заявку, чтобы забронировать место

Записаться на курс Бесплатный пробный урок

Или учитесь сами в личном кабинете → по подписке от 30 AZN в месяц

Программа курса

Как работает веб: браузер, сервер, HTTP, домен и хостинг
Инструменты: VS Code, DevTools, Emmet
Основы HTML: структура документа, текст, ссылки, изображения
Семантический HTML5: header, nav, main, article, section, footer
Списки, таблицы, iframe, аудио и видео
Формы, их элементы и валидация
Мета-теги, основы SEO и Open Graph
Доступность (a11y): alt-тексты, ARIA, навигация с клавиатуры
Основы CSS: селекторы, каскад, специфичность, блочная модель
Цвета, шрифты, фоны и единицы измерения (px, rem, %, vw)
Flexbox
CSS Grid Layout
Адаптивный дизайн: media queries, mobile-first, адаптивные изображения
CSS-переменные (custom properties) и @-правила
Переходы, трансформации и анимации (2D/3D)
Знакомство с Sass и Tailwind CSS
Финальный проект: вёрстка макета из Figma и публикация на GitHub Pages
Как мы учим?

Этапы обучения

01

Вебинар

Студенты подключаются к уроку в прямом эфире. В конце каждого урока студентам отправляется видеозапись занятия.

02

Домашнее задание

Все задания основаны на теме, пройденной на вебинаре. Домашняя работа помогает закрепить материал и лучше его понять.

03

Работа с ментором

Преподаватель на связи с группой и во время обучения, и вне занятий. Возникающие вопросы решаются сразу.

04

Портфолио

За время курса вы выполните несколько проектов на разные темы — они покажут работодателям ваши навыки.

Самостоятельное обучение

Полная программа в личном кабинете

154 тем с теорией, примерами и практикой. Первые 8 — бесплатно, остальные — по подписке. Интерактивных уроков со слайдами и тренажёрами: 141.

Начать бесплатно Подписка — от 30 AZN в месяц
Введение: веб, инструменты и первая страницатем: 5
  1. Как работает веб: браузер, сервер, HTTP, домен и хостинг
  2. Рабочее окружение: VS Code, расширения, Live Server и Emmet
  3. Первая HTML-страница: теги, элементы, атрибуты и вложенность
  4. Структура HTML-документа: doctype, html, head и body
  5. DevTools браузера: инспектор элементов, DOM и режим устройства
HTML-контент: текст, ссылки, таблицы и медиатем: 14
  1. Заголовки h1–h6 и абзацы: иерархия текста
  2. Строчные элементы текста: strong, em, mark, small, sub, sup, abbr, time
  3. Цитаты, код и спецсимволы: blockquote, q, pre, code, kbd и HTML-сущности
  4. Списки: ul, ol, dl и вложенные списки
  5. Ссылки: тег a, href, абсолютные и относительные пути
  6. Якоря, mailto, tel, download и атрибуты target/rel
  7. Таблицы: table, tr, td, th и caption
  8. Структура таблиц: thead, tbody, tfoot, colspan, rowspan и colgroup
  9. Изображения: тег img, alt, width/height, ленивая загрузка и figure
  10. Форматы изображений: JPEG, PNG, WebP, AVIF и SVG
  11. Адаптивные изображения: srcset, sizes и picture
  12. Аудио и видео: audio, video, source и субтитры track
  13. Встраивание контента: iframe, YouTube, карты, embed и object
  14. Проект: сайт-визитка на чистом HTML
Семантика, доступность и SEOтем: 11
  1. Семантическая разметка: header, nav, main и footer вместо div
  2. article, section и aside: как выбрать правильный элемент
  3. Интерактив без JavaScript: details/summary, dialog и popover
  4. Глобальные атрибуты: id, class, title, lang, hidden, inert и data-*
  5. Валидация HTML: W3C Validator и типичные ошибки разметки
  6. Основы SEO: title, meta description, canonical, robots и hreflang
  7. Open Graph, превью в соцсетях и favicon
  8. Доступность (a11y): WCAG, скринридеры и альтернативный текст
  9. Основы ARIA: роли, aria-label, aria-labelledby и aria-hidden
  10. Клавиатурная навигация: фокус, tabindex и skip link
  11. Проект: семантическая страница статьи блога
Формытем: 8
  1. Формы: form, action, method, name и кнопки отправки
  2. Текстовые поля: типы input, placeholder, autocomplete и inputmode
  3. Поля выбора и специальные поля: checkbox, radio, range, color, date и file
  4. Подписи и группировка: label, fieldset и legend
  5. Списки выбора и многострочный текст: select, optgroup, datalist, textarea
  6. Встроенная валидация: required, pattern, min/max и minlength
  7. Доступные формы: подсказки, ошибки и обязательные поля
  8. Проект: анкета записи на курс на HTML
Основы CSS и селекторытем: 9
  1. Что такое CSS и как его подключить: style, link и inline-стили
  2. Базовые селекторы: тег, класс, id, универсальный и группировка
  3. Селекторы атрибутов: [attr], ^=, $=, *= и флаг i
  4. Комбинаторы: потомок, дочерний, соседний и общий сиблинг
  5. Псевдоклассы состояния: :hover, :focus-visible, :active, :checked, :disabled
  6. Структурные псевдоклассы: :first-child, :nth-child() и :nth-of-type()
  7. Функциональные псевдоклассы :is(), :where() и :not()
  8. Родительский селектор :has(): стили по содержимому
  9. Псевдоэлементы: ::before, ::after, ::marker, ::placeholder и ::selection
Каскад, единицы и цветтем: 10
  1. Каскад: источники стилей, порядок правил и !important
  2. Специфичность селекторов: как считать и как управлять
  3. Наследование и глобальные значения: inherit, initial, unset, revert
  4. Каскадные слои @layer: управляемый порядок стилей
  5. Отладка CSS в DevTools: Styles, Computed, состояния и Layout
  6. Единицы измерения: px, em, rem и проценты
  7. Единицы вьюпорта и шрифта: vw, vh, dvh, svh, vmin, ch и lh
  8. Цвет в CSS: именованные цвета, HEX, rgb() и hsl()
  9. Современный цвет: oklch(), color-mix(), currentColor и transparent
  10. Математические функции: calc(), min(), max() и clamp()
Блочная модель, display и позиционированиетем: 10
  1. Блочная модель: content, padding, border, margin и box-sizing
  2. Схлопывание внешних отступов (margin collapsing)
  3. Размеры: width, height, min-/max-, auto и min-content/max-content
  4. Свойство display: block, inline, inline-block, none, flow-root, contents
  5. Переполнение: overflow, прокрутка и обрезка содержимого
  6. Скрытие элементов: display: none, visibility, opacity и visually-hidden
  7. Позиционирование: position relative и absolute, свойство inset
  8. position: fixed и sticky: фиксированные шапки и липкие блоки
  9. z-index и контекст наложения (stacking context)
  10. float и clearfix: обтекание текстом и почему не для раскладки
Типографика и оформлениетем: 10
  1. Шрифт: font-family, font-size, font-weight, font-style и сокращение font
  2. Веб-шрифты: @font-face, Google Fonts и вариативные шрифты
  3. Текст: line-height, text-align, text-decoration, text-transform, letter-spacing
  4. Перенос и обрезка текста: white-space, overflow-wrap, text-wrap, line-clamp
  5. Фоны: background-color, background-image, repeat, position и size
  6. Градиенты: linear-gradient, radial-gradient и conic-gradient
  7. Продвинутые фоны: несколько слоёв, attachment, clip, origin и сокращение
  8. Границы: border, border-radius и outline
  9. Тени: box-shadow и text-shadow
  10. Проект: оформление статьи блога и карточки автора
Flexboxтем: 14
  1. Введение во Flexbox: flex-контейнер, элементы и оси
  2. flex-direction: направление главной оси
  3. flex-wrap, flex-flow и gap: перенос строк и промежутки
  4. justify-content: выравнивание по главной оси
  5. align-items: выравнивание по поперечной оси
  6. align-content: выравнивание строк в многострочном контейнере
  7. flex-grow: как элементы делят свободное место
  8. flex-shrink: сжатие элементов при нехватке места
  9. flex-basis и сокращение flex: 1, auto, none
  10. order и align-self: управление отдельными элементами
  11. Трюки с margin: auto во Flexbox
  12. Паттерны Flexbox: навбар, карточки, sticky footer и media object
  13. Частые ошибки Flexbox: min-width: 0, переполнение и картинки
  14. Проект: тарифные карточки и шапка сайта на Flexbox
CSS Grid: основытем: 10
  1. Введение в CSS Grid: линии, треки, ячейки и области
  2. grid-template-columns, grid-template-rows и gap
  3. Единица fr: доли свободного пространства
  4. Функция repeat(): повторение треков и шаблонов
  5. minmax() и размеры треков: min-content, max-content, fit-content()
  6. auto-fill и auto-fit: адаптивная сетка без медиазапросов
  7. Размещение по линиям: grid-column, grid-row, span и отрицательные номера
  8. Именованные линии сетки
  9. grid-template-areas: раскладка страницы по именованным областям
  10. Проект: фотогалерея на CSS Grid
CSS Grid: продвинутые техникитем: 7
  1. Неявная сетка: grid-auto-rows и grid-auto-columns
  2. grid-auto-flow и dense: автоматическое размещение элементов
  3. Выравнивание в Grid: justify/align-items, -self, -content и place-*
  4. Вложенные сетки и subgrid
  5. Раскладки на Grid: holy grail, галерея, журнальная сетка и наложение
  6. Grid или Flexbox: как выбрать инструмент
  7. Проект: админ-панель на CSS Grid
Адаптивная вёрсткатем: 8
  1. Адаптивный дизайн: viewport, резиновые макеты и подходы
  2. Медиазапросы: синтаксис @media, типы и логические операторы
  3. Медиафункции: hover, pointer, orientation и prefers-*
  4. Mobile-first и выбор breakpoints
  5. Резиновая типографика и отступы на clamp()
  6. Адаптивные медиа в CSS: aspect-ratio, object-fit и object-position
  7. Контейнерные запросы: @container, container-type и единицы cqi
  8. Проект: адаптивный лендинг с мобильным меню
Современный CSSтем: 8
  1. CSS-переменные (custom properties): объявление, область видимости и fallback
  2. Темы и тёмный режим: prefers-color-scheme, color-scheme и light-dark()
  3. Нативная вложенность CSS (nesting) и селектор &
  4. Логические свойства и writing-mode: inline/block вместо left/right
  5. Прокрутка: scroll-behavior, scroll-margin, scroll-snap и overscroll
  6. Проверка поддержки: @supports и прогрессивное улучшение
  7. Взаимодействие: cursor, pointer-events, user-select и touch-action
  8. Проект: сайт-визитка с дизайн-токенами и тёмной темой
Анимации и визуальные эффектытем: 10
  1. Переходы: transition, timing-функции и @starting-style
  2. 2D-трансформации: translate, rotate, scale, skew и transform-origin
  3. 3D-трансформации: perspective, rotateX/Y и переворачивающаяся карточка
  4. Анимации @keyframes: свойство animation и его параметры
  5. Производительность и доступность анимаций: will-change и prefers-reduced-motion
  6. Фильтры и наложение: filter, backdrop-filter и mix-blend-mode
  7. Обрезка и маски: clip-path и mask-image
  8. Декоративные приёмы с ::before и ::after
  9. View Transitions: плавные переходы между страницами на CSS
  10. Проект: набор анимированных UI-компонентов
Стилизация списков, таблиц и формтем: 6
  1. Оформление списков и CSS-счётчики
  2. Стилизация таблиц: border-collapse, зебра, липкая шапка и адаптивность
  3. Стилизация форм: поля, кнопки, фокус, appearance и accent-color
  4. Свои checkbox, radio и переключатель (switch) на чистом CSS
  5. Состояния форм в CSS: :valid, :invalid, :user-invalid и :has()
  6. Проект: стилизация формы записи на курс
Архитектура CSS и Sassтем: 6
  1. Reset и Normalize: базовые стили проекта
  2. Методология БЭМ: блоки, элементы и модификаторы
  3. Организация CSS в проекте: файлы, слои и дизайн-токены
  4. Sass: установка dart-sass, переменные, вложенность и partials
  5. Модули Sass: @use, @forward и встроенные модули
  6. Sass: миксины, функции, циклы и условия
Tailwind CSS v4тем: 5
  1. Tailwind CSS v4: подход utility-first и установка
  2. Утилиты Tailwind: отступы, типографика, цвета, Flexbox и Grid
  3. Варианты Tailwind: адаптивность, состояния, dark и group/peer
  4. Настройка Tailwind v4: @theme, свои утилиты и компоненты
  5. Проект: секции лендинга на Tailwind CSS
Производительность и финальный проекттем: 3
  1. Производительность CSS: критический CSS, загрузка шрифтов и Core Web Vitals
  2. От макета Figma к коду: размеры, ассеты и план вёрстки
  3. Финальный проект: вёрстка по макету Figma и публикация на GitHub Pages

Группа и индивидуальные занятия — это преподаватель, проверка заданий и сертификат. Подписка — материалы, тренажёры и прогресс в своём темпе, без обратной связи преподавателя.

Курс HTML и CSS: как записаться

Заполните форму — сообщим дату старта ближайшей группы, расписание и условия оплаты. А можно сначала прийти на бесплатный пробный урок.

+994 77 333 38 36 Или сразу напишите в WhatsApp info@prowid.com

Отправляя форму, вы соглашаетесь, что данные будут использованы только для связи с вами.

WhatsApp