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-contentandalign-itemsfor alignmentflex-wrapandgapfor a responsive card layoutbox-shadowandborder-radiusfor 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