Free course

Native Web Interfaces Course

Build interactive, accessible interfaces with modern HTML elements and native browser APIs instead of a JavaScript framework.

5 modules · 25 lessons · No signup

Prerequisites: HTML, CSS and JavaScript

~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build and test a progressively enhanced project board with disclosures, dialogs, popovers, reusable templates, native events, form feedback, and view transitions.

Take this course offline

Subscribe to my newsletter to get every free book, downloadable course, and complete software download.

Get the downloads

Course contents

  1. Progressive interface foundations

    Start with working HTML, native disclosure, meaningful visibility, and small delegated behaviors.

    1. ✓ Start with working HTML
    2. ✓ Build disclosure with details and summary
    3. ✓ Control visibility with hidden and inert
    4. ✓ Connect behavior with data attributes
    5. ✓ Check your understanding: progressive interface foundations

  2. Dialogs that behave like dialogs

    Open, close, cancel, focus, and reuse modal dialogs without rebuilding browser behavior.

    1. ✓ Open a modal dialog
    2. ✓ Close dialogs with forms
    3. ✓ Handle cancel, close, and focus
    4. ✓ Build a reusable delete confirmation flow
    5. ✓ Check your understanding: dialogs that behave like dialogs

  3. Popovers and action menus

    Create declarative popovers, choose their behavior, and keep transient controls usable.

    1. ✓ Open a popover with HTML
    2. ✓ Choose auto or manual popovers
    3. ✓ Build a reusable task action panel
    4. ✓ Avoid tooltip and focus traps
    5. ✓ Check your understanding: popovers and action menus

  4. Native rendering and state

    Clone templates, reflect state in the DOM, connect components with events, and animate updates.

    1. ✓ Clone reusable UI with template
    2. ✓ Reflect state with DOM attributes
    3. ✓ Coordinate components with custom events
    4. ✓ Animate state with view transitions
    5. ✓ Check your understanding: native rendering and state

  5. Forms, feedback, and the final audit

    Use browser validation, suggestion controls, output elements, status indicators, and a real test matrix.

    1. ✓ Validate with browser constraints
    2. ✓ Offer suggestions with datalist
    3. ✓ Show results with output, progress, and meter
    4. ✓ Finish and audit the interface
    5. ✓ Check your understanding: forms, feedback, and the final audit