Web forms can be tricky to style. For my latest portfolio challenge, I built a custom order form for Pixel Pizza, a fictional retro arcade pizzeria.

Semantic HTML as the Foundation

Before writing any CSS, I structured the form using semantic HTML. Every input is wrapped in a <fieldset> to group related data, and every input has a dedicated <label> linked via the id attribute.

This improves the user experience significantly. By linking the label, clicking the word “Pepperoni” ticks the box next to it.

Focus States and Visual Feedback

A crucial part of form design is letting the user know exactly where they are. I used the :focus pseudo-class to remove the browser’s default blue outline when a user clicks into a text box. I replaced it with a bright pink border that matches the Pixel Pizza branding.

Overall, this portfolio project really challenged me to really think about accessibility when designing for web browsers.

The full project can be found on my GitHub Pages. If you are interested in the build, the repository is linked here.