Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🚀 Days 11–15 – Pro Skills और Projects  ·  दिन 15

दिन 15: Major Project: Multi-page Business Website

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

✅ आज आप सीखेंगे

  • असली client website plan: pages, content, folders
  • एक header और footer साझा करने वाले 6 pages बनाना
  • सब कुछ इस्तेमाल: SEO head, schema, picture, tables, forms, video, map, details
  • Professional की तरह test: validator, keyboard, Lighthouse, phone
  • Publish करके client को सौंपना

🏢 असली दुनिया में

Sharma Sweets के मालिक श्री Vikas Sharma आपको call करते हैं: “Diwali 3 हफ़्ते में है। मुझे ऐसी website चाहिए जहाँ लोग menu और prices देखें, हमारी कहानी जानें, दुकान ढूँढें और bulk orders दें। Budget ₹8,000।” India में freelancers को हर हफ़्ते ठीक ऐसे projects मिलते हैं। चलिए deliver करें।

तैयार website

▶  Home page – index.html (scroll inside)
🏠
index.htmlHero, best sellers, why us, review, FAQ
📋
menu.htmlPrice tables और gift boxes
📖
about.htmlकहानी, video, timeline, वादा
🛒
contact.htmlValidated order form + Google Map
🙏
thank-you.htmlForm के बाद (noindex)
🍬
404.htmlदोस्ताना “not found” page
6 pages, 1 stylesheet, 1 images folder

Phase 1: requirements और planning

Client की ज़रूरतहमारा HTML हलकिस Day सीखा
Menu और prices दिखानाCaption वाली tables के साथ menu.html5
Google पर भरोसेमंद दिखनाTitles, descriptions, canonical, LocalBusiness schema9
सुंदर WhatsApp previewsOpen Graph tags9
Bulk ordersValidation वाला contact.html form6–7
Customers दुकान ढूँढेंEmbedded Google Map, पता, tel: link3, 12
परिवार की कहानीVideo, ol timeline, dl वादा वाला about.html2, 4, 5
सबके लिए काम करेSkip link, labels, alt, focus, lang10
4G पर तेज़WebP, 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
💡 Professional workflow

साझा हिस्से (head, header, footer) index.html पर एक बार लिखें, test करें, फिर उसी file को copy करके बाक़ी pages बनाएँ और सिर्फ़ title, description, canonical, aria-current और main content बदलें। इससे हर page एक जैसा रहता है।

Phase 2: head (हर page)

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>
Lineक्यों है
title (58 chars)Brand + मुख्य keywords + वादा; हर page का अलग
meta description (≈150 chars)क्या बेचते हैं, सबूत (pure ghee, since 1985), action
canonical?utm=… से link हो तब भी एक official URL
og:* + twitter:cardWhatsApp पर share होने पर बड़ी image preview
icon + theme-colorBrowser tabs पर logo; नारंगी mobile address bar
application/ld+jsonBakery schema: Google पता, phone, समय जानता है

Phase 3: साझा header और footer

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>
  • Skip link पहला focusable item है – keyboard users सीधे <main id="main"> पर पहुँचते हैं।
  • Logo image का alt="" है क्योंकि ठीक बगल का text “Sharma Sweets” link का नाम पहले ही बताता है।
  • aria-label="Main" navigation landmark का नाम है; aria-current="page" बताता है आप कहाँ हैं (और CSS उसे highlight करती है)। menu.html पर aria-current 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 mobile पर phone dialer खोलता है – sweet shop के लिए यह एक link किसी भी दूसरे feature से ज़्यादा orders लाता है। हमेशा पूरा 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>
  • हर page पर ठीक एक <h1>, page का वर्णन करता हुआ।
  • <picture> + srcset: phones 400 px image, बड़ी screens 800 px वाली लेती हैं।
  • Hero image पर loading="lazy" नहीं क्योंकि यह तुरंत दिखती है (यही LCP image है)।
  • दो साफ़ calls to action: “Order now” (मुख्य) और “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>

हर product एक <article> है क्योंकि वह अकेले भी समझ आता है; hero के नीचे की images पर loading="lazy"। “Why us” list, review (<figure> + <blockquote> + <figcaption>) और FAQ (<details name="faq">) Days 2, 8 और 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> table का नाम screen readers और Google को बताता है।
  • Column headers पर scope="col", हर मिठाई का नाम scope="row" वाला row header।
  • Page के अंदर “Jump to” nav #ids से – लंबे pages और Google sitelinks के लिए बढ़िया।

Phase 6: about page – कहानी, 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: 1 MB video तभी download होता है जब कोई play दबाए।
  • <video> के अंदर download link वाला fallback text।
  • <time datetime> सालों को machine-readable बनाता है; <dfn> और <abbr> शब्द समझाते हैं।
  • <dl> “term → explanation” lists जैसे वादे के लिए perfect।

Phase 7: 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क्यों
namerequired, minlength="2", autocomplete="name"Phone अपने-आप भरता है
phonetype="tel", pattern="[6-9][0-9]{9}", inputmode="numeric"Indian mobile format; numeric keypad
sweetखाली पहले option वाला select requiredअसली चुनाव ज़रूरी
kgtype="number" min 0.25 max 200 step 0.25सिर्फ़ समझदार मात्रा
modefieldset + legend में radio groupएक चुनाव, accessible group नाम
datetype="date" requiredCalendar picker
okcheckbox requiredCall से पहले सहमति
⚠️ Orders कहाँ जाते हैं?

सिर्फ़ HTML data store या e-mail नहीं कर सकता। इस project में form thank-you.html पर जाता है ताकि flow पूरा हो। असली दुकान के लिए: Netlify पर data-netlify="true", GitHub Pages पर Formspree action URL, या Hostinger पर action को PHP script पर। Server पर हमेशा दोबारा validate करें।

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 और 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 और 404.html पर <meta name="robots" content="noindex"> – ये Google में नहीं दिखने चाहिए।
  • 404.html root-relative paths (/css/style.css) लेता है क्योंकि यह किसी भी गहराई के टूटे URL पर दिख सकता है।
  • robots.txt sitemap की ओर इशारा करता है; sitemap.xml Search Console के लिए 4 public pages बताता है।
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: professional की तरह test

जाँचToolपास कब
HTML errorsvalidator.w3.org/nuसभी 6 pages पर 0 errors
KeyboardTab / Shift+Tab / Enterपहले skip link; focus हमेशा दिखे; form चले
MobileDevTools Ctrl+Shift+M + असली phoneSide scroll नहीं; tap करना आसान
Speed और SEOLighthouse (mobile)चारों categories में 90+
Linksहर link clickकोई 404 नहीं; tel: dialer खोले
SchemaRich Results TestBakery detected, कोई error नहीं
SharingWhatsApp में link pasteImage, title और description दिखें
✅ हमारा नतीजा

हमने इस project के छहों pages पर W3C Nu validator चलाया: 0 HTML errors (सिर्फ़ type="date" और inputmode के लिए “सभी browsers में test करें” वाले info notes)।

Phase 10: live करें और सौंपें

  1. 1sharmasweets.in domain ख़रीदें (≈ ₹600/साल) या Netlify पर मुफ़्त शुरू करें
  2. 2पूरा folder upload करें (Netlify: drag-and-drop; Hostinger: File Manager → public_html)
  3. 3HTTPS चालू करें (मुफ़्त SSL)
  4. 4असली form endpoint लगाएँ और test order भेजें
  5. 5Google Search Console: site verify, sitemap.xml submit
  6. 6उसी नाम, पते, phone के साथ Google Business Profile बनाएँ/claim करें
  7. 7सौंपें: login details, 1-page “prices कैसे बदलें” note, और invoice
Folder से live business website तक
🧠 बाद में price कैसे बदलें

menu.html खोलें, Ctrl+F से मिठाई का नाम ढूँढें, उसके <td> में संख्या बदलें, save करें, सिर्फ़ वह file upload करें। Client को यह सिखाने से भरोसा बनता है – और दोबारा काम मिलता है।

इसे बढ़ाएँ (homework challenges)

  1. /hi/ में lang="hi" और दोनों ओर hreflang links वाला Hindi version जोड़ें।
  2. rowspan/colspan से price-slab table वाला “Wedding orders” page जोड़ें।
  3. Home-page FAQ के लिए FAQPage schema जोड़ें।
  4. figure/figcaption में 8 lazy-loaded images वाला gallery page जोड़ें।
  5. CSS course के बाद: redesign; JS course के बाद: live cart जोड़ें।

पूरा source code

सारी files नीचे हैं और मुफ़्त HTML course kit download में भी (images, video और 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

✔ Client brief को pages और folder plan में बदलना✔ साझा header/footer वाली एक-जैसी multi-page site✔ SEO, schema, accessibility और performance एक साथ✔ असली business website test, deploy और handover

Practice tasks

🏋️ Practice – ख़ुद करें

Task 1: “Wedding orders” price-slab table बनाएँ: rows 10–49 kg, 50–99 kg, 100+ kg; columns Kaju Katli और Ladoo; दोनों मिठाइयों पर फैला एक header cell।
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: Home page के तीन सवालों के लिए FAQPage JSON-LD लिखें।
Task 3: अपने पास के किसी असली business (चाय की दुकान, दर्ज़ी, coaching centre) के लिए यही 6-page website बनाकर publish करें।

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

1. कौन से pages noindex होने चाहिए?
इनकी search value नहीं।
2. Hero image lazy-load क्यों नहीं?
Lazy करने से मुख्य content देर से दिखेगा।
3. Nav link पर aria-current="page" का मतलब…
CSS highlight में भी उपयोगी।
4. pattern="[6-9][0-9]{9}" स्वीकार करता है…
Indian mobile format।
5. 404.html css/style.css की जगह /css/style.css क्यों?
Root-relative paths हमेशा सही बैठते हैं।

Interview corner

💼 Interview Corner

आपने शुरू से अंत तक बनाया कोई website project बताइए।

STAR लें: Situation (Diwali से पहले sweet shop को orders चाहिए थे), Task (3 हफ़्ते में 6-page site), Action (requirements से pages plan, semantic HTML, SEO head + schema, validated form, map, performance काम, accessibility tests, HTTPS और Search Console के साथ deploy), Result (0 validator errors, Lighthouse 90+, client ख़ुद prices बदल सकता है)।

बिना framework के pages में header और footer एक जैसे कैसे रखें?

Pure HTML में: एक बार बनाकर test करें, फिर page को template की तरह copy करके सिर्फ़ page-specific हिस्से बदलें। असली projects में duplication से बचने के लिए server includes (PHP include), static site generator या framework components लें।

सारांश

  • Code से पहले requirements → page plan → folder plan।
  • साझा head, header और footer; अलग titles और descriptions।
  • एक site में हर HTML skill: picture, tables, video, form, map, details, schema।
  • Validate, test, HTTPS के साथ deploy, sitemap submit और handover।
➡️ आगे

🎉 HTML course पूरा! अगला: 20-day CSS course – आप style.css ख़ुद लिखेंगे और इस site को शानदार, responsive design में बदलेंगे।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

ऐसी site के लिए कितना charge करूँ?
Indian tier-2 शहरों में छोटे business sites आम तौर पर लगभग ₹5,000–₹15,000 और सालाना hosting व domain पर बनती हैं – आपका portfolio तय करता है कहाँ पहुँचेंगे।
क्या सिर्फ़ HTML से job मिल जाएगी?
HTML नींव है। Junior front-end level के लिए CSS (अगला course) और JavaScript जोड़ें; फिर यह project आपका सबसे मज़बूत 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 पूरा! आगे सीखेंCSS (20 Days) आपकी प्रगति: 15 / 15 (100%) · अगला course आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें