Часть путешествия по HTMLПопулярныйПутьИзучите CSS
Бесплатный интерактивный курс по CSS. В каждом уроке вы стилизуете настоящий HTML - селекторы, блочную модель, цвета, шрифты, flexbox, grid, адаптивный дизайн - с живым предпросмотром прямо во время набора кода и бесплатным сертификатом по завершении. Это часть более широкого пути HTML, поэтому необходимый CSS контекст разметки всегда под рукой.
269,396+ codders записались
- Для начинающих
Помощь ИИ при написании кода
Практические интерактивные уроки
Аудио-озвучка к каждому уроку
Тесты для проверки знаний
Бесплатный сертификат о прохождении
Программа
Этот раздел - часть путешествия по HTML. В полной программе ещё больше разделов - кликни по любому превью ниже, чтобы открыть его на странице путешествия.
- Раздел 1Fundamentals60 уроков
Раздел 2
Styling with CSS
Начать разделНачатьРазвернутьСвернутьBring your web pages to life with colors, layouts, and stylesВведение
5 уроков540- 01Что такое CSS?ЗадачаКвиз
- 02Синтаксис CSSЗадачаКвиз
- 03Комментарии CSSКвиз
- 04Тег HeadЗадачаКвиз
- 05Тег TitleЗадачаМастерствоКвиз
Добавление CSS
4 уроков725- 01Встроенный CSSЗадачаМастерствоКвиз
- 02Внутренний CSSЗадачаМастерствоКвиз
- 03Внешний CSSЗадачаМастерствоКвиз
- 04Задание по базовой стилизацииЗадача
Базовые селекторы
7 уроков1247- 01Введение в селекторыЗадачаКвиз
- 02Селектор типаЗадачаМастерствоКвиз
- 03Селектор классаЗадачаМастерствоКвиз
- 04Селектор IDЗадачаМастерствоКвиз
- 05Групповые селекторыЗадачаМастерствоКвиз
- 06Универсальный селекторЗадачаМастерствоКвиз
- 07Испытание по селекторамЗадача
Основы работы с текстом
8 уроков1450- 01Цвет текстаЗадачаМастерствоКвиз
- 02Семейство шрифтовЗадачаМастерствоКвиз
- 03Размер шрифтаЗадачаМастерствоКвиз
- 04Насыщенность шрифтаЗадачаМастерствоКвиз
- 05Выравнивание текстаЗадачаМастерствоКвиз
- 06Оформление текстаЗадачаМастерствоКвиз
- 07Повторение: Задача №1Задача
- 08Повторение: Задача №2Задача
Цвета и фоны
5 уроков834- 01Цвет фонаЗадачаМастерствоКвиз
- 02HEX-цветаЗадачаМастерствоКвиз
- 03RGB-цветаЗадачаМастерствоКвиз
- 04Прозрачность с RGBAЗадачаКвиз
- 05Итоговое задание №1Задача
Меню кафе
Проект3 уроков1- 01Основы типографикиЗадача
- 02Стилизация текстаПроект
- 03Цвет и фонПроект
Блочная модель. Часть 1
6 уроков943- 01Что такое блочная модель?Квиз
- 02Внутренние отступыЗадачаМастерствоКвиз
- 03Внешние отступыЗадачаМастерствоКвиз
- 04ГраницыЗадачаМастерствоКвиз
- 05Ширина и высотаЗадачаМастерствоКвиз
- 06Контрольное заданиеЗадача
Блочная модель. Часть 2
5 уроков834- 01Box SizingЗадачаКвиз
- 02Border RadiusЗадачаМастерствоКвиз
- 03OverflowЗадачаМастерствоКвиз
- 04Box ShadowЗадачаМастерствоКвиз
- 05Задание на повторениеЗадача
Flex Box
6 уроков943- 01Что такое Flex Box?ЗадачаКвиз
- 02Flex DirectionЗадачаМастерствоКвиз
- 03Justify ContentЗадачаМастерствоКвиз
- 04Align ItemsЗадачаМастерствоКвиз
- 05Идеальное центрированиеЗадачаКвиз
- 06Flex Box: ИспытаниеЗадача
Форма входа
Проект4 уроков1- 01ТелоЗадача
- 02Контейнер формыПроект
- 03Поле вводаПроект
- 04КнопкаПроект
Методы верстки
7 уроков1152- 01Блочные и строчные элементыЗадачаКвиз
- 02Основы позиционированияЗадачаМастерствоКвиз
- 03Относительное позиционированиеЗадачаМастерствоКвиз
- 04Абсолютное позиционированиеЗадачаМастерствоКвиз
- 05Фиксированное позиционированиеЗадачаМастерствоКвиз
- 06Основы Z-IndexЗадачаКвиз
- 07Итоговое испытаниеЗадача
Основы адаптивного дизайна
6 уроков1052- 01Что такое адаптивный дизайн?ЗадачаКвиз
- 02Метатег ViewportЗадачаКвиз
- 03Гибкие макетыЗадачаМастерствоКвиз
- 04Единицы измерения ViewportЗадачаМастерствоКвиз
- 05Основы Media QueriesЗадачаМастерствоКвиз
- 06Гибкие изображенияЗадачаМастерствоКвиз
Веб-страница Tonga
Проект6 уроков1- 01Меню навигацииЗадача
- 02Приветственный заголовокПроект
- 03Раздел «О нас»Проект
- 04Раздел контактовПроект
- 05Тег ViewportПроект
- 06Media QueryПроект
Финальные испытания
4 уроков4- 01Расположение элементовЗадача
- 02Список фильмовЗадача
- 03Свадебное приглашениеЗадача
- 04Всплывающее уведомлениеЗадача
Раздел 3
CSS Mastery
Начать разделНачатьРазвернутьСвернутьTake you css skills to the next level!Мастерство селекторов — Комбинации
6 уроков539- 01ВведениеКвиз
- 02Селектор потомковЗадачаКвиз
- 03Дочерний селекторЗадачаКвиз
- 04Смежный селекторЗадачаКвиз
- 05Общий родственный селекторЗадачаКвиз
- 06Итоговое испытаниеЗадача
Интерактивные псевдоклассы
5 уроков431- 01ПсевдоклассыКвиз
- 02Эффекты наведенияЗадачаКвиз
- 03Эффекты фокусаЗадачаКвиз
- 04Активные стилиЗадачаКвиз
- 05Итоговое испытаниеЗадача
Структурные псевдоклассы
5 уроков432- 01Структурные псевдоклассыКвиз
- 02Выбор первого дочернего элементаЗадачаКвиз
- 03Выбор последнего дочернего элементаЗадачаКвиз
- 04Сила шаблонов: использование nth-childЗадачаКвиз
- 05Задание на повторениеЗадача
Проект: Выпадающее меню
4 уроков4- 01Добавление подменюЗадача
- 02Отображение подменюЗадача
- 03Дополнительная стилизацияЗадача
- 04Поле ввода и кнопкаЗадача
Визуальные эффекты
5 уроков536- 01ГрадиентыЗадачаКвиз
- 02CSS-фильтрыЗадачаКвиз
- 03ТрансформацииЗадачаКвиз
- 04Переходы и эффекты наведенияЗадачаКвиз
- 05Итоговое испытаниеЗадача
Лендинг
5 уроков5- 01Стилизация секции HeaderЗадача
- 02Стилизация кнопкиЗадача
- 03Разметка секцииЗадача
- 04Разметка карточекЗадача
- 05Финальные штрихиЗадача
Верстка с CSS Grid
4 уроков426- 01Основы GridЗадачаКвиз
- 02Размещение элементов в Grid-rowЗадачаКвиз
- 03Именованные областиЗадачаКвиз
- 04Итоговое испытаниеЗадача
Сайт Flavor Fiesta
4 уроков4- 01Настройка сеткиЗадача
- 02ХедерЗадача
- 03Основная частьЗадача
- 04ФутерЗадача
Финальные испытания
5 уроков5- 01Подсветка активного пункта менюЗадача
- 02Чередование строк таблицыЗадача
- 03Эффект наведения на кнопкуЗадача
- 04Сетка карточекЗадача
- 05Размытое Hero-изображениеЗадача
- Раздел 4Practical Frontend35 уроков
- Раздел 5JavaScript in Action27 уроков
Почему стоит изучать 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 в составе фронтенд-портфолио.
