Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
- The first key thing I learned was how to style custom radio buttons and checkboxes. Rather than relying on the default browser-provided form controls, I explored ways to create my own unique visual designs for these UI elements. This involved using CSS to hide the original controls and then rebuilding them from scratch using techniques like
pseudo-elements,
and strategic positioning. By the end of this process, I was able to craft visually appealing and consistent custom radio buttons and checkboxes that seamlessly integrated with the overall design of the project. - The second major area of learning was form validation. This challenge required me to not only understand the HTML5 validation API, but also dive into the JavaScript validation API. Using the HTML5 validation features, such as the
required
,minlength
andtype
attributes, I was able to declaratively define validation rules directly in the markup. However, I also explored the programmatic validation capabilities of JavaScript, which allowed me to dynamically check form field values, trigger validation checks, display error messages, and update the UI accordingly. Mastering both the declarative and programmatic approaches to form validation has equipped me with a well-rounded skill set for handling user input reliably and effectively.
Any feedback is appreciated
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord