Menu
CoddyTech
Начать обучение
html iconЧасть путешествия по HTMLПуть

Изучите CSS

Бесплатный интерактивный курс по CSS. В каждом уроке вы стилизуете настоящий HTML - селекторы, блочную модель, цвета, шрифты, flexbox, grid, адаптивный дизайн - с живым предпросмотром прямо во время набора кода и бесплатным сертификатом по завершении. Это часть более широкого пути HTML, поэтому необходимый CSS контекст разметки всегда под рукой.

Начать обучение(бесплатно)
Смотреть программуПесочница Стилизация с CSS

13,993+ codders записались

119 уроков114 задачи582 вопросов квиза

Программа

2 разделов3 проектов119 уроков114 задачи582 вопросов квиза

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

  1. Раздел 1Основы60 уроков
  2. Раздел 2

    Стилизация с CSS

    Начать разделНачатьРазвернутьСвернуть    Оживите свои веб-страницы цветами, макетами и стилями76 уроков110 задачи418 вопросов3 проектов

    Введение

    5 уроков540

    Добавление CSS

    4 уроков725

    Базовые селекторы

    7 уроков1247

    Основы работы с текстом

    8 уроков1450

    Цвета и фоны

    5 уроков834

    Меню кафе

    Проект3 уроков3

    Блочная модель. Часть 1

    6 уроков943

    Блочная модель. Часть 2

    5 уроков833

    Flex Box

    6 уроков943

    Форма входа

    Проект4 уроков4

    Методы компоновки

    7 уроков1151

    Основы адаптивного дизайна

    6 уроков1052

    Веб-страница Tonga

    Проект6 уроков6

    Финальные задания

    4 уроков4
  3. Раздел 3

    Мастерство CSS

    Начать разделНачатьРазвернутьСвернуть    Выведите свои навыки CSS на новый уровень!43 уроков40 задачи164 вопросов

    Мастерство селекторов — Комбинации

    6 уроков539

    Интерактивные псевдоклассы

    5 уроков431

    Структурные псевдоклассы

    5 уроков432

    Проект: Выпадающее меню

    4 уроков4

    Визуальные эффекты

    5 уроков536

    Лендинг

    5 уроков5

    Верстка с CSS Grid

    4 уроков426

    Сайт Flavor Fiesta

    4 уроков4

    Финальные испытания

    5 уроков5
  4. Раздел 4Практический фронтенд35 уроков
  5. Раздел 5JavaScript в действии27 уроков
Посмотреть полную программу путешествия по HTML
Что вы получаете
Всё, что вам нужно, чтобы научиться программировать

Учитесь на практике

Пишите реальный код, работайте с базами данных, создавайте сайты и осваивайте ИИ-промпты. Наши интерактивные уроки охватывают все навыки, необходимые современным разработчикам.

playground.js
Редактор кода
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Тест №1test Case Success icon
Тест №2test Case Success icon
Тест №3test Case Failure icon
Ввод
"Alex"
Вывод
"Hello, Coddy! Alex"

Создайте свою серию

Будьте последовательны и наблюдайте за своим прогрессом! Отслеживайте ежедневную привычку программирования, защищайте свою серию с помощью дней заморозки и получайте награды за каждый день.

12 дней подряд

Возвращайтесь завтра, чтобы сохранить серию!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Всё или ничего

День 5 из 7

fire Freeze icon

Заморозка серии

2 left

Код где угодно

Возьмите свое путешествие по программированию с собой! Без настройки, без загрузок: просто откройте и начните программировать. Доступно на iOS, Android и Web с рейтингом 4.9 звезд.

app Store iconЗагрузить вApp Storegoogle Play iconДоступно вGoogle Play
Python
7Серия
250Очки
5Энергия
Переменные
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
Продолжить
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Путь
Цели
Таблица лидеров
Профиль
4.9
ЗвездаЗвездаЗвездаЗвездаЗвезда
Рейтинг

Вы не одиноки

Соревнуйтесь в глобальных рейтингах, приглашайте друзей, чтобы получать награды, и празднуйте успехи друг друга. Программировать веселее с друзьями!

Лига Претендентов
Лига ПретендентовТоп 7 продвигаются
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconЗона продвиженияleaderboard Arrow Up icon

Учитесь как угодно

Читайте, слушайте, проверяйте себя, спрашивайте у ИИ или ищите то, что уже изучили. Каждый урок подстраивается под вас.

Введение в переменные
Аудио

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

В Python вы создаёте её, написав имя, знак равенства и значение, которое нужно сохранить.

Значение может меняться. Переприсваивание просто направляет имя на новое значение.

1xSarah

Ваш сертификат

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

CoddyСертификат о прохождении
Настоящим подтверждается, чтоИван Ивановуспешно завершил(а)
python iconОсновы Python
Подтверждено
Датаянв. 2026
LinkedInДобавить в LinkedIn

Почему стоит изучать CSS с Coddy

  • Пишите CSS прямо в браузере и наблюдайте, как страница перестраивается вживую. Никакого этапа сборки, никакой настройки редактора. Каждое изменение селектора или свойства отображается мгновенно, так что вы видите, что на самом деле делает каждое правило.
  • Основы CSS: селекторы и специфичность, блочная модель, позиционирование, flexbox, CSS grid, переходы, медиазапросы и адаптивный дизайн. Тот CSS, который нужен каждому фронтенд-разработчику изо дня в день.
  • Подсказки ИИ помогают отлаживать то, на чём всегда спотыкаются, - сюрпризы со специфичностью, переполнения макета, странное поведение flexbox - не раскрывая решение, так что CSS становится интуитивным, а не похожим на магию.
  • Бесплатный сертификат по CSS после завершения раздела. Естественно сочетается с курсами HTML и JavaScript для полноценной фронтенд-базы.

Часто задаваемые вопросы об изучении CSS

Что такое CSS?

CSS (Cascading Style Sheets) - это язык, который управляет тем, как выглядят HTML-страницы: цвета, шрифты, отступы, макет, анимации, адаптивное поведение на экранах разного размера. HTML определяет, что находится на странице; CSS определяет, как это представлено.

Сложно ли изучать CSS?

Базовый CSS - селекторы, цвета, шрифты, блочная модель - осваивается за пару часов. Более сложные части приходят позже: правила специфичности, макеты на flexbox и grid и умение делать так, чтобы всё выглядело правильно на любом размере экрана. Курс вводит их небольшими шагами с живым предпросмотром, так что вы точно видите, что делает каждое правило.

Стоит ли изучать HTML перед CSS?

Да. HTML определяет структуру страницы; CSS её стилизует. Без HTML вам нечего стилизовать. Именно поэтому раздел по CSS является частью пути HTML - сначала идёт раздел основ HTML, а затем большую часть пути вы посвящаете его стилизации.

В чём разница между CSS, Flexbox и Grid?

Flexbox и Grid - это модули раскладки внутри CSS, это не отдельные технологии, а возможности CSS. Flexbox лучше всего подходит для одномерных макетов (ряд карточек, навбар). Grid лучше всего подходит для двумерных макетов (целая страница, сложная раскладка карточек). Большинство реальных сайтов используют оба, и курс объясняет, когда к какому обращаться.

Можно ли изучать CSS онлайн бесплатно?

Да. Интерактивный раздел по CSS бесплатный - полноценные уроки, практические упражнения, живой предпросмотр и сертификат. Всё работает в браузере, поэтому вам не нужно устанавливать никакой редактор или инструменты, чтобы начать.

Получу ли я сертификат после курса по CSS?

Да. Завершение раздела по CSS даёт вам бесплатный сертификат о прохождении. Проверяемое подтверждение, которое вы можете добавить в резюме или поделиться им в LinkedIn наряду с сертификатами по HTML и JavaScript в составе фронтенд-портфолио.

Пути обучения, включающие этот курс

Этот курс - один шаг более длинного пути: несколько курсов в том порядке, в котором их дал бы наставник, каждый со своим бесплатным сертификатом.

Иллюстрация языков программирования Coddy

Учите Стилизация с CSS с Coddy

Начать