This project forms part of the Intermediate HTML and CSS Course hosted by The Odin Project.
The aim of this project is to provide an opportunity for students to practice the new HTML and CSS elements covered earlier in the course, with particular emphasis on utilising custom fonts and building forms. The objective is to reproduce the following website sign-up page using HTML and CSS only:
To view my attempt at completing this project, please visit the following website: https://je-richards.github.io/odin-sign-up-form/
As the main purpose of these projects is to practise and highlight the skills taught throughout the course, I like to take time to reflect upon it once it's finished. This provides an opportunity to celebrate successes and identify areas for future improvement, both in terms of this project and future projects.
Each retrospective will be sectioned by the date it was written (newest to oldest) and will include the full SHA string for the latest commit that the retrospective relates to.
- Full commit SHA: 27f28fbdd965bbde3a671713854f33c364d4f4f3
- Overall the project's acted as a great opportunity to practice practice the new techniques covered in this course whilst also acting as a way to refresh earlier elements of the foundations course. Compared with previous projects, I feel my understanding and utilisation of CSS Flexboxes is improving as I feel more comfortable using and manipulating them.
- There are several areas of the page that could be improved upon in future iterations:
- The form styling doesn't perfectly match the target design, however, it's sufficient for the purposes of this exercise.
- No client-side validation has been implemented to the form inputs other than to make the passwords required fields. If this were a real-world webpage, it would be worthwhile implementing validation for all fields and adding additional JavaScript code to verify that the two passwords match.
- The responsiveness of some elements on the page is lacking when it comes to smaller display sizes. In particular:
- The Odin title and logo don't shrink.
- At sufficiently small screensizes, the background image doesn't stretch to fill the height of the page.
- The CSS doesn't currently adhere to DRY (Don't Repeat Yourself), thus could be improved.
- The background image used on the webpage can be found on unsplash.com, and was taken by Halie West.
- The font used for the "Odin" title is the Norse Font created by Joël Carrouché.