✦ StealThis .dev
Pages Medium

DIY — Learn Guide

A dark electronics-shop learn guide for a fictional maker store, SOLDERBOX Learn, walking through a desk weather lamp build. A sticky sidebar lists seven guide sections and swaps the main pane without a reload while a progress bar and dot row track how far you have read. Panes cover an illustrated overview, a parts list with SVG component plates and add-to-cart rows, a hoverable wiring diagram, numbered assembly steps, hand-highlighted code with copy and download rows, and a troubleshooting accordion.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Learn Guide

A full multi-page tutorial layout rendered as a single document. The left rail is a sticky table of contents — seven numbered sections with per-section reading times, an active marker, and a progress bar that fills as you move through the guide. Selecting a section swaps the main pane instantly with a short fade, updates the dot row under the header, marks the section as read, and rewrites the prev/next footer buttons. Arrow keys, Home and End move between sections from the keyboard, and the tab list carries proper role="tab" semantics.

The header carries the guide identity: title, author chip with a gradient avatar, difficulty and build-time badges, updated date, reading estimate, and a save-to-favorites toggle backed by aria-pressed. Each pane has its own character. Parts rows pair bright SVG component art on white rounded plates with mono product codes, per-unit prices, individual add buttons and an “add all” bar that keeps a live cart counter in the top bar. The wiring pane pairs an SVG schematic with a connections table — hovering or focusing a row dims every wire except the matching one, which thickens and picks up a glow.

The code pane uses hand-rolled span colouring with CSS-counter line numbers, a clipboard copy with an execCommand fallback, and a download row of simulated file assets. Troubleshooting is a single-open accordion animated by measured scrollHeight, and every interaction reports through one small toast() helper.

How this look is built

The information architecture nods to Adafruit-style learn guides — section rail, parts list, wiring, code, troubleshooting — but everything here is drawn from scratch. CSS Grid handles both the two-column shell and the parts rows, which re-flow into a named-area stack under 520px instead of needing a separate mobile markup path. position: sticky keeps the section rail parked without any scroll listener, the blueprint and plate textures are pure layered linear-gradient background images rather than tiled PNGs, and the wire highlight is a single dim class on the SVG root plus a hot class on one path — the cascade does the work, so no per-element style writing or canvas redraw is involved. Line numbers come from a CSS counter on the <pre>, which keeps the copyable text free of number noise, something a two-column table-based numbering scheme could never do cleanly.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.