CodeType
learn by typing
HomeLessons
Curriculum

All lessons

Type your way through each lesson in order — from your first tag to async JavaScript.

  • 01
    beginner
    Lesson 01
    21
    Lesson 1: Your First HTML Page

    Every web page starts with this skeleton: doctype, html, head, and body.

  • 02
    advanced
    Lesson 02
    5
    Design 1: Modal Dialog

    A centered popup window over a dark overlay.

  • 03
    intermediate
    Lesson 03
    1
    Design 1: Primary Button

    A solid filled button with hover effect — the most common call to action.

  • 04
    advanced
    Lesson 04
    4
    Design 2: Toast Notification

    A floating notification that slides in from a corner.

  • 05
    beginner
    Lesson 05
    9
    Lesson 2: The Main Heading

    Use the h1 tag to show the most important title on a page.

  • 06
    intermediate
    Lesson 06
    0
    Design 2: Outline Button

    Outline buttons feel lighter — great for secondary actions.

  • 07
    beginner
    Lesson 07
    3
    Lesson 3: Paragraphs

    Use the p tag to write a full paragraph of text.

  • 08
    intermediate
    Lesson 08
    1
    Design 3: Gradient Button

    Linear gradients make buttons feel modern and vibrant.

  • 09
    advanced
    Lesson 09
    1
    Design 23: Dropdown Menu

    A menu that appears below a trigger button.

  • 10
    beginner
    Lesson 10
    1
    Lesson 4: Heading Levels

    There are six heading levels from h1 to h6. Bigger number means smaller size.

…
CodeType · Learn by typing
ImprintPrivacyTermsCookies