Project: Landing page

Overview of the 5-lesson project: a product landing page.

Project: Landing page

In this 5-lesson project you'll style a landing page for TaskFlow, a task management app. Each lesson adds one piece to the stylesheet, and by the final lesson you'll have a complete landing page.

You'll use:

Flexbox for hero, feature, and pricing sections
justify-content and align-items for alignment
flex-wrap and gap for a responsive card layout
box-shadow and border-radius for card styling
Comments to separate sections

Ready? Let's start.

Project roadmap

Each lesson adds a new section to the stylesheet. The code you write in one lesson becomes the starting code for the next, so the file grows step by step.

The roadmap:

Hero section: flex container and background color
Feature list: cards wrapping to new lines and spacing
Pricing cards: vertical layout and shadow
Project final: section comments and footer

The target landing page

The TaskFlow landing page has four sections: a hero at the top (large heading and call to action), features below (a list of cards), then pricing (plan cards), and a footer at the bottom. We'll style each with its own selector.

Selectors: .hero, .features, .feature-card, .pricing, .price-card, and .footer. We'll start by adding a header comment to the file.

Exercise Add a header comment to the stylesheet

To start the project, add a comment at the top of the stylesheet. The comment should include the word TaskFlow. CSS comments use the /* ... */ syntax and are not shown by the browser; they're only visible to anyone reading the source. We'll fill this file in the next lessons.

Test yourself

How does starting code work in a project group?
- Each lesson starts with an empty file
- Each lesson's starting code contains the previous lesson's solution
- Starting code only appears in the first lesson
- Starting code changes each lesson and the previous one is deleted
Show answer

Each lesson's starting code contains the previous lesson's solution — Correct. In a project, starting code accumulates; you only add the new piece.
Match each lesson to the piece it adds

Hero section

display: flex, background-color
Feature list

flex-wrap, gap, border-radius
Pricing cards

flex-direction, box-shadow
Project final

comments, footer section

Next lesson: Hero section

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies