Курс на Stepik
Обложка курса «CSS: Основы и стилизация первого приложения» на Stepik
Бесплатно

CSS: Основы и стилизация первого приложения ★ 4.667

Открыть на
STEPIK.ORG

Этот курс практическое введение в CSS, созданное для тех, кто уже понимает основы HTML и хочет научиться превращать разметку в аккуратный, современный интерфейс. Цель курса не просто показать свойства и стили, а научить управлять внешним видом страницы осознанно: от базовой типографики до адаптивной сетки.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «CSS: Основы и стилизация первого приложения»Учеников на курсе 317
Сертификаты, выданные на курсе «CSS: Основы и стилизация первого приложения»Сертификатов выдано 0
Отзывы о курсе «CSS: Основы и стилизация первого приложения»Отзывов получено 3
Рейтинг курса «CSS: Основы и стилизация первого приложения»Рейтинг курса 4.667
Уроки в курсе «CSS: Основы и стилизация первого приложения»Количество уроков 71
Тесты в курсе «CSS: Основы и стилизация первого приложения»Количество квизов 66
Время прохождения курса «CSS: Основы и стилизация первого приложения»Время прохождения курса —
Обновления курса «CSS: Основы и стилизация первого приложения»Обновления курса — —
Дата публикации курса «CSS: Основы и стилизация первого приложения»Дата публикации курса — ———
Последнее обновление курса «CSS: Основы и стилизация первого приложения»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «CSS: Основы и стилизация первого приложения» 20 разделов Уроки в курсе «CSS: Основы и стилизация первого приложения» 71 урок Тесты в курсе «CSS: Основы и стилизация первого приложения» 66 тестов Время прохождения курса «CSS: Основы и стилизация первого приложения» 6 ч. Последнее обновление курса «CSS: Основы и стилизация первого приложения» обн. 17 февраля 2026

Настройка рабочего окружения

2 урока
1. Как устроен курс ↗
2. Настройка рабочего окружения ↗

Старт и подключение CSS

4 урока
1. Что такое CSS и как он работает в браузере ↗
2. Способы подключения: inline, style, link ↗
3. Структура CSS правил: селектор, свойства, значения ↗
4. Введение в CSS ↗

Селекторы и базовые свойства

3 урока
1. Простые селекторы: тег, класс, id ↗
2. Комбинации и вложенность: потомок, ребенок, соседи ↗
3. Группировка селекторов ↗

Каскад, наследование и специфичность

3 урока
1. Каскад и порядок применения стилей ↗
2. Специфичность и конфликты стилей ↗
3. Практика: разбор типичных ошибок и их исправление ↗

Цвета, фоны и изображения

4 урока
1. Форматы цветов: hex, rgb, rgba, hsl ↗
2. Фон и цвет ↗
3. Градиенты ↗
4. Практика: Фон и Цвет ↗

Единицы измерения и размеры

2 урока
1. Единицы измерения в CSS ↗
2. Задачник для практики по CSS ↗

Типографика и читаемость

3 урока
1. Стилизация шрифта ↗
2. Подключение шрифтов ↗
3. Практика: Стилизация шрифта ↗

Бордеры и скругления

4 урока
1. border-width, border-style, border-color ↗
2. Отдельные стороны: border-top и т.д. ↗
3. border-radius: круги, капсулы, сложные скругления ↗
4. Практика: карточки, кнопки, блоки ↗

Блочная модель и геометрия элементов

4 урока
1. Ширина и высота элементов ↗
2. Отступы ↗
3. box-sizing: content-box и border-box ↗
4. Практика: карточки и отступы ↗

Позиционирование и слои

3 урока
1. Позиционирование элементов ↗
2. Контекст наложения ↗
3. Практика: позиционирование элементов ↗

Flexbox: выравнивание и компоновка

5 уроков
1. flex-container и flex-items ↗
2. justify-content, align-items, gap ↗
3. flex-direction, wrap ↗
4. flex-grow, flex-shrink, flex-basis ↗
5. Итоги и закрепление темы Flexbox ↗

Grid: сетки для макетов

5 уроков
1. Grid контейнер ↗
2. grid-template-columns rows ↗
3. gap, repeat, fr ↗
4. Размещение элементов: grid-column, grid-row, areas ↗
5. Практика: сетка секций и адаптивная раскладка ↗

Псевдоклассы и псевдоэлементы

4 урока
1. Псевдоклассы ↗
2. nth-child и базовые сценарии ↗
3. Псевдоэлементы ↗
4. Практика: кнопки, ссылки, декоративные элементы ↗

Анимации и плавность интерфейса

3 урока
1. transition: что можно анимировать ↗
2. transform: translate, scale, rotate ↗
3. Практика: микроанимации без перегруза ↗

Тени и глубина интерфейса

3 урока
1. box-shadow: параметры, мягкие и жесткие тени ↗
2. text-shadow ↗
3. Практика: карточки, ховер эффекты, акценты ↗

CSS-методологии

2 урока
1. Что такое CSS-методологии и зачем они нужны ↗
2. Методология BEM: блок, элемент, модификатор ↗

Стилизация UI компонентов

1 урок
1. Инфо: наборы компонентов ↗

Адаптивность и медиазапросы

4 урока
1. Подходы: mobile first и desktop first ↗
2. Breakpoints и медиазапросы ↗
3. Адаптивные размеры: %, vw, rem ↗
4. Практика: медиазапросы ↗

Мини проект: финальная сборка портфолио

10 уроков
1. Подготовка проекта ↗
2. База CSS ↗
3. Header + навигация ↗
4. Hero (приветствие) ↗
5. Project card: оформление карточек ↗
6. About + Experience ↗
7. Skills + Contacts ↗
8. Форма + Footer ↗
9. Адаптивность ↗
10. Публикация ↗

Итоги

2 урока
1. Тест ↗
2. Материалы ↗