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: What is UI design

Course program

01

Visual hierarchy and foundations

0 / 5 lessons
⌄
  1. 01

    What is UI design

    An interface as communication•Three principles•Practice in CSS⚡ +10
    ▶ Now
  2. 02

    Visual hierarchy: what is read first

    Size — the main tool•Thickness and weight•The accent element⚡ +10
    Open
  3. 03

    One primary action

    The primary button•Secondary•Hierarchy variants⚡ +10
    Open
  4. 04

    Size, weight, color — the hierarchy trio

    The font-size scale•font-weight values•Primary/secondary text⚡ +10
    🔒 Pro
  5. 05

    Consistency: identical elements look identical

    Reusing a CSS class•A consistent color scheme•A repeating pattern⚡ +10
    🔒 Pro
02

Spacing and white space

0 / 5 lessons
⌄
  1. 06

    padding vs margin: the difference

    Inner spacing: padding•Outer spacing: margin•Box-model basics⚡ +10
    🔒 Pro
  2. 07

    White space — «room to breathe»

    Space improves reading•The line-height value•Using max-width⚡ +10
    🔒 Pro
  3. 08

    The 8px grid: a system for spacing

    The 8px grid principle•gap in flexbox•Consistent spacing⚡ +10
    🔒 Pro
  4. 09

    Density: compact vs comfortable

    A dense interface•A spacious interface•Considering the audience⚡ +10
    🔒 Pro
  5. 10

    Spacing practice: a profile card

    Combined spacing•gap and padding•A real component⚡ +10
    🔒 Pro
03

Color and contrast

0 / 5 lessons
⌄
  1. 11

    Color theory basics

    Primary/secondary colors•The HEX format•A color palette⚡ +10
    🔒 Pro
  2. 12

    Contrast: readability per WCAG

    The WCAG 4.5:1 rule•Dark text on a light background•Checking contrast⚡ +10
    🔒 Pro
  3. 13

    Semantic colors: green, yellow, red

    Color with meaning•Message components•Danger/Warning/Success⚡ +10
    🔒 Pro
  4. 14

    Brand color and accent

    The primary brand color•The hover effect•CSS custom properties⚡ +10
    🔒 Pro
  5. 15

    Gradient and box-shadow

    linear-gradient•box-shadow levels•The depth effect⚡ +10
    🔒 Pro
04

Typography

0 / 5 lessons
⌄
  1. 16

    Choosing a font: sans-serif basics

    The font-family stack•The system-ui font•Google Fonts⚡ +10
    🔒 Pro
  2. 17

    The typographic scale

    Size levels•The h1–h4 hierarchy•Text rhythm⚡ +10
    🔒 Pro
  3. 18

    letter-spacing and text-transform

    Letter spacing•UPPERCASE text•Line rhythm⚡ +10
    🔒 Pro
  4. 19

    Text alignment and width

    text-align options•The ch unit•Readable line length⚡ +10
    🔒 Pro
  5. 20

    Typography practice: an article page

    Full article style•Heading + meta•Line rhythm⚡ +10
    🔒 Pro
05

Layout, alignment and grids

0 / 5 lessons
⌄
  1. 21

    Flexbox: alignment and distribution

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

    CSS Grid: column grids

    grid-template-columns•gap in a grid•The fr unit⚡ +10
    🔒 Pro
  3. 23

    Sidebar layout: fixed + flexible column

    Sidebar + content•Grid column widths•A fixed-width column⚡ +10
    🔒 Pro
  4. 24

    Centering: horizontal and vertical

    margin: 0 auto•place-items: center•Absolute centering⚡ +10
    🔒 Pro
  5. 25

    Responsive: media queries

    @media breakpoint•The mobile-first strategy•A flexible grid⚡ +10
    🔒 Pro
06

Components and mini-projects

0 / 5 lessons
⌄
  1. 26

    The button component: a variant system

    Primary/Secondary/Ghost•hover and active states•The disabled style⚡ +10
    🔒 Pro
  2. 27

    Input field: label, placeholder, focus

    input style•The focus ring•Form accessibility⚡ +10
    🔒 Pro
  3. 28

    Mini-project: a product card

    A full card•Image + text + CTA•A real UI component⚡ +10
    🔒 Pro
  4. 29

    Mini-project: a hero section

    Hero layout•CTA buttons•A complete section⚡ +10
    🔒 Pro
  5. 30

    Mini-project: an authentication form

    A login form•All components•Course conclusion
    Course complete
    🔒 Pro