This project forms part of The Odin Project Foundations Course. Following the lessons on basic HTML and CSS, you are tasked with replicating a pre-designed website landing page based on provided images (found in the 'desired-outcome' folder). This is my attempt to complete the project.
The aim of the project is to practice utilising the various aspects of HTML and CSS learned thus far in the course, with particular emphasis on utilising CSS Flexbox to influence the layout of the webpage.
To view the website in your browser, please visit: https://je-richards.github.io/odin-landing-page/
As the purpose of this project is to practice the content covered thus far in The Odin Project Foundations Course, I figured it would be worthwhile performing a retrospective on the project to help identify opportunities for improvement.
The retrospective will be subsectioned based on date. That way, should I choose to return and improve upon this project, I can add further retrospectives to see how each iteration has improved upon the last and how my understanding of HTML and CSS has improved. The SHA string for the latest commit will be included in each retrospective.
I'll include the commit SHA string corresponding to the latest commit the retrospective was written for.
- Full commit SHA: 9b5a5ab975546dfce7717103517a592af018f423
- Semantic HTML wasn't used as this hadn't been covered during the course, and I only came across it late into the development of the landing page. Utilising this would have made the HTML much cleaner and reader-friendly.
- I started the project by adding all of the HTML content to the initial boilerplate. Prior to this, I hadn't spent any time considering what elements of the page needed to be grouped together. This resulted in a lot of backtracking and changes during the development process which could have been avoided had I planned ahead. This likely would have yielded cleaner HTML too.
- When adding CSS to the landing page, I approached it section by section. Focusing on getting the styling right on part of the page before moving on to another. In so doing, the CSS is very disorganised and cluttered. By taking a more hollistic approach, combined with implementing the improvements from the above point, could have yielded cleaner, shorter code.
- Several sections on the landing page don't align perfectly with the desired output. The general padding on the left and right, the quote section, and the hero section (beneath the header) to name but a few. They are relatively close to the desired outcome, but not perfect. Things could likely be improved by improving my familiarity with flexbox in CSS.
- Despite these minor issues, I'm pleased overall with the outcome and the progress I've made via The Odin Project thus far. Onwards and upwards!
- The 'Roboto' font used throughout the landing page is provided by Google Fonts: https://fonts.google.com/specimen/Roboto/tester