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

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

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

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

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «CSS: Основы и стилизация первого приложения»Учеников на курсе 315
Сертификаты, выданные на курсе «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

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

2 урока
Открытый
1.1 Как устроен курс
61
61
1м 3с
0
Открытый
1.2 Настройка рабочего окружения
34
27
7м 22с
0

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

4 урока
Открытый
2.1 Что такое CSS и как он работает в браузере
32
27
6м 47с
0
Открытый
2.2 Способы подключения: inline, style, link
31
25
7м 38с
0
Открытый
2.3 Структура CSS правил: селектор, свойства, значения
28
22
7м 20с
0
Открытый
2.4 Введение в CSS
23
15
1м 0с
0

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

3 урока
Открытый
3.1 Простые селекторы: тег, класс, id
22
22
6м 55с
0
Открытый
3.2 Комбинации и вложенность: потомок, ребенок, соседи
20
16
11м 20с
0
Открытый
3.3 Группировка селекторов
16
12
4м 23с
0

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

3 урока
Открытый
4.1 Каскад и порядок применения стилей
16
13
11м 45с
0
Открытый
4.2 Специфичность и конфликты стилей
14
14
6м 24с
0
Открытый
4.3 Практика: разбор типичных ошибок и их исправление
12
7
17м 46с
0

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

4 урока
Открытый
5.1 Форматы цветов: hex, rgb, rgba, hsl
14
8
16м 27с
0
Открытый
5.2 Фон и цвет
12
9
8м 30с
0
Открытый
5.3 Градиенты
9
9
-
0
Открытый
5.4 Практика: Фон и Цвет
10
8
5м 32с
0

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

2 урока
Открытый
6.1 Единицы измерения в CSS
15
8
11м 48с
0
Открытый
6.2 Задачник для практики по CSS
14
8
2м 52с
0

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

3 урока
Открытый
7.1 Стилизация шрифта
14
8
16м 49с
0
Открытый
7.2 Подключение шрифтов
10
8
4м 52с
0
Открытый
7.3 Практика: Стилизация шрифта
10
9
3м 59с
0

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

4 урока
Открытый
8.1 border-width, border-style, border-color
11
7
11м 42с
0
Открытый
8.2 Отдельные стороны: border-top и т.д.
9
9
-
0
Открытый
8.3 border-radius: круги, капсулы, сложные скругления
8
4
2м 18с
0
Открытый
8.4 Практика: карточки, кнопки, блоки
7
4
3м 6с
0

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

4 урока
Открытый
9.1 Ширина и высота элементов
8
5
4м 43с
0
Открытый
9.2 Отступы
7
4
6м 41с
0
Открытый
9.3 box-sizing: content-box и border-box
6
4
12м 56с
0
Открытый
9.4 Практика: карточки и отступы
6
4
5м 58с
0

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

3 урока
Открытый
10.1 Позиционирование элементов
6
5
7м 10с
0
Открытый
10.2 Контекст наложения
6
5
9м 4с
0
Открытый
10.3 Практика: позиционирование элементов
6
5
6м 26с
0

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

5 уроков
Открытый
11.1 flex-container и flex-items
7
4
2м 14с
0
Открытый
11.2 justify-content, align-items, gap
5
4
4м 22с
0
Открытый
11.3 flex-direction, wrap
4
4
1м 28с
0
Открытый
11.4 flex-grow, flex-shrink, flex-basis
4
3
2м 21с
0
Открытый
11.5 Итоги и закрепление темы Flexbox
3
3
9м 26с
0

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

5 уроков
Открытый
12.1 Grid контейнер
5
4
1м 29с
0
Открытый
12.2 grid-template-columns rows
4
3
6м 59с
0
Открытый
12.3 gap, repeat, fr
3
3
-
0
Открытый
12.4 Размещение элементов: grid-column, grid-row, areas
3
3
2м 25с
0
Открытый
12.5 Практика: сетка секций и адаптивная раскладка
3
3
7м 51с
0

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

4 урока
Открытый
13.1 Псевдоклассы
5
5
4м 27с
0
Открытый
13.2 nth-child и базовые сценарии
4
4
-
0
Открытый
13.3 Псевдоэлементы
4
4
3м 13с
0
Открытый
13.4 Практика: кнопки, ссылки, декоративные элементы
5
3
12м 29с
0

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

3 урока
Открытый
14.1 transition: что можно анимировать
6
4
7м 45с
0
Открытый
14.2 transform: translate, scale, rotate
4
4
4м 24с
0
Открытый
14.3 Практика: микроанимации без перегруза
3
3
6м 48с
0

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

3 урока
Открытый
15.1 box-shadow: параметры, мягкие и жесткие тени
3
3
-
0
Открытый
15.2 text-shadow
3
3
1м 11с
0
Открытый
15.3 Практика: карточки, ховер эффекты, акценты
3
3
2м 5с
0

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

2 урока
Открытый
16.1 Что такое CSS-методологии и зачем они нужны
3
3
1м 15с
0
Открытый
16.2 Методология BEM: блок, элемент, модификатор
4
4
6м 16с
0

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

1 урок
Открытый
17.1 Инфо: наборы компонентов
3
3
11м 50с
0

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

4 урока
Открытый
18.1 Подходы: mobile first и desktop first
3
3
2м 53с
0
Открытый
18.2 Breakpoints и медиазапросы
3
3
5м 27с
0
Открытый
18.3 Адаптивные размеры: %, vw, rem
3
3
7м 44с
0
Открытый
18.4 Практика: медиазапросы
3
3
7м 3с
0

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

10 уроков
Открытый
19.1 Подготовка проекта
6
4
3м 49с
0
Открытый
19.2 База CSS
6
4
4м 42с
0
Открытый
19.3 Header + навигация
1
1
11м 11с
0
Открытый
19.4 Hero (приветствие)
1
1
8м 43с
0
Открытый
19.5 Project card: оформление карточек
1
1
-
0
Открытый
19.6 About + Experience
3
3
-
0
Открытый
19.7 Skills + Contacts
4
4
-
0
Открытый
19.8 Форма + Footer
5
5
-
0
Открытый
19.9 Адаптивность
4
4
-
0
Открытый
19.10 Публикация
5
5
-
0

20. Итоги

2 урока
Открытый
20.1 Тест
6
3
-
0
Открытый
20.2 Материалы
5
5
-
0