This is a solution to Project: Sign-up Form for the Odin Project. The Odin Project provides a free open-source coding curriculum that can be taken entirely online.
Project: Calculator is one of two projects in the Intermediate HTML and CSS Course. It provides an opportunity to practice the content that was covered in the course sections Intermediate HTML Concepts, Intermediate CSS Concepts, and Forms.
- Semantic HTML5 markup
- CSS custom properties
- CSS flexbox
Three things in this solution that I had not used in projects before are:
- HTML5 input types
- Styling forms
- System font stack
Other features that were covered the course sections Intermediate HTML Concepts, Intermediate CSS Concepts, and Forms and that I used in my solution are:
- CSS reset
- Relative units
- Self-hosted fonts
- Text styles
- Background image
- Box shadow
- Pseudo-classes
- Custom properties
For my solution, I only used HTML and CSS features that were covered in the curriculum of the Full Stack JavaScript learning path up to this project.
CSS grid is covered in the next section after this project. The layout in the design file for this project would be a good candidate for Layout First Design and CSS grid.
Responsive design is not covered until much later in the curriculum. I made my solution as responsive as possible with the tools I had available, using CSS flexbox but no media queries.
Web accessibility is also covered much later in the curriculum. I used what I have learned about accessibility while working on Frontend Mentor challenges.
Validating that the password fields match each other requires JavaScript. Using JavaScript for form validation is covered in a future lesson. My solution only uses client-site validation for the email address. It does not have any required form fields as none were indicated in the design file.
The form has no backend and doesn't send the submitted data anywhere.
- These font stacks will improve your site performance by Kevin Powell - This video gives a good introduction to the System UI font stack.
Find me online:
- Mastodon - @sabineemden
In addition to the system font stack, this solution uses the font Norse Bold by Joël Carrouché. The font is free for personal and commercial use and includes a complete runic alphabet with unicode support.
This solution also uses Josh Comeau's CSS reset and the Almost Black & White Color Scheme.