Project: Product landing page
Overview of the 5-lesson project: a product landing page.
Project: TaskFlow landing page
In this 5-lesson project you'll build a landing page for TaskFlow, a task management tool. Each lesson adds one section, and by the final lesson you'll hold the full page.
You'll build these sections:
- Hero: tagline and call-to-action button
- Features: product capabilities
- Pricing: a plan table
- Header and footer: menu and copyright
You'll use the HTML skeleton, headings, links, lists, tables and semantic tags.
Landing page structure
A good landing page focuses on one goal: guiding the visitor to sign up or buy. You split the page into sections for this.
- Hero: big heading, short pitch and action button
- Features: the value the product offers
- Pricing: a table comparing plans
- Header: logo and menu links
- Footer: copyright and helper links
Each section is wrapped in semantic tags.
Exercise Write the empty HTML document skeleton
Start the project by writing an empty HTML document skeleton. It should contain <!DOCTYPE html>, <html>, <head> and an empty <body>. You'll add lang, meta and titles in later lessons.
Show example solution
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Test yourself
-
What is the main purpose of a landing page?
- Show a sitemap
- Guide the visitor to one action
- List all products
- Provide an admin panel
Show answer
Guide the visitor to one action — Correct. A landing page focuses the visitor on a single action like signing up or buying.
-
Write the first line of an HTML document
____ <html> <head></head> <body></body> </html>Show answer
<!DOCTYPE html> <html> <head></head> <body></body> </html> -
Match each landing page section to its role
- Hero
- Tagline and action
- Features
- Product capabilities
- Pricing
- Plan table
- Footer
- Copyright and links