web
Omnifood
Responsive Landing Page
1 / 4
Key Features
Overview
Built a responsive landing page for a fictional AI-powered food subscription service while completing Jonas Schmedtmann's HTML & CSS course. The project focused on mastering semantic HTML, modern CSS, responsive layouts, reusable UI sections, and frontend best practices, laying the foundation for my journey into web development.
Highlights
- Built a fully responsive landing page using semantic HTML, CSS Grid, and Flexbox.
- Implemented smooth scrolling, sticky navigation, and interactive UI components with vanilla JavaScript.
- Applied accessibility and responsive design principles across desktop, tablet, and mobile layouts.
- Completed as part of Jonas Schmedtmann's HTML & CSS course.
Engineering Decisions
- Structured the page into reusable sections to improve maintainability.
- Combined CSS Grid and Flexbox based on the strengths of each layout system.
- Adopted a mobile-first responsive approach throughout the project.
Challenges
- Understanding when to use CSS Grid versus Flexbox for different layouts.
- Building responsive interfaces that adapt consistently across screen sizes.
- Learning modern HTML and CSS practices through a production-style project.
Outcomes
- Established a strong foundation in semantic HTML, CSS, and responsive web development.
- Developed confidence building production-style frontend interfaces from scratch.