A signup form for the fictional insurance company called Peacock Insurance. This website is there to allow users to sign up as new customers for insurance ensuring that they have filled out the form correctly according to the requirements or make sure users do not leave any input field blank. The signup page targets those who need assistance by using aria labels, keyboard focus, color contrast to meet web accessibility standards and HTML semantics.
If you want to use a keyboard, just hit 'tab' to go down the form inputs, each form label will highlight in light blue to let you know what input box you're on. If you type less than what the form requires it will highlight in red around the box, if you successfully filled out the input box the color around the text box will highlight in green. Continue using the tab until you reach down to the 'Sign up' button to submit.
You can also use your mouse to manually input your text inside the input boxes and the boxes will highlight if you filled out the section correctly or incorrectly.
This can be found at the deployment address:
https://shanice826.github.io/Peacock_Insurance/#
PeacockInsurance.mp4
- HTML5
- CSS3
- Vanilla JS (ES6+)
- Flexbox
- Media Queries
- GitHub Pages
- HTML Semantics: not using DIV tags all over the place, being mindful when to use them as only for styling but not for solely structure.
- Form verification with HTML and JS.
- Streamlining the UI to make the UX work as it should while still remaining beautiful and repsonsive.
Hi, I’m Shanice Thompson—a passionate frontend developer dedicated to building beautiful, accessible, and user-first websites. I care deeply about creating inclusive web experiences and am actively growing in JavaScript, React, and modern frontend tools.