01
Learn
Understand the production reason and the tradeoff behind the pattern.
2–4 minPractical field notes
Pro tips for builders who ship.
Focused lessons for the stacks developers use every day — each with a production reason, a copy-ready example, and notes for the platforms you actually deploy on.
Stacks
7
Field notes
80
Depth
Beginner to advanced
Featured in HTML8 notes in this stack
Use real buttons for actions
If it changes state, use button. If it navigates, use a link.
HTML snippet
<button type="button" aria-expanded={open} onClick={toggleMenu}> Toggle filters</button> <a href="/pricing"> View pricing</a>Beginner · 7 linesRead the full note
HTML field notes
Choose the idea you can use today.
Semantic structure, forms, buttons, and accessible defaults. Each note includes production context, copy-ready examples, and platform-specific advice.
01
BeginnerUse real buttons for actions
If it changes state, use button. If it navigates, use a link.
02
BeginnerLabel every form field
Visible or screen-reader labels make forms better for users and automated tests.
03
IntermediateKeep heading order meaningful
Headings should describe document structure, not only match a visual size.
04
IntermediatePrefer native disclosure
details and summary are excellent for simple FAQ and help interfaces.
05
BeginnerUse landmark elements
Use header, nav, main, aside, and footer so users and assistive tech can jump around quickly.
06
BeginnerWrite alt text by purpose
Describe useful images and leave decorative images empty so screen readers get the right signal.
07
IntermediateConnect errors to fields
Use aria-describedby so validation messages are announced with the input they explain.
08
BeginnerUse native input types
Use email, url, number, date, and search inputs to get better keyboards and validation for free.
A repeatable workflow
From useful idea to better production code.
Every field note follows the same short path, so you can understand it, use it, and verify the result without reading a long tutorial.
02
Apply
Copy the focused example, adapt the values, and use it in your stack.
Copy-ready03
Improve
Check the real result, keep what works, and move to the next bottleneck.
Measure it