This project is part of The Odin Project's Foundations Course, where the goal is to create an entire web page from scratch based on provided design mockups. This assignment tests the ability to translate visual designs into functional HTML and CSS code - no tutorials, no step-by-step guides - just figure it out.
For more information head over to The Odin Project.
You can view the latest deployment on GitHub Pages here.
- Layout Strategy: CSS Flexbox for all major positioning
- Section-by-Section: Built incrementally (header → hero → info → quotes → CTA → footer)
- HTML-First: Structure content before styling
- Debugging: Used CSS outlines to visualize layout boundaries
Important
Technical Highlights:
- Paul Irish Box Sizing Method (Inheritance-based Box Sizing Reset)
- Clean, readable, structured, maintainable HTML and CSS
- Vanilla HTML/CSS - no frameworks
- Reusable card components
- Semantic HTML5 structure for accessibility and SEO
Note
If you're following The Odin Project, feel free to review and tweak this implementation for your own learning.
Need more information? Ask me on GitHub Discussions.