Chai Ki Dukaan Landing Page
Build a complete landing page for your own chai ki dukaan — from hero section to Google Maps embed
Imagine you open a chai stall near Charminar. You put up a big board: "Irani Chai — ₹20, Osmania Biscuit — ₹15." That board is your landing page. It's the first thing people see, and its only job is to make them stop, read, and take action — walk in and order chai.
A landing page is NOT a full website. It's a single focused page with one clear goal — get the visitor to do ONE thing. For a chai shop: "Visit us" or "Call for order." For a software product: "Sign up free." For a portfolio: "Hire me." One page, one goal, no distractions.
Essential sections for a landing page:
- Hero Section — Big headline, subheadline, CTA button ("Order Now"), background gradient or image. Above the fold — visible without scrolling.
- About / Trust Section — Who you are, trust signals ("500+ Google Reviews, 4.8★"), real photos. Build credibility.
- What We Offer — 3-4 menu highlights (NOT full menu), each with name, description, price. Grid layout.
- Testimonials — 3-4 customer reviews with name, photo, star ratings. Real reviews from Google, carousel on mobile.
- Contact & Location — Google Maps embed, full address, clickable phone link, opening hours.
- Footer — Quick links, social media icons, copyright, second CTA ("Call Now").
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chai Ki Dukaan | Best Irani Chai near Charminar</title>
</head>
<body>
<header>
<nav>
<a href="#hero">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="hero">
<h1>Hyderabad's Best Irani Chai</h1>
<p>Serving near Charminar since 1955</p>
<a href="tel:+919876543210">Order Now</a>
</section>
<section id="about">...</section>
<section id="menu">...</section>
<section id="testimonials">...</section>
<section id="contact">...</section>
<footer>...</footer>
</body>
</html><section id="hero">Hero section — big headline, CTA<a href="tel:...">Clickable phone — opens dialer on mobile<address>Semantic address tag<iframe src="maps embed">Google Maps embed<link rel="canonical">Canonical URL for SEODifferent types of landing pages for different goals:
Landing page should be ONE scroll. If it's longer than 3-4 screen heights, you're doing too much. Cut sections, shorten text, stay focused.
Build a complete landing page for a fictional Hyderabad chai shop. This is your first full project — make it look real, not like a tutorial output.
Open VS Code. Create chai-landing.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chai Ki Dukaan | Best Irani Chai near Charminar</title>
</head>
<body>
<!-- TODO: Header with nav -->
<!-- TODO: Hero Section -->
<!-- TODO: About Section -->
<!-- TODO: Menu Highlights -->
<!-- TODO: Testimonials -->
<!-- TODO: Contact & Google Maps -->
<!-- TODO: Footer -->
</body>
</html>Complete all sections:
Done — Key Points:
- ✅ Landing page = ONE page, ONE goal, ONE CTA — no confusion
- ✅ Hero section = 80% of success — most time on headline + CTA
- ✅ Above the fold = visible WITHOUT scrolling — main message there
- ✅ CTA color should contrast with background
- ✅ Phone number MUST be a tel: link — mobile users expect tap-to-call
- ✅ Google Maps embed = free, easy, builds trust
- ✅ Open Graph meta tags control share preview
- ✅ Test on mobile FIRST — 70% of traffic from phones
Want to track your progress?
Log in to save your place and pick up where you left off.
Progress track karna chahte ho?
Login karo apni progress save karne ke liye aur jahan chhoda tha wahan se shuru karo.
Login