INDEPENDENT TECHNICAL EXERCISE / NOT A CLIENT JOB
Broken on mobile.
Fixed with intent.
A deliberately faulty inquiry form, repaired using semantic HTML, responsive CSS and JavaScript validation. Open both pages, resize them, test the interactions and compare behavior.
BEFORE fixed-width layout
Deliberately unusable narrow layouts and missing functional behavior.
AFTER responsive and functional
Fluid layout, responsive choices, semantic fields, error messages and a live summary.
WHAT THE CASE PROVES
01 / FIND
Layout diagnosis.
Identify overflow, fixed widths, hidden content and broken behavior at common viewport sizes.
02 / IMPLEMENT
Accessible interactions.
Use native labels, radiogroups and a clear error state. The form previews data locally; nothing is transmitted.
03 / TEST
Reproducible checks.
Run mobile and desktop viewport tests alongside keyboard and form behavior checks.
All content is fictional. This demonstration does not use a server or collect personal information. Source files are included with the downloadable portfolio and can be inspected.