Projects›Extra· 150 min read

Project: Responsive Landing Page

Style your business landing page into a modern, fully responsive site using Flexbox, Grid and media queries.

What you will learn

Build a complete, responsive layout
Combine every CSS skill you have learned
Produce a client-quality page

The brief

Take the landing page you built in HTML and turn it into a polished, responsive website with CSS.

Requirements

A styled, responsive navigation bar (Flexbox).
A hero section with a background (colour, image or gradient) and centred content.
A features/services section as a responsive Grid of cards with shadows.
A styled table or pricing section.
A fully styled contact form with focus states and a button.
A styled footer.
Media queries so it looks great on mobile, tablet and desktop.
Consistent colours via CSS variables, and tasteful transitions.

Tip: Work top to bottom, section by section. Get each section looking good and responsive before moving on. Test at mobile width often — do not leave responsiveness to the end.

Note: This is the project that proves you can build real websites. Make it portfolio-ready — you will show it to employers.

✍️ Practice

Build the full responsive landing page meeting all eight requirements.
Test it at three widths (mobile, tablet, desktop) and fix any issues.

🏠 Homework

Write a short note on which CSS features you used in each section.