Frontend engineering
Build semantic, accessible and resilient interfaces through browser behavior, layout systems, forms, performance, state and recovery.
20 units · Web, Plus, Pro · 20 programming subjects + 2 security tracks
Branches show this unit’s authored theory, coding and assessment work.
Unit 1 / 20
The element that already does it
Choose native links for destinations and named buttons for mutations so browser activation behavior matches the requested action.
0 prerequisite skills · Reading, guided completion and independent success remain separate evidence.
The course, in order
Open a unit in the map to inspect its activities. Reading, guided completion, independent work and review remain distinct evidence.
- The element that already does it
Choose native links for destinations and named buttons for mutations so browser activation behavior matches the requested action.
Open this unit - Keep navigation useful when script fails
Retain a real navigation destination when enhancement is unavailable and preserve native modified-click behavior.
Open this unit - Forms the browser understands
Distinguish authored form attributes, current user values and reset defaults without replacing deliberately empty input.
Open this unit - Repair a wrap-safe command row
Wrap the command row without removing actions, reversing keyboard order or covering an essential control.
Open this unit - Keyboard only
Move a composite tab’s keyboard entry point only among enabled tabs, preserving one active focus position.
Open this unit - Focus after an action
Capture the actual dialog opener and restore a usable focus destination after the dialog’s owned lifetime ends.
Open this unit - Give controls names that survive loading and error states
Keep an action’s accessible name stable through loading and error states while reporting progress separately.
Open this unit - Keep enlarged text and long results reachable
Assign bounded scrolling to the result pane while preserving document access to enlarged instructions and controls.
Open this unit - Keep fallback typography readable during loading
Keep readable fallback text available and evaluate geometry changes independently of font download completion.
Open this unit - Restore filters with the browser Back button
Restore URL-backed filters on Back traversal without creating another history entry or replacing unrelated query choices.
Open this unit - Measuring
Compare the first useful interaction’s measured evidence under one controlled workload before selecting an optimization.
Open this unit - Animating the cheap properties
Collect geometry reads before DOM writes so later measurements do not repeatedly force pending layout.
Open this unit - What is in the bundle
Keep startup-critical action dependencies on the initial path while deferring genuinely optional work.
Open this unit - Choose an image source for the actual rendered slot
Choose an image candidate from its rendered slot and pixel density while reserving the displayed geometry.
Open this unit - Hand form errors to the controls that own them
Hand a submitted form’s errors to linked controls in a stable order without competing focus and status announcements.
Open this unit - Announcing a change
Distinguish pending and locally queued saves from server acceptance, preserving edits during offline work.
Open this unit - Repair authorization across client and server
Recheck permission at the current server authority rather than treating cached client visibility as authorization.
Open this unit - Choose containment without breaking content
Choose containment only where its size and paint boundaries preserve required content and scroll access.
Open this unit - Separate readable fallback from layout-shift evidence
Compare fallback readability and observed layout shift before selecting a font-loading policy.
Open this unit - Reconcile an optimistic edit by revision
Roll back an optimistic edit only while that operation still owns the visible revision.
Open this unit