Exercise 04 - Responsive Design

Build a responsive landing page using mobile-first approach.

Steps

1. Create a new folder and open it in VSCode
2. Copy index.html and style.css from this repository
3. Work through Tasks 1-9 in the files
4. Test by resizing your browser window
5. Use DevTools device mode (Ctrl/Cmd + Shift + I) to test specific sizes

Testing Tips

• Start narrow (mobile), then drag wider to see breakpoints kick in
• Check at 320px, 768px, and 1024px specifically
• Test both portrait and landscape on tablet sizes
• Make sure nothing overflows or breaks at any width

Breakpoints Used

Breakpoint	Target
Base (no query)	Mobile phones
768px	Tablets and up
1024px	Desktops and up

If You Get Stuck

Check the solution folder for one approach.