CodeDala
◐
💻 Әзірлеушілерге

Дизайн негіздері

Иерархия, шегіністер, контраст, типографика және верстка

Не құрастырасың
📘Берік іргетас
⚡Браузерде тәжірибе
🎯Шағын жобалар
🎓Курс сертификаты
📘 30 сабақ⏱ 1-2 кеш🎓 Жаңадан бастаушыларға
🎯 Мақсат
Дизайн негіздері меңгеру
⚡+350XP
🏆СертификатPDF
🎓Курс аяқталды
Прогресс0 / 30 · 0%
Келесі қадам: UI-дизайн дегеніміз не

Курс бағдарламасы

01

Визуалды иерархия мен негіздер

0 / 5 сабақ
⌄
  1. 01

    UI-дизайн дегеніміз не

    Интерфейс — қарым-қатынас•Үш принцип•CSS тәжірибесі⚡ +10
    ▶ Қазір
  2. 02

    Визуалды иерархия: не алдымен оқылады

    Өлшем — басты құрал•Қалыңдық пен салмақ•Акцент элементі⚡ +10
    Ашық
  3. 03

    Бір негізгі әрекет

    Бастапқы түйме•Екінші ретті•Иерархия нұсқалары⚡ +10
    Ашық
  4. 04

    Мөлшер, салмақ, түс — иерархия үштігі

    font-size шкаласы•font-weight мәндері•Негізгі/қосалқы мәтін⚡ +10
    🔒 Pro
  5. 05

    Бірізділік: бірдей элементтер бірдей көрінеді

    CSS класс қайта қолдану•Бірізді түс схемасы•Қайталанатын паттерн⚡ +10
    🔒 Pro
02

Шегіністер мен бос кеңістік

0 / 5 сабақ
⌄
  1. 06

    padding пен margin: айырмашылығы

    Ішкі шегініс padding•Сыртқы шегініс margin•Box-model негізі⚡ +10
    🔒 Pro
  2. 07

    Бос кеңістік — «тыныс алу» орны

    Кеңістік оқылуды жақсартады•line-height мәні•max-width қолдану⚡ +10
    🔒 Pro
  3. 08

    8px торы: шегіністерде жүйе

    8px тор принципі•gap flexbox-та•Бірізді шегіністер⚡ +10
    🔒 Pro
  4. 09

    Тығыздық: compact пен comfortable

    Тығыз интерфейс•Кең интерфейс•Аудиторияны ескеру⚡ +10
    🔒 Pro
  5. 10

    Шегіністер тәжірибесі: профиль карточкасы

    Кешенді шегіністер•gap пен padding•Нақты компонент⚡ +10
    🔒 Pro
03

Түс пен контраст

0 / 5 сабақ
⌄
  1. 11

    Түс теориясының негіздері

    Негізгі/қосалқы түстер•HEX форматы•Түс палитрасы⚡ +10
    🔒 Pro
  2. 12

    Контраст: WCAG оқу мүмкіндігі

    WCAG 4.5:1 ережесі•Қою мәтін ашық фонда•Контрастты тексеру⚡ +10
    🔒 Pro
  3. 13

    Семантикалық түстер: жасыл, сары, қызыл

    Мағынасы бар түс•Хабарлама компоненттері•Danger/Warning/Success⚡ +10
    🔒 Pro
  4. 14

    Бренд түсі және акцент

    Primary бренд түсі•Hover эффектісі•CSS custom properties⚡ +10
    🔒 Pro
  5. 15

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

    linear-gradient•box-shadow деңгейлері•Тереңдік эффектісі⚡ +10
    🔒 Pro
04

Типографика

0 / 5 сабақ
⌄
  1. 16

    Шрифт таңдау: sans-serif негіздері

    font-family стек•system-ui шрифті•Google Fonts⚡ +10
    🔒 Pro
  2. 17

    Типографикалық масштаб

    Өлшем деңгейлері•h1–h4 иерархиясы•Мәтін ырғағы⚡ +10
    🔒 Pro
  3. 18

    letter-spacing пен text-transform

    Белгі аралығы•UPPERCASE мәтін•Жол ырғағы⚡ +10
    🔒 Pro
  4. 19

    Мәтін туралау және ен

    text-align нұсқалары•ch бірлігі•Оқылымды жол ұзындығы⚡ +10
    🔒 Pro
  5. 20

    Типографика тәжірибесі: мақала бет

    Толық мақала стилі•Тақырып + мета•Жол ырғағы⚡ +10
    🔒 Pro
05

Макет, туралау және торлар

0 / 5 сабақ
⌄
  1. 21

    Flexbox: туралау мен бөлу

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

    CSS Grid: баған торлары

    grid-template-columns•gap торда•fr бірлігі⚡ +10
    🔒 Pro
  3. 23

    Sidebar макеті: бекітілген + икемді баған

    Sidebar + content•grid баған ені•Бекітілген енді баған⚡ +10
    🔒 Pro
  4. 24

    Ортаға туралау: горизонталь пен вертикаль

    margin: 0 auto•place-items: center•Абсолютті орталандыру⚡ +10
    🔒 Pro
  5. 25

    Responsive: медиа сұраулары

    @media breakpoint•Mobile-first стратегия•Икемді тор⚡ +10
    🔒 Pro
06

Компоненттер мен шағын жобалар

0 / 5 сабақ
⌄
  1. 26

    Батырма компоненті: variant жүйесі

    Primary/Secondary/Ghost•Hover және active күйлер•disabled стилі⚡ +10
    🔒 Pro
  2. 27

    Input өрісі: label, placeholder, focus

    input стилі•focus сақинасы•Форма қолжетімділігі⚡ +10
    🔒 Pro
  3. 28

    Шағын жоба: өнім карточкасы

    Толық карточка•Сурет + мәтін + CTA•Нақты UI компонент⚡ +10
    🔒 Pro
  4. 29

    Шағын жоба: hero секциясы

    Hero макеті•CTA батырмалары•Толық секция⚡ +10
    🔒 Pro
  5. 30

    Шағын жоба: авторизация формасы

    Login форма•Барлық компоненттер•Курс қорытындысы
    Курс аяқталды
    🔒 Pro