Free tutorials & notes in Hindi & English · Clean code examples 🧰 Free PDF & Image Tools →
🚀 Days 11–15 – Pro Skills & Projects  ·  Day 15

Day 15: Major Project: Multi-page Business Website

⏱ 4–6 hours📶 Major project🎯 100% self-study
Day 15 / 15

✅ Today you will learn

  • Plan a real client website: pages, content, folders
  • Build 6 pages that share one header and footer
  • Use everything: SEO head, schema, picture, tables, forms, video, map, details
  • Test like a professional: validator, keyboard, Lighthouse, phone
  • Publish it and hand it over to the client

🏢 In the real world

Mr. Vikas Sharma, owner of Sharma Sweets, calls you: “Diwali is in 3 weeks. I want a website where people can see our menu and prices, know our story, find the shop and place bulk orders. Budget ₹8,000.” This is exactly the kind of project freelancers in India get every week. Let’s deliver it.

The finished website

▶  Home page – index.html (scroll inside)
🏠
index.htmlHero, best sellers, why us, review, FAQ
📋
menu.htmlPrice tables and gift boxes
📖
about.htmlStory, video, timeline, promise
🛒
contact.htmlValidated order form + Google Map
🙏
thank-you.htmlShown after the form (noindex)
🍬
404.htmlFriendly “not found” page
6 pages, 1 stylesheet, 1 images folder

Phase 1: requirements and planning

Client needOur HTML solutionDay learnt
Show menu and pricesmenu.html with captioned tables5
Look trustworthy on GoogleTitles, descriptions, canonical, LocalBusiness schema9
Nice WhatsApp previewsOpen Graph tags9
Bulk orderscontact.html form with validation6–7
Customers find the shopEmbedded Google Map, address, tel: link3, 12
Tell the family storyabout.html with video, ol timeline, dl promise2, 4, 5
Works for everyoneSkip link, labels, alt, focus, lang10
Fast on 4GWebP, srcset, lazy loading, width/height4, 13
Folder structure – sharma-sweets/
sharma-sweets/
├── index.html        ← home
├── menu.html
├── about.html
├── contact.html      ← order form
├── thank-you.html    ← form result (noindex)
├── 404.html
├── robots.txt
├── sitemap.xml
├── css/
│   └── style.css     ← ready-made (you will write CSS in the next course)
└── images/
    ├── logo.png
    ├── kaju-katli.webp  kaju-katli-400.webp
    ├── ghewar.webp      ghewar-400.webp
    ├── rasmalai.webp    rasmalai-400.webp
    ├── ladoo.webp       ladoo-400.webp
    ├── shop.mp4
    └── shop-poster.jpg
💡 The professional workflow

Write the shared parts (head, header, footer) once on index.html, test them, then copy the file to create the other pages and change only the title, description, canonical, aria-current and main content. That keeps every page consistent.

HTML – index.html <head>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sharma Sweets Jaipur – Fresh Mithai &amp; Gift Boxes Since 1985</title>
  <meta name="description" content="Fresh kaju katli, ghewar, rasmalai and ladoo made daily in pure ghee at Johari Bazaar, Jaipur. Diwali gift boxes, wedding orders and home delivery.">
  <link rel="canonical" href="https://sharmasweets.in/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Sharma Sweets Jaipur – Fresh Mithai Since 1985">
  <meta property="og:description" content="Diwali gift boxes, wedding orders and home delivery in Jaipur.">
  <meta property="og:image" content="https://sharmasweets.in/images/kaju-katli.webp">
  <meta property="og:url" content="https://sharmasweets.in/">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="icon" href="images/logo.png" type="image/png">
  <meta name="theme-color" content="#e34f26">
  <link rel="stylesheet" href="css/style.css">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Bakery",
    "name": "Sharma Sweets",
    "image": "https://sharmasweets.in/images/shop-poster.jpg",
    "telephone": "+91-98290-12345",
    "priceRange": "₹₹",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Shop 14, Johari Bazaar",
      "addressLocality": "Jaipur",
      "postalCode": "302003",
      "addressCountry": "IN"
    },
    "openingHours": "Mo-Su 08:00-22:00",
    "url": "https://sharmasweets.in/"
  }
  </script>
</head>
LineWhy it is there
title (58 chars)Brand + main keywords + promise; unique on every page
meta description (≈150 chars)What you sell, proof (pure ghee, since 1985), action
canonicalOne official URL even if someone links ?utm=…
og:* + twitter:cardBig image preview when the link is shared on WhatsApp
icon + theme-colorLogo on browser tabs; orange mobile address bar
application/ld+jsonBakery schema: Google learns address, phone, hours
HTML – skip link + header
<a class="skip" href="#main">Skip to main content</a>

  <!-- ===== HEADER ===== -->
  <header class="site">
    <div class="bar">
      <a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html" aria-current="page">Home</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Order</a></li>
        </ul>
      </nav>
    </div>
  </header>
  • The skip link is the first focusable item – keyboard users jump straight to <main id="main">.
  • The logo image has alt="" because the text “Sharma Sweets” right next to it already names the link.
  • aria-label="Main" names the navigation landmark; aria-current="page" marks where you are (and the CSS highlights it). On menu.html, aria-current moves to the Menu link.
HTML – footer
<footer class="site">
    <div class="bar">
      <address>
        <strong>Sharma Sweets</strong><br>
        Shop 14, Johari Bazaar, Jaipur 302003<br>
        <a href="tel:+919829012345">+91 98290 12345</a> ·
        <a href="mailto:order@sharmasweets.in">order@sharmasweets.in</a>
      </address>
      <p>Open daily 8 am – 10 pm<br><small>&copy; 2026 Sharma Sweets. All rights reserved.</small></p>
    </div>
  </footer>
🧠 Click-to-call

tel:+919829012345 opens the phone dialer on mobiles – for a sweet shop, this one link brings more orders than any other feature. Always use the full international format.

Phase 4: home page content

HTML – hero section
<section class="hero" aria-labelledby="hero-title">
      <div>
        <h1 id="hero-title">Fresh mithai from Johari Bazaar, every morning since 1985</h1>
        <p>Made in small batches with pure desi ghee and no preservatives. Pick up from our shop or get it delivered anywhere in Jaipur within 2 hours.</p>
        <p><a class="btn" href="contact.html">Order now</a> <a class="btn alt" href="menu.html">See the menu</a></p>
      </div>
      <picture>
        <source srcset="images/kaju-katli.webp 800w, images/kaju-katli-400.webp 400w" sizes="(max-width: 600px) 100vw, 480px" type="image/webp">
        <img src="images/kaju-katli-400.webp" alt="Silver-topped kaju katli on a brass plate" width="800" height="600">
      </picture>
    </section>
  • Exactly one <h1> per page, describing the page.
  • <picture> + srcset: phones download the 400 px image, big screens the 800 px one.
  • The hero image has no loading="lazy" because it is visible immediately (it is the LCP image).
  • Two clear calls to action: “Order now” (primary) and “See the menu”.
HTML – best-seller cards
<section aria-labelledby="best">
      <h2 id="best">Our best sellers</h2>
      <div class="grid">
        <article class="card">
          <img src="images/kaju-katli-400.webp" alt="Kaju katli" width="400" height="300" loading="lazy">
          <div><h3>Kaju Katli</h3><p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p></div>
        </article>
        <article class="card">
          <img src="images/ghewar-400.webp" alt="Round malai ghewar topped with nuts" width="400" height="300" loading="lazy">
          <div><h3>Malai Ghewar</h3><p>Jaipur’s Teej special. <span class="price">₹650/kg</span></p></div>
        </article>
        <article class="card">
          <img src="images/rasmalai-400.webp" alt="Rasmalai in saffron milk" width="400" height="300" loading="lazy">
          <div><h3>Rasmalai</h3><p>Soft paneer discs in kesar milk. <span class="price">₹700/kg</span></p></div>
        </article>
        <article class="card">
          <img src="images/ladoo-400.webp" alt="Besan ladoo" width="400" height="300" loading="lazy">
          <div><h3>Besan Ladoo</h3><p>Roasted gram flour and ghee. <span class="price">₹500/kg</span></p></div>
        </article>
      </div>
    </section>

Each product is an <article> because it makes sense on its own; images below the hero use loading="lazy". The “why us” list, the review (<figure> + <blockquote> + <figcaption>) and the FAQ (<details name="faq">) reuse Days 2, 8 and 11.

▶  menu.html
HTML – one menu table
<section id="milk" aria-labelledby="h-milk">
      <h2 id="h-milk">Milk sweets <small>(eat within 2 days)</small></h2>
      <table>
        <caption>Milk sweets – price per kg</caption>
        <thead>
          <tr><th scope="col">Sweet</th><th scope="col">Description</th><th scope="col">Price</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">Rasmalai</th><td>Paneer discs in saffron milk</td><td>₹700</td></tr>
          <tr><th scope="row">Malai Ghewar</th><td>Honeycomb disc with rabri</td><td>₹650</td></tr>
          <tr><th scope="row">Kalakand</th><td>Grainy milk cake</td><td>₹600</td></tr>
          <tr><th scope="row">Rasgulla</th><td>Spongy, in light syrup</td><td>₹400</td></tr>
        </tbody>
      </table>
    </section>
  • <caption> names the table for screen readers and Google.
  • Column headers use scope="col", each sweet name is a row header with scope="row".
  • An in-page “Jump to” nav uses #ids – great on long pages and for Google sitelinks.

Phase 6: about page – story, video, timeline

▶  about.html
HTML – video and promise
<figure>
        <video controls preload="none" poster="images/shop-poster.jpg" width="640" height="360">
          <source src="images/shop.mp4" type="video/mp4">
          Your browser does not play video. <a href="images/shop.mp4">Download the shop video</a>.
        </video>
        <figcaption>A morning in our kitchen – ghewar being made by hand.</figcaption>
      </figure>

<dl>
        <dt>Pure ghee</dt><dd>Only desi cow ghee – no vanaspati.</dd>
        <dt>No preservatives</dt><dd>Milk sweets are made fresh every morning.</dd>
        <dt>Honest weight</dt><dd>Box weight is never counted in your sweets.</dd>
      </dl>
  • preload="none" + poster: the 1 MB video downloads only when someone presses play.
  • Fallback text with a download link inside <video>.
  • <time datetime> makes years machine-readable; <dfn> and <abbr> explain terms.
  • <dl> is perfect for “term → explanation” lists like the promise.

Phase 7: the order form

▶  contact.html – try submitting empty, then with a wrong mobile number
HTML – order form
<form action="thank-you.html" method="get">
      <div>
        <label for="name">Full name</label>
        <input id="name" name="name" autocomplete="name" required minlength="2">
      </div>
      <div>
        <label for="phone">Mobile number</label>
        <input id="phone" name="phone" type="tel" autocomplete="tel" required
               pattern="[6-9][0-9]{9}" inputmode="numeric" aria-describedby="phone-help">
        <small id="phone-help">10 digits, starting with 6–9.</small>
      </div>
      <div>
        <label for="sweet">Sweet</label>
        <select id="sweet" name="sweet" required>
          <option value="">– Choose –</option>
          <optgroup label="Milk sweets">
            <option>Rasmalai</option>
            <option>Malai Ghewar</option>
          </optgroup>
          <optgroup label="Dry sweets">
            <option>Kaju Katli</option>
            <option>Besan Ladoo</option>
          </optgroup>
        </select>
      </div>
      <div>
        <label for="kg">Quantity (kg)</label>
        <input id="kg" name="kg" type="number" min="0.25" max="200" step="0.25" value="1" required>
      </div>
      <fieldset>
        <legend>Delivery or pick-up?</legend>
        <input type="radio" id="del" name="mode" value="delivery" checked> <label for="del">Home delivery</label>
        <input type="radio" id="pick" name="mode" value="pickup"> <label for="pick">Pick up from shop</label>
      </fieldset>
      <div>
        <label for="date">Date needed</label>
        <input id="date" name="date" type="date" required>
      </div>
      <div>
        <label for="note">Message (optional)</label>
        <textarea id="note" name="note" rows="3" maxlength="300" placeholder="e.g. 20 boxes of 500 g for a wedding"></textarea>
      </div>
      <div>
        <input type="checkbox" id="ok" name="ok" required style="width:auto">
        <label for="ok" style="display:inline;font-weight:400">I agree to be contacted on this number about my order.</label>
      </div>
      <button class="btn" type="submit">Send order</button>
    </form>
FieldValidation usedWhy
namerequired, minlength="2", autocomplete="name"Phone autofills it
phonetype="tel", pattern="[6-9][0-9]{9}", inputmode="numeric"Indian mobile format; numeric keypad
sweetselect required with an empty first optionForces a real choice
kgtype="number" min 0.25 max 200 step 0.25Only sensible quantities
moderadio group in fieldset + legendOne choice, accessible group name
datetype="date" requiredCalendar picker
okcheckbox requiredConsent before calling
⚠️ Where do the orders go?

HTML alone cannot store or e-mail data. In this project the form goes to thank-you.html so the flow is complete. For the real shop: on Netlify add data-netlify="true", on GitHub Pages use a Formspree action URL, or on Hostinger point action to a PHP script. Always validate again on the server.

HTML – map embed
<iframe title="Map: Sharma Sweets, Johari Bazaar, Jaipur"
      src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&amp;output=embed"
      width="600" height="320" style="border:0;max-width:100%" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>

Phase 8: thank-you, 404, robots and sitemap

HTML – thank-you.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thank You for Your Order | Sharma Sweets</title>
  <meta name="robots" content="noindex">
  <link rel="icon" href="images/logo.png" type="image/png">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main id="main">
    <h1>Thank you! 🙏</h1>
    <p>We have received your order. Our team will call you within <strong>30 minutes</strong> to confirm the details.</p>
    <p>In a hurry? Call <a href="tel:+919829012345">+91 98290 12345</a>.</p>
    <p><a class="btn" href="index.html">Back to home</a></p>
  </main>
</body>
</html>
  • thank-you.html and 404.html carry <meta name="robots" content="noindex"> – they must not appear in Google.
  • 404.html uses root-relative paths (/css/style.css) because it can be shown for any broken URL at any depth.
  • robots.txt points to the sitemap; sitemap.xml lists the 4 public pages for Search Console.
robots.txt + sitemap.xml
User-agent: *
Disallow: /thank-you.html
Sitemap: https://sharmasweets.in/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://sharmasweets.in/</loc></url>
  <url><loc>https://sharmasweets.in/menu.html</loc></url>
  <url><loc>https://sharmasweets.in/about.html</loc></url>
  <url><loc>https://sharmasweets.in/contact.html</loc></url>
</urlset>

Phase 9: test like a professional

CheckToolPass when
HTML errorsvalidator.w3.org/nu0 errors on all 6 pages
KeyboardTab / Shift+Tab / EnterSkip link first; focus always visible; form usable
MobileDevTools Ctrl+Shift+M + a real phoneNo sideways scroll; tap targets easy
Speed & SEOLighthouse (mobile)90+ in all four categories
LinksClick every linkNo 404s; tel: opens the dialer
SchemaRich Results TestBakery detected, no errors
SharingPaste the link in WhatsAppImage, title and description appear
✅ Our result

We ran the W3C Nu validator on all six pages of this project: 0 HTML errors (only “test in all browsers” info notes for type="date" and inputmode).

Phase 10: go live and hand over

  1. 1Buy the domain sharmasweets.in (≈ ₹600/year) or start free on Netlify
  2. 2Upload the whole folder (Netlify: drag-and-drop; Hostinger: File Manager → public_html)
  3. 3Turn on HTTPS (free SSL)
  4. 4Set up the real form endpoint and send a test order
  5. 5Google Search Console: verify the site, submit sitemap.xml
  6. 6Create/claim the Google Business Profile with the same name, address, phone
  7. 7Hand over: login details, a 1-page “how to change prices” note, and the invoice
From folder to live business website
🧠 How to change a price later

Open menu.html, press Ctrl+F, search the sweet’s name, change the number in its <td>, save, upload that one file. Teaching the client this builds trust – and repeat business.

Extend it (your homework challenges)

  1. Add a Hindi version in /hi/ with lang="hi" and hreflang links both ways.
  2. Add a “Wedding orders” page with a price-slab table using rowspan/colspan.
  3. Add FAQPage schema for the home-page FAQ.
  4. Add a gallery page with 8 lazy-loaded images inside figure/figcaption.
  5. After the CSS course: redesign it; after the JS course: add a live cart.

Complete source code

All files are below and in the free HTML course kit download (with images, video and a README).

HTML – index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sharma Sweets Jaipur – Fresh Mithai &amp; Gift Boxes Since 1985</title>
  <meta name="description" content="Fresh kaju katli, ghewar, rasmalai and ladoo made daily in pure ghee at Johari Bazaar, Jaipur. Diwali gift boxes, wedding orders and home delivery.">
  <link rel="canonical" href="https://sharmasweets.in/">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Sharma Sweets Jaipur – Fresh Mithai Since 1985">
  <meta property="og:description" content="Diwali gift boxes, wedding orders and home delivery in Jaipur.">
  <meta property="og:image" content="https://sharmasweets.in/images/kaju-katli.webp">
  <meta property="og:url" content="https://sharmasweets.in/">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="icon" href="images/logo.png" type="image/png">
  <meta name="theme-color" content="#e34f26">
  <link rel="stylesheet" href="css/style.css">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Bakery",
    "name": "Sharma Sweets",
    "image": "https://sharmasweets.in/images/shop-poster.jpg",
    "telephone": "+91-98290-12345",
    "priceRange": "₹₹",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Shop 14, Johari Bazaar",
      "addressLocality": "Jaipur",
      "postalCode": "302003",
      "addressCountry": "IN"
    },
    "openingHours": "Mo-Su 08:00-22:00",
    "url": "https://sharmasweets.in/"
  }
  </script>
</head>
<body>
  <a class="skip" href="#main">Skip to main content</a>

  <!-- ===== HEADER ===== -->
  <header class="site">
    <div class="bar">
      <a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html" aria-current="page">Home</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Order</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- ===== MAIN ===== -->
  <main id="main">
    <section class="hero" aria-labelledby="hero-title">
      <div>
        <h1 id="hero-title">Fresh mithai from Johari Bazaar, every morning since 1985</h1>
        <p>Made in small batches with pure desi ghee and no preservatives. Pick up from our shop or get it delivered anywhere in Jaipur within 2 hours.</p>
        <p><a class="btn" href="contact.html">Order now</a> <a class="btn alt" href="menu.html">See the menu</a></p>
      </div>
      <picture>
        <source srcset="images/kaju-katli.webp 800w, images/kaju-katli-400.webp 400w" sizes="(max-width: 600px) 100vw, 480px" type="image/webp">
        <img src="images/kaju-katli-400.webp" alt="Silver-topped kaju katli on a brass plate" width="800" height="600">
      </picture>
    </section>

    <section aria-labelledby="best">
      <h2 id="best">Our best sellers</h2>
      <div class="grid">
        <article class="card">
          <img src="images/kaju-katli-400.webp" alt="Kaju katli" width="400" height="300" loading="lazy">
          <div><h3>Kaju Katli</h3><p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p></div>
        </article>
        <article class="card">
          <img src="images/ghewar-400.webp" alt="Round malai ghewar topped with nuts" width="400" height="300" loading="lazy">
          <div><h3>Malai Ghewar</h3><p>Jaipur’s Teej special. <span class="price">₹650/kg</span></p></div>
        </article>
        <article class="card">
          <img src="images/rasmalai-400.webp" alt="Rasmalai in saffron milk" width="400" height="300" loading="lazy">
          <div><h3>Rasmalai</h3><p>Soft paneer discs in kesar milk. <span class="price">₹700/kg</span></p></div>
        </article>
        <article class="card">
          <img src="images/ladoo-400.webp" alt="Besan ladoo" width="400" height="300" loading="lazy">
          <div><h3>Besan Ladoo</h3><p>Roasted gram flour and ghee. <span class="price">₹500/kg</span></p></div>
        </article>
      </div>
    </section>

    <section aria-labelledby="why">
      <h2 id="why">Why Jaipur trusts us</h2>
      <ul>
        <li><strong>38+ years</strong> – three generations of halwais.</li>
        <li><strong>Pure desi ghee</strong> – no vanaspati, no preservatives.</li>
        <li><strong>Made today</strong> – milk sweets are never sold the next day.</li>
        <li><strong>4.6 ★</strong> on Google from 2,300+ reviews.</li>
      </ul>
    </section>

    <section aria-labelledby="say">
      <h2 id="say">What customers say</h2>
      <figure>
        <blockquote><p>“We ordered 40 kg for my sister’s wedding – every box arrived on time and fresh.”</p></blockquote>
        <figcaption>— A customer from Malviya Nagar, Jaipur</figcaption>
      </figure>
    </section>

    <section aria-labelledby="faq">
      <h2 id="faq">Quick questions</h2>
      <details name="faq">
        <summary>Are your sweets eggless?</summary>
        <p>Yes, everything we make is 100% vegetarian and eggless.</p>
      </details>
      <details name="faq">
        <summary>Do you ship outside Jaipur?</summary>
        <p>We courier dry sweets such as kaju katli across India in 3–5 days.</p>
      </details>
      <details name="faq">
        <summary>Can I order for a wedding?</summary>
        <p>Yes – <a href="contact.html">send us your requirement</a> at least 3 days ahead for bulk orders.</p>
      </details>
    </section>
  </main>

  <!-- ===== FOOTER ===== -->
  <footer class="site">
    <div class="bar">
      <address>
        <strong>Sharma Sweets</strong><br>
        Shop 14, Johari Bazaar, Jaipur 302003<br>
        <a href="tel:+919829012345">+91 98290 12345</a> ·
        <a href="mailto:order@sharmasweets.in">order@sharmasweets.in</a>
      </address>
      <p>Open daily 8 am – 10 pm<br><small>&copy; 2026 Sharma Sweets. All rights reserved.</small></p>
    </div>
  </footer>
</body>
</html>
HTML – menu.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sweets Menu &amp; Prices – Kaju Katli, Ghewar | Sharma Sweets</title>
  <meta name="description" content="Today’s prices at Sharma Sweets Jaipur: kaju katli ₹900/kg, rasmalai ₹700/kg, ghewar ₹650/kg, ladoo ₹500/kg. Gift boxes and bulk rates for weddings.">
  <link rel="canonical" href="https://sharmasweets.in/menu.html">
  <link rel="icon" href="images/logo.png" type="image/png">
  <meta name="theme-color" content="#e34f26">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <a class="skip" href="#main">Skip to main content</a>
  <header class="site">
    <div class="bar">
      <a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="menu.html" aria-current="page">Menu</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Order</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main">
    <h1>Our menu</h1>
    <p>Prices are per kilogram and include GST. Minimum order 250 g.</p>

    <nav aria-label="Menu sections">
      <p>Jump to: <a href="#milk">Milk sweets</a> · <a href="#dry">Dry sweets</a> · <a href="#boxes">Gift boxes</a></p>
    </nav>

    <section id="milk" aria-labelledby="h-milk">
      <h2 id="h-milk">Milk sweets <small>(eat within 2 days)</small></h2>
      <table>
        <caption>Milk sweets – price per kg</caption>
        <thead>
          <tr><th scope="col">Sweet</th><th scope="col">Description</th><th scope="col">Price</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">Rasmalai</th><td>Paneer discs in saffron milk</td><td>₹700</td></tr>
          <tr><th scope="row">Malai Ghewar</th><td>Honeycomb disc with rabri</td><td>₹650</td></tr>
          <tr><th scope="row">Kalakand</th><td>Grainy milk cake</td><td>₹600</td></tr>
          <tr><th scope="row">Rasgulla</th><td>Spongy, in light syrup</td><td>₹400</td></tr>
        </tbody>
      </table>
    </section>

    <section id="dry" aria-labelledby="h-dry">
      <h2 id="h-dry">Dry sweets <small>(stay fresh up to 15 days)</small></h2>
      <table>
        <caption>Dry sweets – price per kg</caption>
        <thead>
          <tr><th scope="col">Sweet</th><th scope="col">Description</th><th scope="col">Price</th></tr>
        </thead>
        <tbody>
          <tr><th scope="row">Kaju Katli</th><td>Cashew fudge with silver vark</td><td>₹900</td></tr>
          <tr><th scope="row">Besan Ladoo</th><td>Roasted gram flour and ghee</td><td>₹500</td></tr>
          <tr><th scope="row">Soan Papdi</th><td>Flaky, melt-in-mouth</td><td>₹380</td></tr>
        </tbody>
      </table>
    </section>

    <section id="boxes" aria-labelledby="h-box">
      <h2 id="h-box">Festival gift boxes</h2>
      <div class="grid">
        <article class="card">
          <img src="images/kaju-katli-400.webp" alt="Gift box of kaju katli" width="400" height="300" loading="lazy">
          <div><h3>Classic Box</h3><p>500 g kaju katli in a printed box. <span class="price">₹480</span></p></div>
        </article>
        <article class="card">
          <img src="images/ladoo-400.webp" alt="Assorted ladoo gift box" width="400" height="300" loading="lazy">
          <div><h3>Assorted Box</h3><p>1 kg of four dry sweets. <span class="price">₹720</span></p></div>
        </article>
      </div>
      <p><a class="btn" href="contact.html">Order a gift box</a></p>
    </section>

    <p><a href="#main">Back to top ↑</a></p>
  </main>

  <footer class="site">
    <div class="bar">
      <address>
        <strong>Sharma Sweets</strong><br>
        Shop 14, Johari Bazaar, Jaipur 302003<br>
        <a href="tel:+919829012345">+91 98290 12345</a>
      </address>
      <p><small>&copy; 2026 Sharma Sweets</small></p>
    </div>
  </footer>
</body>
</html>
HTML – about.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Sharma Sweets – Three Generations of Halwais, Jaipur</title>
  <meta name="description" content="The story of Sharma Sweets, Johari Bazaar: started in 1985 with one kadhai, now run by the third generation. See how we make ghewar and why we use only pure ghee.">
  <link rel="canonical" href="https://sharmasweets.in/about.html">
  <link rel="icon" href="images/logo.png" type="image/png">
  <meta name="theme-color" content="#e34f26">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <a class="skip" href="#main">Skip to main content</a>
  <header class="site">
    <div class="bar">
      <a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="about.html" aria-current="page">About</a></li>
          <li><a href="contact.html">Order</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main">
    <article>
      <h1>Our story</h1>
      <p>In <time datetime="1985">1985</time>, Ramesh Sharma opened a 10-foot shop in Johari Bazaar with one kadhai and a promise: <em>sell only what was made today</em>. Today his grandchildren run the kitchen – and the promise has not changed.</p>

      <figure>
        <video controls preload="none" poster="images/shop-poster.jpg" width="640" height="360">
          <source src="images/shop.mp4" type="video/mp4">
          Your browser does not play video. <a href="images/shop.mp4">Download the shop video</a>.
        </video>
        <figcaption>A morning in our kitchen – ghewar being made by hand.</figcaption>
      </figure>

      <h2>Milestones</h2>
      <ol>
        <li><time datetime="1985">1985</time> – shop opens in Johari Bazaar</li>
        <li><time datetime="1998">1998</time> – famous for malai ghewar during Teej</li>
        <li><time datetime="2012">2012</time> – second kitchen for wedding orders</li>
        <li><time datetime="2020">2020</time> – home delivery across Jaipur</li>
        <li><time datetime="2026">2026</time> – this website 🎉</li>
      </ol>

      <h2>How we make ghewar</h2>
      <p>Batter of maida, ghee and chilled water is poured in a thin stream into hot ghee inside a round mould. It forms a <dfn>honeycomb disc</dfn>, which is soaked in syrup and topped with <abbr title="thickened sweetened milk">rabri</abbr>.</p>

      <h2>Our promise</h2>
      <dl>
        <dt>Pure ghee</dt><dd>Only desi cow ghee – no vanaspati.</dd>
        <dt>No preservatives</dt><dd>Milk sweets are made fresh every morning.</dd>
        <dt>Honest weight</dt><dd>Box weight is never counted in your sweets.</dd>
      </dl>
    </article>
  </main>

  <footer class="site">
    <div class="bar">
      <address>
        <strong>Sharma Sweets</strong><br>
        Shop 14, Johari Bazaar, Jaipur 302003<br>
        <a href="tel:+919829012345">+91 98290 12345</a>
      </address>
      <p><small>&copy; 2026 Sharma Sweets</small></p>
    </div>
  </footer>
</body>
</html>
HTML – contact.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Order Sweets Online – Delivery in Jaipur | Sharma Sweets</title>
  <meta name="description" content="Order fresh mithai, gift boxes or bulk wedding sweets from Sharma Sweets. Home delivery across Jaipur in 2 hours. Call, WhatsApp or fill the order form.">
  <link rel="canonical" href="https://sharmasweets.in/contact.html">
  <link rel="icon" href="images/logo.png" type="image/png">
  <meta name="theme-color" content="#e34f26">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <a class="skip" href="#main">Skip to main content</a>
  <header class="site">
    <div class="bar">
      <a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
      <nav aria-label="Main">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" aria-current="page">Order</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main">
    <h1>Place an order</h1>
    <p>Call <a href="tel:+919829012345">+91 98290 12345</a>,
       <a href="https://wa.me/919829012345?text=Hello%20Sharma%20Sweets">chat on WhatsApp</a>
       or fill this form – we confirm every order by phone within 30 minutes.</p>

    <!-- On GitHub Pages use Formspree/Netlify Forms; on Hostinger use a PHP script. -->
    <form action="thank-you.html" method="get">
      <div>
        <label for="name">Full name</label>
        <input id="name" name="name" autocomplete="name" required minlength="2">
      </div>
      <div>
        <label for="phone">Mobile number</label>
        <input id="phone" name="phone" type="tel" autocomplete="tel" required
               pattern="[6-9][0-9]{9}" inputmode="numeric" aria-describedby="phone-help">
        <small id="phone-help">10 digits, starting with 6–9.</small>
      </div>
      <div>
        <label for="sweet">Sweet</label>
        <select id="sweet" name="sweet" required>
          <option value="">– Choose –</option>
          <optgroup label="Milk sweets">
            <option>Rasmalai</option>
            <option>Malai Ghewar</option>
          </optgroup>
          <optgroup label="Dry sweets">
            <option>Kaju Katli</option>
            <option>Besan Ladoo</option>
          </optgroup>
        </select>
      </div>
      <div>
        <label for="kg">Quantity (kg)</label>
        <input id="kg" name="kg" type="number" min="0.25" max="200" step="0.25" value="1" required>
      </div>
      <fieldset>
        <legend>Delivery or pick-up?</legend>
        <input type="radio" id="del" name="mode" value="delivery" checked> <label for="del">Home delivery</label>
        <input type="radio" id="pick" name="mode" value="pickup"> <label for="pick">Pick up from shop</label>
      </fieldset>
      <div>
        <label for="date">Date needed</label>
        <input id="date" name="date" type="date" required>
      </div>
      <div>
        <label for="note">Message (optional)</label>
        <textarea id="note" name="note" rows="3" maxlength="300" placeholder="e.g. 20 boxes of 500 g for a wedding"></textarea>
      </div>
      <div>
        <input type="checkbox" id="ok" name="ok" required style="width:auto">
        <label for="ok" style="display:inline;font-weight:400">I agree to be contacted on this number about my order.</label>
      </div>
      <button class="btn" type="submit">Send order</button>
    </form>

    <h2>Visit the shop</h2>
    <iframe title="Map: Sharma Sweets, Johari Bazaar, Jaipur"
      src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&amp;output=embed"
      width="600" height="320" style="border:0;max-width:100%" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
  </main>

  <footer class="site">
    <div class="bar">
      <address>
        <strong>Sharma Sweets</strong><br>
        Shop 14, Johari Bazaar, Jaipur 302003<br>
        <a href="tel:+919829012345">+91 98290 12345</a>
      </address>
      <p><small>&copy; 2026 Sharma Sweets</small></p>
    </div>
  </footer>
</body>
</html>
HTML – 404.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Not Found | Sharma Sweets</title>
  <meta name="robots" content="noindex">
  <link rel="icon" href="/images/logo.png" type="image/png">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <main id="main">
    <h1>Oops! This sweet box is empty 🍬</h1>
    <p>The page you wanted has moved or never existed.</p>
    <p><a class="btn" href="/">Back to home</a> <a class="btn alt" href="/menu.html">See today’s menu</a></p>
  </main>
</body>
</html>
CSS – css/style.css (ready-made)
/* Sharma Sweets – starter stylesheet.
   This file is ready-made so the HTML project looks good.
   You will learn to write every line of it in the CSS course. */
:root { --brand: #e34f26; --gold: #f59e0b; --ink: #2b1a12; --cream: #fff8f1; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

header.site { background: #fff; border-bottom: 3px solid var(--gold); }
.bar { max-width: 1000px; margin: auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.2rem; }
.brand img { width: 44px; height: 44px; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
nav a { display: block; padding: 6px 12px; border-radius: 20px; text-decoration: none; color: var(--ink); }
nav a:hover, nav a[aria-current="page"] { background: var(--brand); color: #fff; }

main { max-width: 1000px; margin: auto; padding: 16px; }
.hero { display: grid; gap: 20px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 24px 0; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; margin: 0 0 10px; }
.hero img { border-radius: 16px; }
.btn { display: inline-block; background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; border: 0; font-size: 1rem; cursor: pointer; }
.btn.alt { background: #fff; color: var(--brand); border: 2px solid var(--brand); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px #0001; }
.card div { padding: 10px 14px; }
.card h3 { margin: 0; }
.price { color: var(--brand); font-weight: 700; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid #f1e3d6; text-align: left; }
thead th { background: var(--brand); color: #fff; }
caption { text-align: left; font-weight: 700; padding: 6px 0; }

details { background: #fff; border-radius: 8px; padding: 8px 14px; margin: 8px 0; }
summary { cursor: pointer; font-weight: 600; }
blockquote { margin: 0; background: #fff; padding: 14px; border-left: 4px solid var(--gold); border-radius: 8px; }

form { background: #fff; padding: 16px; border-radius: 12px; display: grid; gap: 12px; max-width: 520px; }
label { font-weight: 600; display: block; }
input, select, textarea { width: 100%; padding: 8px; font: inherit; border: 1px solid #d6c3b3; border-radius: 6px; }
fieldset { border: 1px solid #f1e3d6; border-radius: 8px; }
fieldset label { font-weight: 400; display: inline; }
fieldset input { width: auto; }

footer.site { background: var(--ink); color: #f5e6d8; margin-top: 30px; }
footer.site .bar { align-items: flex-start; padding: 20px 16px; }
footer.site a { color: var(--gold); }
footer.site address { font-style: normal; }

🏅 Job skills unlocked today

✔ Turn a client brief into pages and a folder plan✔ Build a consistent multi-page site with shared header/footer✔ Apply SEO, schema, accessibility and performance together✔ Test, deploy and hand over a real business website

Practice tasks

🏋️ Practice – do it yourself

Task 1: Add a “Wedding orders” price-slab table: rows 10–49 kg, 50–99 kg, 100+ kg; columns Kaju Katli and Ladoo; a header cell spanning both sweets.
Show solution
HTML
<table border="1" cellpadding="6">
  <caption>Wedding bulk rates (₹ per kg)</caption>
  <thead>
    <tr><th scope="col" rowspan="2">Quantity</th><th scope="colgroup" colspan="2">Sweet</th></tr>
    <tr><th scope="col">Kaju Katli</th><th scope="col">Besan Ladoo</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">10–49 kg</th><td>₹860</td><td>₹470</td></tr>
    <tr><th scope="row">50–99 kg</th><td>₹830</td><td>₹450</td></tr>
    <tr><th scope="row">100+ kg</th><td>₹800</td><td>₹430</td></tr>
  </tbody>
</table>
▶  Result
Task 2: Write FAQPage JSON-LD for the three home-page questions.
Task 3: Build the same 6-page website for a real business near you (a tea stall, tailor, coaching centre) and publish it.

Quick quiz

🧠 Quick Quiz – test yourself

1. Which pages should be noindex?
They have no search value.
2. Why is the hero image NOT lazy-loaded?
Lazy-loading it would delay the main content.
3. aria-current="page" on a nav link means…
Also useful for CSS highlighting.
4. pattern="[6-9][0-9]{9}" accepts…
Indian mobile format.
5. Why does 404.html use /css/style.css instead of css/style.css?
Root-relative paths always resolve.

Interview corner

💼 Interview Corner

Describe a website project you built end to end.

Use STAR: Situation (sweet shop needed orders before Diwali), Task (6-page site in 3 weeks), Action (planned pages from requirements, semantic HTML, SEO head + schema, validated form, map, performance work, accessibility tests, deployed with HTTPS and Search Console), Result (0 validator errors, Lighthouse 90+, client can update prices).

How do you keep header and footer consistent across pages without a framework?

In pure HTML: build and test them once, then copy the page as a template and change only page-specific parts. In real projects use server includes (PHP include), a static site generator, or components in a framework to avoid duplication.

Summary

  • Requirements → page plan → folder plan before code.
  • Shared head, header and footer; unique titles and descriptions.
  • Every HTML skill in one site: picture, tables, video, form, map, details, schema.
  • Validate, test, deploy with HTTPS, submit the sitemap and hand over.
➡️ Next

🎉 HTML course complete! Next: the 20-day CSS course – you will write style.css yourself and turn this site into a stunning, responsive design.

Frequently Asked Questions

How much can I charge for a site like this?
In Indian tier-2 cities small business sites typically go for roughly ₹5,000–₹15,000 plus yearly hosting and domain – your portfolio decides where you land.
Is HTML alone enough to get a job?
HTML is the foundation. Add CSS (next course) and JavaScript to reach junior front-end level; this project then becomes your strongest portfolio piece.
← HTML (15 Days)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

Course complete! Continue withCSS (20 Days) Your progress: 15 / 15 (100%) · Recommended next course Continue →

How was this lesson?

Your feedback helps us make the content better.

Write a review or suggestion (optional)

After approval, your name and city may appear publicly with your review. Please do not write your email or phone number.

▶ CodingEasily on YouTube

Learn with video lessons in easy Hindi

Featured video: RDBMS Part 3 – Class XI Commerce IT

▶ Subscribe – it’s free