PNL Learn

Design for Developers

Layout, type, color and patterns that make interfaces look right.

Learn the design decisions behind interfaces that look right, and turn each one into CSS you can measure. You will build visual hierarchy, a modular type scale and a 4 point spacing system, use proximity, alignment and line length to show structure, build a palette with HSL and OKLCH shades, semantic colors and a dark theme that passes contrast in every pairing, and recognize the patterns users already know: cards, breadcrumbs, progress indicators, progressive disclosure, dialogs, lazy registration, infinite scroll and the shopping cart. Then you will read a design brief, translate Figma auto layout and inspect values into CSS, turn design tokens into custom properties, and ask designers the right questions. Every exercise is graded on the rendered page: computed sizes and ratios, spacing values, geometry, hue and measured contrast. The course ends by building a hero, a settings card and an empty state from written briefs.

BeginnerHTML and CSS5 lessons54 exercisesAbout 4.5 h
Create a free account

What you will learn

  • Visual hierarchy
  • Type scales
  • Spacing systems
  • Color and contrast
  • Dark themes
  • UI patterns
  • Design tokens
  • Design handoff

Lessons

  1. 1

    Visual Design Fundamentals

    Hierarchy, a modular type scale, a 4 point spacing system, proximity, alignment and line length, each turned into CSS you can measure.

    10 exercises

  2. 2

    Color in Practice

    A palette with roles, shades built from one hue in HSL and OKLCH, semantic colors that never rely on color alone, a dark theme from the same tokens, and every pairing checked for contrast.

    12 exercises

  3. 3

    User-Centered Design and Patterns

    Personas, user research and usability testing, then the patterns people already know: affordance and consistency, cards, breadcrumbs, progress indicators, progressive disclosure and dialogs, lazy registration, infinite scroll and the cart.

    12 exercises

  4. 4

    From Design Brief to Code

    Read a brief for its goal, audience and constraints, translate Figma auto layout and inspect values into CSS, export assets at the right size, turn design tokens into custom properties, and ask for everything a mockup leaves out.

    12 exercises

  5. 5

    Putting It Together

    Build three specs from written briefs on one design system: a hero section, a settings card with its dark theme, and an empty state, each checked for scale, spacing, contrast and states.

    8 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Code exercise: 18
  • Fix the bug: 10
  • Fill in the blank: 7
  • Type the answer: 6
  • Multiple choice: 4
  • Predict the output: 4
  • Select all that apply: 3
  • Match the pairs: 2

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Human-Computer Interaction
    • HCI-EvaluationEvaluating the Design
    • HCI-UserUnderstanding the User
    • HCI-DesignSystem Design
MDN Curriculum (core)MozillaSource
  • Design for developers
    • 8.1Basic design theory
    • 8.2User-centered design
    • 8.3Understanding design briefs
WCAG 2.2 Level A and AAW3CSource
  • Perceivable
    • 1.4.1Use of Color
    • 1.4.3Contrast (Minimum)
    • 1.4.11Non-text Contrast

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.