CodeDala
#
💻 For developers

CSS & Layout

Styles, grids, and responsive design

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 16 lessons⏱ 1-2 evenings🎓 Intermediate
🎯 Mission
Master CSS & Layout
⚡+210XP
🏆CertificatePDF
🎓Course complete
Progress0 / 16 · 0%
Next up: Что такое CSS

Course program

01

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

0 / 8 lessons
⌄
  1. 01

    Что такое CSS

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

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

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

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

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

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

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

    id-селектор

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

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

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

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

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

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

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

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

0 / 8 lessons
⌄
  1. 09

    Цвета и фон

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

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

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

    Box model: padding, border, margin

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

    Display: block, inline, none

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

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

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

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

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

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

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

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

    Всё вместе•Цвета + шрифты + отступы•Flexbox
    Course complete
    Open
CSS & Layout — online coding course