Module · Frontend Engineer
Performance & Accessibility
A budget the build enforces, and an interface everybody can use.
TOPIC 01
Core Web Vitals
LCP, INP and CLS - the three numbers that decide how the page feels.
What you'll practice
- Set a Performance Budget — guided · beginner
- Keep the Bundle Small — practice · intermediate
A command you'll meet
cat ~/frontend/perf/budget.jsonA budget nobody enforces is a wish. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Set a Performance Budget
Pick the numbers you are willing to ship with, and write them down where the CI job can read them.
Keep the Bundle Small
The fastest byte is the one you never ship. Write the size budget and the rule that splits the code you do not need on first paint.
TOPIC 02
Accessibility & Auditing
Semantics first, contrast second - and an audit that finds both.
What you'll practice
- Build an Accessible Dialog — practice · intermediate
- Audit the Contrast — challenge · advanced
A command you'll meet
cat ~/frontend/src/components/AccessibleDialog.tsxAccessibility is a requirement, not a feature. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Build an Accessible Dialog
A modal that traps focus, names itself and closes on escape. Write the component with the semantics a screen reader needs.
Audit the Contrast
Text that cannot be read is a defect. Write the audit with the ratios, the rule that applies and the fix you ship.