Учить CSS - Курс Кода

Изучайте CSS шаг за шагом: от первого селектора до адаптивных макетов, анимаций и современного веб-дизайна. Напишите строку CSS и наблюдайте, как страница меняется на телефоне: редактор показывает HTML и CSS рядом с интерактивным предпросмотром.

Этот учебник по CSS создан для начинающих и развивается вместе с вами. Каждый курс посвящён одной реальной теме, каждый урок короткий, а редактор всегда доступен в одно касание, поэтому вы практикуетесь сразу после прочтения, а не только читаете о CSS.

ЧТО ВНУТРИ

• 40 курсов и 159 небольших уроков: от начального уровня (A1) до продвинутого (C1)

• Интерактивный редактор HTML и CSS с мгновенным предпросмотром для быстрых экспериментов и создания собственных страниц

• 20 пошаговых проектов по веб-дизайну: панель инструментов, сетка карточек, закреплённый заголовок, пульсирующая кнопка и многое другое

• 20 миссий по поиску ошибок: карточка на 42px шире своей колонки, медиазапрос, который никогда не срабатывает на телефоне, модальное окно, застрявшее позади страницы

• Итоговый экзамен и сертификат о завершении

• Приложение доступно на 22 языках

ПОЛНЫЙ ПУТЬ: ОТ НАЧИНАЮЩЕГО ДО ПРОДВИНУТОГО УРОВНЯ

• Синтаксис и селекторы, цвета, фоны и типографика

• Блочная модель, display, позиционирование, единицы измерения и значения

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

• Основы Flexbox и продвинутый Flexbox

• Основы Grid, области Grid и продвинутая работа с Grid-макетами

• Адаптивный дизайн, медиазапросы и контейнерные запросы

• Пользовательские свойства (переменные), функции, специфичность, каскад и @layer

• Переходы, трансформации, покадровая анимация, фильтры и режимы наложения

• Тёмный режим и цветовые схемы, прокрутка и переполнение, clip-path и фигуры

• Отладка с DevTools, архитектура BEM, Sass, PostCSS и токены дизайна

• Шаблоны компонентов, современные шаблоны макетов, производительность и Houdini

ПРАКТИКА, КОТОРАЯ ЗАПОМИНАЕТСЯ

• Квизы для проверки усвоенных знаний

• Шпаргалка с 69 записями о свойствах, селекторах и синтаксисе макетов

• 50 вопросов для собеседования с понятными ответами — полезно перед собеседованием на должность фронтенд-разработчика или веб-разработчика

• Библиотека кода с короткими примерами, которые можно открыть и отредактировать

• Сохраняйте собственный код, заметки и избранные уроки

• World Coding Challenge: три глобальных раунда в день, решения на Python, JavaScript и других языках

• Серии занятий, XP, таблица лидеров и ежедневные напоминания, чтобы продолжать практиковаться

AI-МЕНТОР

• Застряли на макете или свойстве? Спросите AI-ментора о концепции, ошибке или собственном коде

• Площадка AI: опишите страницу и наблюдайте, как создаются HTML и CSS

• Бесплатные пользователи получают ежедневный лимит AI; в Pro он становится безлимитным

ДЛЯ КОГО

• Полные новички, делающие первые шаги в веб-разработке

• Дизайнеры, которые хотят самостоятельно стилизовать свои страницы, а не передавать макеты разработчикам

• Студенты, которым нужна дополнительная практика параллельно с курсом веб-дизайна

• Разработчики, знающие основы HTML и CSS и желающие наконец разобраться в Flexbox и Grid

• Те, кто меняет профессию и готовится к работе во фронтенде

БЕСПЛАТНАЯ ВЕРСИЯ И PRO

Первый курс, первый проект с пошаговым руководством, две миссии и интерактивный редактор доступны бесплатно, вместе с ежедневным лимитом AI-ментора. Pro открывает все курсы, все проекты и миссии, экзамен для получения сертификата и безлимитный AI, а также убирает рекламу.

Начните сегодня, изучайте CSS в удобном темпе и создайте стиль для своей первой страницы за несколько минут.