A landing page for a local restaurant with menu, hours and location sections.
Difficulty: Beginner · Technology: HTML, CSS, Flexbox
Features to build
- Menu grid
- Opening hours
- Embedded map link
- Mobile-first design
Step-by-step build plan
- Collect a real menu and photos with permission
- Build the header, hero and menu grid
- Add opening hours and location
- Optimise images for size
- Add a clear call-to-action such as phone or directions
The part most people find hard
Keeping the menu readable on small screens.
How to test it
Check that phone numbers and map links work on mobile.
Suggested extensions
Add user accounts, better error handling, automated tests and a README with screenshots. Each extension is a new talking point in interviews.
How to describe it on your resume
Built a mobile-first restaurant landing page using Flexbox and CSS Grid.
Portfolio tip
Deploy it, link both the live version and the code, and write two paragraphs about what you learned and what you would improve.