CodeDala
#
💻 Для разработчиков

CSS и Вёрстка

Стили, сетки и адаптивный дизайн

Что ты создашь
📘Прочный фундамент
⚡Практика в браузере
🎯Мини-проекты
🎓Сертификат курса
📘 16 уроков⏱ 1-2 вечера🎓 Средний
🎯 Цель
Освоить CSS и Вёрстка
⚡+210XP
🏆СертификатPDF
🎓Курс пройден
Прогресс0 / 16 · 0%
Следующий шаг: Что такое CSS

Программа курса

01

Основы и селекторы

0 / 8 уроков
⌄
  1. 01

    Что такое CSS

    Зачем CSS•Селектор и свойство•Первый стиль⚡ +10
    ▶ Сейчас
  2. 02

    Подключение CSS к HTML

    Внешний файл — link•<style> в head•Inline style — для исключений⚡ +10
    Открыт
  3. 03

    Селектор по тегу

    h1, p, a, button…•Один стиль на весь тип•Цвет, размер, отступ⚡ +10
    Открыт
  4. 04

    Класс-селектор

    .class в CSS•class="…" в HTML•Один класс — много элементов⚡ +10
    🔒 Pro
  5. 05

    id-селектор

    #id в CSS•id="…" в HTML•Уникальный, всегда один⚡ +10
    🔒 Pro
  6. 06

    Несколько селекторов через запятую

    selector1, selector2•Общий стиль для нескольких•Меньше повторов⚡ +10
    🔒 Pro
  7. 07

    Каскад: что побеждает

    Порядок правил•Специфичность интуитивно•Класс > тег⚡ +10
    🔒 Pro
  8. 08

    Комментарии в CSS

    /* … */•Зачем комментарии•Временно отключить блок⚡ +10
    🔒 Pro
02

Стилизация и макет

0 / 8 уроков
⌄
  1. 09

    Цвета и фон

    color•background-color•Форматы: имя, hex, rgb⚡ +10
    🔒 Pro
  2. 10

    Текст: шрифт, размер, насыщенность

    font-size•font-weight•font-family•line-height⚡ +10
    🔒 Pro
  3. 11

    Box model: padding, border, margin

    Внутренний отступ•Граница•Внешний отступ⚡ +10
    🔒 Pro
  4. 12

    Display: block, inline, none

    Блочные элементы•Строчные•Скрыть элемент⚡ +10
    🔒 Pro
  5. 13

    Flexbox: выравнивание

    display: flex•justify-content•align-items•gap⚡ +10
    🔒 Pro
  6. 14

    Позиционирование

    position: relative•position: absolute•top/left/right/bottom⚡ +10
    🔒 Pro
  7. 15

    Адаптивность: @media

    Медиа-запросы•Брейкпоинты•Мобильный сначала⚡ +10
    🔒 Pro
  8. 16

    Мини-проект: стильная карточка

    Всё вместе•Цвета + шрифты + отступы•Flexbox
    Курс пройден
    🔒 Pro