Tutorials

Four focused builds. Each one starts with plain semantic HTML, layers on data-* attributes, swaps in custom elements where they earn their keep, and reaches for a web component only when JavaScript is genuinely required.

How every tutorial is structured

The same four steps, every time. Once you've finished one tutorial, the next one feels familiar.

1. 1. Semantic HTML

   Write the content with native elements — <header>, <section>, <form>, <article>. The page works in Lynx.

2. 2. + data-* attributes

   Add data-layout, data-layout-gap, data-layout-max on the elements you already have. No wrappers, no classes.

3. 3. + Custom elements

   Reach for <layout-card>, <form-field>, <status-message> when CSS alone can't give you the shape you need.

4. 4. + Web components

   Add <data-table>, <accordion-wc>, <toast-msg> — but only where JavaScript adds something the page genuinely needs.

Pick a tutorial

Start anywhere. Each one is self-contained and takes 10–15 minutes.

Before you start

You only need a text editor and a browser. No Node, no build step, no framework. If you haven't yet, skim the Quick Start — it sets up the one-line install these tutorials assume.