Оформление

CSS.

Цвета, сетки, адаптивность и анимации. Сделай страницу красивой.

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

  • 80 уроков
  • 16 модулей
  • 4800 XP
Приступить → Программа курса ›
Иллюстрация курса CSS
О КУРСЕ

Зачем это нужно.

Страница без CSS выглядит как документ из девяностых. Именно стили превращают разметку в аккуратный, удобный и красивый интерфейс: сетки, цвета, шрифты, анимации и адаптивность под любой экран.

Образ

Одежда и интерьер

Если HTML — скелет здания, то CSS — отделка и мебель: цвет стен, высота потолка, расстановка шкафов. Меняя стили, ты не трогаешь конструкцию, а лишь решаешь, как всё выглядит. Поэтому дизайн можно переделать, не переписывая страницу.

РЕЗУЛЬТАТ

Чему ты научишься.

1

Выбирать нужные элементы

Селекторы, каскад, наследование и специфичность: ты понимаешь, какое правило победит и почему.

2

Работать с цветом и текстом

HEX, RGB, HSL, шрифты, интервалы и аккуратная типографика.

3

Управлять размерами и отступами

Блочная модель, единицы px, %, rem, vw и vh, фоны, градиенты и тени.

4

Строить макеты на Flexbox и Grid

Выравнивание в ряд и колонку, двумерные сетки, grid-template-areas и выбор между flex и grid.

5

Делать адаптивные сайты

Mobile first, медиазапросы, гибкие изображения и адаптивная типографика.

6

Оживлять интерфейс

Состояния :hover и :focus, псевдоэлементы, transform, @keyframes, CSS-переменные и тёмная тема.

ПРАКТИКА

Что ты создашь.

Карточки и панели

Практики на каждом модуле: карточка товара, бейджи, навигация, галерея.

Адаптивный макет страницы

Сетка, которая перестраивается под экран телефона, планшета и компьютера.

Итоговый лендинг

Финальный проект: собираешь всё изученное в одну красивую страницу.

ПРОГРАММА

Все темы по порядку.

16 модулей, 80 уроков. Уроки открываются по очереди: следующий — после того, как закончишь текущий. Пройденные отмечаются галочкой.

1Первые шагиЧто такое CSS и как подключить стили.5 уроков
300 XP
  1. Что такое CSS и как он работает50 XP
  2. Три способа подключить CSS50 XP
  3. Синтаксис: селектор, свойство, значение50 XP
  4. Комментарии и ошибки в CSS50 XP
  5. DevTools: смотрим и правим стили100 XP
2СелекторыКак выбрать нужные элементы на странице.5 уроков
300 XP
  1. Селекторы тегов, классов и id50 XP
  2. Группировка и потомки50 XP
  3. Дочерние и соседние элементы50 XP
  4. Селекторы атрибутов50 XP
  5. Практика: страница-визитка100 XP
3Каскад и наследованиеКто побеждает, когда правила спорят.5 уроков
300 XP
  1. Наследование50 XP
  2. Каскад и порядок правил50 XP
  3. Специфичность селекторов50 XP
  4. !important и сброс стилей50 XP
  5. Практика: чиним конфликтующие стили100 XP
4Цвета и текстЦвет, шрифты и красивая типографика.5 уроков
300 XP
  1. Цвета: имена, HEX, RGB, HSL50 XP
  2. Шрифты: семейство, размер, насыщенность50 XP
  3. Текст: интервалы, выравнивание, оформление50 XP
  4. Веб-шрифты и запасные гарнитуры50 XP
  5. Практика: типографика статьи100 XP
5Блочная модельИз чего состоит любой элемент.5 уроков
300 XP
  1. Все элементы — коробки50 XP
  2. padding и margin50 XP
  3. border и border-radius50 XP
  4. box-sizing50 XP
  5. Практика: карточка товара100 XP
6Размеры и единицыpx, %, rem и умение управлять размерами.5 уроков
300 XP
  1. Единицы измерения: px, %, em, rem50 XP
  2. vw, vh, min-width и max-width50 XP
  3. Переполнение: overflow50 XP
  4. display: block, inline, inline-block, none50 XP
  5. Практика: профиль пользователя100 XP
7Фон и оформлениеФоны, градиенты и тени.5 уроков
300 XP
  1. Фон: цвет и изображение50 XP
  2. Размер, позиция и повтор фона50 XP
  3. Градиенты50 XP
  4. Тени: box-shadow и text-shadow50 XP
  5. Практика: баннер на главной100 XP
8ПозиционированиеТочное размещение элементов.5 уроков
300 XP
  1. position: static и relative50 XP
  2. position: absolute50 XP
  3. position: fixed и sticky50 XP
  4. z-index и порядок слоёв50 XP
  5. Практика: бейджи и закреплённая шапка100 XP
9Flexbox. Часть 1Выстраиваем элементы в ряд и колонку.5 уроков
300 XP
  1. Что такое flex-контейнер50 XP
  2. flex-direction и flex-wrap50 XP
  3. justify-content50 XP
  4. align-items и align-self50 XP
  5. Практика: панель навигации100 XP
10Flexbox. Часть 2Гибкие размеры и сложные макеты.5 уроков
300 XP
  1. gap: промежутки50 XP
  2. flex-grow, flex-shrink и flex-basis50 XP
  3. Центрирование и order50 XP
  4. Вложенные flex-контейнеры50 XP
  5. Практика: карточки в ряд100 XP
11Grid. Часть 1Двумерная сетка.5 уроков
300 XP
  1. Что такое grid50 XP
  2. grid-template-columns и единица fr50 XP
  3. repeat() и minmax()50 XP
  4. Размещение: grid-column и grid-row50 XP
  5. Практика: галерея100 XP
12Grid. Часть 2 и макетыСложные макеты страниц.5 уроков
300 XP
  1. grid-template-areas50 XP
  2. auto-fit и auto-fill50 XP
  3. Выравнивание в grid50 XP
  4. Flex или grid: что выбрать50 XP
  5. Практика: макет страницы100 XP
13АдаптивностьСайт, который хорошо выглядит везде.5 уроков
300 XP
  1. Viewport и подход mobile first50 XP
  2. Медиазапросы50 XP
  3. Гибкие изображения и пропорции50 XP
  4. Адаптивная типографика и clamp()50 XP
  5. Практика: адаптивный лендинг100 XP
14Эффекты и состоянияНаведение, фокус и псевдоэлементы.5 уроков
300 XP
  1. Псевдоклассы :hover, :focus, :active50 XP
  2. Псевдоклассы структуры: :first-child и :nth-child50 XP
  3. Псевдоэлементы ::before и ::after50 XP
  4. Плавные переходы: transition50 XP
  5. Практика: интерактивные кнопки и карточки100 XP
15Анимации и переменныеДвижение и единый стиль через переменные.5 уроков
300 XP
  1. transform: сдвиг, поворот, масштаб50 XP
  2. Анимации: @keyframes50 XP
  3. CSS-переменные50 XP
  4. Тёмная и светлая темы50 XP
  5. Практика: анимированный индикатор100 XP
16Мастерство и проектыЧистый CSS, доступность и финальные проекты.5 уроков
300 XP
  1. Организация CSS: именование и структура50 XP
  2. Доступность стилей50 XP
  3. Проект: лендинг. Часть 150 XP
  4. Проект: лендинг. Часть 250 XP
  5. Финальный проект: страница портфолио100 XP
ДЛЯ КОГО

Подойдёт ли тебе этот курс.

Кому подойдёт

  • Тем, кто уже знает основы HTML
  • Тем, кто хочет, чтобы сайты выглядели современно
  • Будущим фронтенд-разработчикам

Что нужно знать и иметь

  • Желательно пройти HTML: CSS стилизует то, что ты умеешь размечать
  • Знаний JavaScript не нужно
  • Код проверяется прямо на странице урока: результат ты увидишь сразу
КАК ЭТО РАБОТАЕТ

Каждый урок — четыре шага.

Теория, вопросы, практика и итоговое задание. Рядом всегда есть помощник Nox-AI: он подскажет, но не решит за тебя.

  1. 1Теория

    Короткое объяснение с примерами.

  2. 2Проверь себя

    Вопросы на понимание.

  3. 3Практика

    Пишешь код — проверка мгновенная.

  4. 4Challenge

    Итог урока и очки XP.

Подробнее, как проходит урок ›    Что умеет Nox-AI ›

ПУТЬ

Что было до и что будет после.

← Сначала

HTML

Этот курс опирается на него. Если ты уже знаком с темой, можно пропустить.

О курсе →Дальше →

JavaScript

Поведение: формы, данные, приложения.

О курсе →
ВОПРОСЫ

О курсе CSS.

Можно ли учить CSS без HTML?

Можно, но будет тяжело: стили применяются к HTML-элементам. Поэтому мы рекомендуем сначала пройти хотя бы основную часть курса HTML.

Как проверяется код?

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

Что дальше?

JavaScript — он добавит страницам поведение: кнопки, формы, данные.

Готов начать?

Открой курс и пройди первый урок. Прогресс сохраняется в твоём аккаунте.

Приступить → Путь обучения ›

Курсы