Menu
Coddy logo textTech
НАЧАТЬ УЧИТЬСЯ
flag Ru iconРусскийdown icon
html iconЧасть путешествия по HTMLПопулярныйПуть

Изучите CSS

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

НАЧАТЬ ОБУЧЕНИЕ(бесплатно)
Смотреть программуПесочница Styling with CSS

281,604+ codders записались

119 уроков104 задачи583 вопросов квиза

Программа

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

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

  1. Раздел 1Fundamentals60 уроков
  2. Раздел 2

    Styling with CSS

    Начать разделНачатьРазвернутьСвернуть    Bring your web pages to life with colors, layouts, and styles76 уроков100 задачи419 вопросов3 проектов

    Введение

    5 уроков540

    Добавление CSS

    4 уроков725

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

    7 уроков1247

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

    8 уроков1450

    Цвета и фоны

    5 уроков834

    Меню кафе

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

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

    6 уроков943

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

    5 уроков834

    Flex Box

    6 уроков943

    Форма входа

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

    Методы верстки

    7 уроков1151

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

    6 уроков1052

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

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

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

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

    CSS Mastery

    Начать разделНачатьРазвернутьСвернуть    Take you css skills to the next level!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. Раздел 4Practical Frontend35 уроков
  5. Раздел 5JavaScript in Action27 уроков
Посмотреть полную программу путешествия по HTML
Что вы получаете
Всё, что вам нужно, чтобы научиться программировать

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to 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 programming languages illustration

Learn Styling with CSS with Coddy

НАЧАТЬ