CodeDala
◐
💻 For developers

Design Basics

Hierarchy, spacing, contrast, typography, and layout

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 30 lessons⏱ 1-2 evenings🎓 For beginners
🎯 Mission
Master Design Basics
⚡+350XP
🏆CertificatePDF
🎓Course complete
Progress0 / 30 · 0%
Next up: Что такое UI-дизайн

Course program

01

Визуальная иерархия и основы

0 / 5 lessons
⌄
  1. 01

    Что такое UI-дизайн

    Интерфейс как общение•Три принципа•Практика в CSS⚡ +10
    ▶ Now
  2. 02

    Визуальная иерархия: что читается первым

    Размер — главный инструмент•Толщина и вес•Акцентный элемент⚡ +10
    Open
  3. 03

    Одно главное действие

    Основная кнопка•Вторичная•Варианты иерархии⚡ +10
    Open
  4. 04

    Размер, вес, цвет — тройка иерархии

    Шкала font-size•Значения font-weight•Основной/вторичный текст⚡ +10
    Open
  5. 05

    Последовательность: одинаковые элементы выглядят одинаково

    Повторное использование класса•Единая цветовая схема•Повторяющийся паттерн⚡ +10
    Open
02

Отступы и белое пространство

0 / 5 lessons
⌄
  1. 06

    padding и margin: в чём разница

    Внутренний отступ padding•Внешний отступ margin•Основы box-model⚡ +10
    Open
  2. 07

    Белое пространство — «место для дыхания»

    Пространство улучшает чтение•Значение line-height•Использование max-width⚡ +10
    Open
  3. 08

    8px сетка: система в отступах

    Принцип сетки 8px•gap во flexbox•Консистентные отступы⚡ +10
    Open
  4. 09

    Плотность: compact и comfortable

    Плотный интерфейс•Просторный интерфейс•Учёт аудитории⚡ +10
    Open
  5. 10

    Практика отступов: карточка профиля

    Комплексные отступы•gap и padding•Реальный компонент⚡ +10
    Open
03

Цвет и контраст

0 / 5 lessons
⌄
  1. 11

    Основы теории цвета

    Основные/дополнительные цвета•Формат HEX•Цветовая палитра⚡ +10
    Open
  2. 12

    Контраст: читаемость по WCAG

    Правило WCAG 4.5:1•Тёмный текст на светлом фоне•Проверка контраста⚡ +10
    Open
  3. 13

    Семантические цвета: зелёный, жёлтый, красный

    Цвет со смыслом•Компоненты сообщений•Danger/Warning/Success⚡ +10
    Open
  4. 14

    Фирменный цвет и акцент

    Основной фирменный цвет•Эффект hover•CSS custom properties⚡ +10
    Open
  5. 15

    Градиент и box-shadow

    linear-gradient•Уровни box-shadow•Эффект глубины⚡ +10
    Open
04

Типографика

0 / 5 lessons
⌄
  1. 16

    Выбор шрифта: основы sans-serif

    Стек font-family•Шрифт system-ui•Google Fonts⚡ +10
    Open
  2. 17

    Типографический масштаб

    Уровни размеров•Иерархия h1–h4•Ритм текста⚡ +10
    Open
  3. 18

    letter-spacing и text-transform

    Межбуквенный интервал•Текст UPPERCASE•Ритм строки⚡ +10
    Open
  4. 19

    Выравнивание текста и ширина

    Варианты text-align•Единица ch•Читаемая длина строки⚡ +10
    Open
  5. 20

    Практика типографики: страница статьи

    Полный стиль статьи•Заголовок + мета•Ритм строк⚡ +10
    Open
05

Макет, выравнивание и сетки

0 / 5 lessons
⌄
  1. 21

    Flexbox: выравнивание и распределение

    display flex•justify-content•align-items⚡ +10
    Open
  2. 22

    CSS Grid: колоночные сетки

    grid-template-columns•gap в сетке•Единица fr⚡ +10
    Open
  3. 23

    Макет с sidebar: фиксированная + гибкая колонка

    Sidebar + content•Ширина колонок grid•Колонка с фиксированной шириной⚡ +10
    Open
  4. 24

    Центрирование: горизонтальное и вертикальное

    margin: 0 auto•place-items: center•Абсолютное центрирование⚡ +10
    Open
  5. 25

    Responsive: медиазапросы

    @media breakpoint•Стратегия mobile-first•Гибкая сетка⚡ +10
    Open
06

Компоненты и мини-проекты

0 / 5 lessons
⌄
  1. 26

    Компонент кнопки: система вариантов

    Primary/Secondary/Ghost•Состояния hover и active•Стиль disabled⚡ +10
    Open
  2. 27

    Поле ввода: label, placeholder, focus

    Стиль input•Кольцо focus•Доступность формы⚡ +10
    Open
  3. 28

    Мини-проект: карточка товара

    Полная карточка•Изображение + текст + CTA•Реальный UI компонент⚡ +10
    Open
  4. 29

    Мини-проект: hero-секция

    Макет hero•Кнопки CTA•Полная секция⚡ +10
    Open
  5. 30

    Мини-проект: форма авторизации

    Форма Login•Все компоненты•Итог курса
    Course complete
    Open
Design Basics — online coding course