🚀 Days 11–15 – Pro Skills और Projects · दिन 14

दिन 14: Mini Project: Personal Portfolio Page

⏱ 2–3 hours📶 Project🎯 100% self-study

दिन 14 / 15

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

Professional की तरह one-page portfolio plan करना
SEO-ready head लिखना
Header, about, skills, projects और contact sections बनाना
Accessibility जाँचना और validate करना
GitHub Pages पर publish करके link share करना

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

Recruiters एक fresher की application पर लगभग 30 सेकंड देते हैं। Résumé पर live portfolio link – तेज़, साफ़ और phone पर चलने वाला – तुरंत दिखाता है कि आप सच में बना सकते हैं। आज आप “Aarav Mehta” के लिए एक बनाएँगे, फिर details अपनी डाल देंगे।

आप क्या बनाएँगे

▶ The finished portfolio – scroll inside the box

पूरा code इस lesson के अंत में और मुफ़्त HTML course kit download में है।

Step 1: लिखने से पहले plan

एक page, पाँच sections

💡 Recruiter की नज़र

सबसे अच्छा project पहले रखें, live site और code दोनों का link दें, और about text छोटा व ठोस रखें (“sweet shop के लिए 5-page site बनाई”) – सामान्य नहीं (“मैं मेहनती हूँ”)।

Step 2: head (Day 9)

HTML – head

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aarav Mehta – Junior Web Developer Portfolio, Jaipur</title>
  <meta name="description" content="Portfolio of Aarav Mehta, junior web developer from Jaipur: HTML, CSS and JavaScript projects including a sweet-shop website, a quiz app and a budget tracker.">
  <meta property="og:title" content="Aarav Mehta – Junior Web Developer">
  <meta property="og:description" content="Projects, skills and contact details.">
  <meta property="og:type" content="profile">
  <meta name="theme-color" content="#4f46e5">
  <style> … a few lines of CSS (see full file) … </style>
</head>

Title = नाम + role + शहर – जो recruiter search करेगा।
og:type="profile" से WhatsApp/LinkedIn previews personal दिखते हैं।
1-page site के लिए छोटा <style> block ठीक है; बड़ी sites css/style.css लेती हैं।

Step 3: SVG avatar वाला header (Days 3, 12)

HTML – header

<a class="skip" href="#main">Skip to main content</a>

  <header>
    <svg viewBox="0 0 100 100" role="img" aria-label="Aarav’s avatar">
      <circle cx="50" cy="50" r="48" fill="#e0e7ff"/>
      <circle cx="50" cy="40" r="18" fill="#4f46e5"/>
      <path d="M18 86 q32 -40 64 0" fill="#4f46e5"/>
    </svg>
    <h1>Aarav Mehta</h1>
    <p>Junior Web Developer · Jaipur · Open to work</p>
    <nav aria-label="Sections">
      <a href="#about">About</a><a href="#skills">Skills</a><a href="#projects">Projects</a><a href="#contact">Contact</a>
    </nav>
  </header>

🧠 SVG avatar क्यों?

यह 1 KB से कम है और हमेशा साफ़। बाद में अपनी photo डालें: <img src="me.webp" alt="Aarav Mehta" width="110" height="110">।

Step 4: about + skills (Days 2, 5, 11)

HTML – about and skills

<section id="about" aria-labelledby="h-about">
      <h2 id="h-about">About me</h2>
      <p>I am a B.Com graduate who fell in love with building websites. In the last 3 months I learnt HTML, CSS and JavaScript day by day and built real projects for local businesses. I care about <strong>fast, accessible and mobile-friendly</strong> pages.</p>
      <p><a href="aarav-mehta-resume.pdf" download>Download my résumé (PDF)</a></p>
    </section>

    <section id="skills" aria-labelledby="h-skills">
      <h2 id="h-skills">Skills</h2>
      <table>
        <caption>My current level</caption>
        <thead><tr><th scope="col">Skill</th><th scope="col">Level</th></tr></thead>
        <tbody>
          <tr><th scope="row">HTML5 (semantic, forms, SEO, accessibility)</th><td><meter min="0" max="10" value="8">8/10</meter> 8/10</td></tr>
          <tr><th scope="row">CSS3 (Flexbox, Grid, responsive)</th><td><meter min="0" max="10" value="6">6/10</meter> 6/10</td></tr>
          <tr><th scope="row">JavaScript</th><td><meter min="0" max="10" value="4">4/10</meter> 4/10 – learning</td></tr>
          <tr><th scope="row">Git &amp; GitHub Pages</th><td><meter min="0" max="10" value="6">6/10</meter> 6/10</td></tr>
        </tbody>
      </table>
    </section>

download attribute से résumé link PDF save करता है।
scope="col"/"row" table को screen readers के लिए पठनीय बनाते हैं।
<meter> असली माप-bar है – साथ में “8/10” text सबके लिए समझने योग्य रखता है।

Step 5: article से projects (Day 8)

HTML – projects

<section id="projects" aria-labelledby="h-proj">
      <h2 id="h-proj">Projects</h2>
      <article>
        <h3>Sharma Sweets – business website</h3>
        <p>Five-page site for a Jaipur sweet shop: menu tables, order form with validation, Google Map, schema markup. Lighthouse SEO 100.</p>
        <p><a href="https://example.github.io/sharma-sweets/">Live site</a> · <a href="https://github.com/example/sharma-sweets">Code on GitHub</a></p>
      </article>
      <article>
        <h3>GK Quiz page</h3>
        <p>An accessible quiz using details/summary and forms – works fully with the keyboard.</p>
      </article>
      <article>
        <h3>Monthly budget tracker</h3>
        <p>A form and table to record expenses – will be made interactive in my JavaScript course.</p>
      </article>
    </section>

Step 6: काम करने वाला contact form (Days 6–7)

HTML – contact

<section id="contact" aria-labelledby="h-contact">
      <h2 id="h-contact">Contact me</h2>
      <form action="https://formspree.io/f/your-form-id" method="post">
        <label for="n">Your name</label>
        <input id="n" name="name" autocomplete="name" required>
        <label for="e">Your e-mail</label>
        <input id="e" name="email" type="email" autocomplete="email" required>
        <label for="m">Message</label>
        <textarea id="m" name="message" rows="4" required></textarea>
        <button type="submit">Send message</button>
      </form>
      <p>Or e-mail <a href="mailto:aarav.dev@example.com">aarav.dev@example.com</a> ·
         <a href="https://www.linkedin.com/in/example">LinkedIn</a> ·
         <a href="https://github.com/example">GitHub</a></p>
    </section>
  </main>

1formspree.io पर मुफ़्त sign up
2Form बनाएँ – https://formspree.io/f/abcd1234 जैसा URL मिलेगा
3उसे action="" में डालें
4एक बार submit करके e-mail confirm करें
5अब हर message आपके inbox में आएगा

Form से e-mails भेजें (server की ज़रूरत नहीं)

Step 7: test, फिर publish

Keyboard test: Tab से चलें – पहले skip link, हर link और field पहुँच में।
Validator: validator.w3.org/nu → 0 errors।
Lighthouse (mobile): Accessibility, Best Practices, SEO में 90+ लक्ष्य।
“Aarav Mehta”, links और projects की जगह अपनी असली details।
GitHub पर yourname.github.io नाम से upload (Day 13) → Settings → Pages।
Link को résumé, LinkedIn “Featured” और e-mail signature में जोड़ें।

पूरा code

HTML – portfolio/index.html (complete)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aarav Mehta – Junior Web Developer Portfolio, Jaipur</title>
  <meta name="description" content="Portfolio of Aarav Mehta, junior web developer from Jaipur: HTML, CSS and JavaScript projects including a sweet-shop website, a quiz app and a budget tracker.">
  <meta property="og:title" content="Aarav Mehta – Junior Web Developer">
  <meta property="og:description" content="Projects, skills and contact details.">
  <meta property="og:type" content="profile">
  <meta name="theme-color" content="#4f46e5">
  <style>
    /* A few lines of CSS so the page looks neat – full CSS comes in the next course */
    body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; color: #1f2937; background: #f8fafc; }
    header, main, footer { max-width: 760px; margin: auto; padding: 16px; }
    header { text-align: center; padding-top: 32px; }
    header svg { width: 110px; height: 110px; }
    h1 { margin: 8px 0 0; } h2 { border-bottom: 3px solid #4f46e5; display: inline-block; }
    nav a { margin: 0 8px; color: #4f46e5; }
    article { background: #fff; border-radius: 12px; padding: 12px 16px; margin: 12px 0; box-shadow: 0 2px 8px #0001; }
    table { border-collapse: collapse; width: 100%; background: #fff; }
    th, td { border: 1px solid #e5e7eb; padding: 6px 10px; text-align: left; }
    form { display: grid; gap: 10px; background: #fff; padding: 16px; border-radius: 12px; }
    input, textarea { width: 100%; padding: 8px; font: inherit; box-sizing: border-box; }
    button { background: #4f46e5; color: #fff; border: 0; padding: 10px; border-radius: 8px; font: inherit; cursor: pointer; }
    .skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; }
  </style>
</head>
<body>
  <a class="skip" href="#main">Skip to main content</a>

  <header>
    <svg viewBox="0 0 100 100" role="img" aria-label="Aarav’s avatar">
      <circle cx="50" cy="50" r="48" fill="#e0e7ff"/>
      <circle cx="50" cy="40" r="18" fill="#4f46e5"/>
      <path d="M18 86 q32 -40 64 0" fill="#4f46e5"/>
    </svg>
    <h1>Aarav Mehta</h1>
    <p>Junior Web Developer · Jaipur · Open to work</p>
    <nav aria-label="Sections">
      <a href="#about">About</a><a href="#skills">Skills</a><a href="#projects">Projects</a><a href="#contact">Contact</a>
    </nav>
  </header>

  <main id="main">
    <section id="about" aria-labelledby="h-about">
      <h2 id="h-about">About me</h2>
      <p>I am a B.Com graduate who fell in love with building websites. In the last 3 months I learnt HTML, CSS and JavaScript day by day and built real projects for local businesses. I care about <strong>fast, accessible and mobile-friendly</strong> pages.</p>
      <p><a href="aarav-mehta-resume.pdf" download>Download my résumé (PDF)</a></p>
    </section>

    <section id="skills" aria-labelledby="h-skills">
      <h2 id="h-skills">Skills</h2>
      <table>
        <caption>My current level</caption>
        <thead><tr><th scope="col">Skill</th><th scope="col">Level</th></tr></thead>
        <tbody>
          <tr><th scope="row">HTML5 (semantic, forms, SEO, accessibility)</th><td><meter min="0" max="10" value="8">8/10</meter> 8/10</td></tr>
          <tr><th scope="row">CSS3 (Flexbox, Grid, responsive)</th><td><meter min="0" max="10" value="6">6/10</meter> 6/10</td></tr>
          <tr><th scope="row">JavaScript</th><td><meter min="0" max="10" value="4">4/10</meter> 4/10 – learning</td></tr>
          <tr><th scope="row">Git &amp; GitHub Pages</th><td><meter min="0" max="10" value="6">6/10</meter> 6/10</td></tr>
        </tbody>
      </table>
    </section>

    <section id="projects" aria-labelledby="h-proj">
      <h2 id="h-proj">Projects</h2>
      <article>
        <h3>Sharma Sweets – business website</h3>
        <p>Five-page site for a Jaipur sweet shop: menu tables, order form with validation, Google Map, schema markup. Lighthouse SEO 100.</p>
        <p><a href="https://example.github.io/sharma-sweets/">Live site</a> · <a href="https://github.com/example/sharma-sweets">Code on GitHub</a></p>
      </article>
      <article>
        <h3>GK Quiz page</h3>
        <p>An accessible quiz using details/summary and forms – works fully with the keyboard.</p>
      </article>
      <article>
        <h3>Monthly budget tracker</h3>
        <p>A form and table to record expenses – will be made interactive in my JavaScript course.</p>
      </article>
    </section>

    <section id="contact" aria-labelledby="h-contact">
      <h2 id="h-contact">Contact me</h2>
      <form action="https://formspree.io/f/your-form-id" method="post">
        <label for="n">Your name</label>
        <input id="n" name="name" autocomplete="name" required>
        <label for="e">Your e-mail</label>
        <input id="e" name="email" type="email" autocomplete="email" required>
        <label for="m">Message</label>
        <textarea id="m" name="message" rows="4" required></textarea>
        <button type="submit">Send message</button>
      </form>
      <p>Or e-mail <a href="mailto:aarav.dev@example.com">aarav.dev@example.com</a> ·
         <a href="https://www.linkedin.com/in/example">LinkedIn</a> ·
         <a href="https://github.com/example">GitHub</a></p>
    </section>
  </main>

  <footer>
    <p><small>&copy; 2026 Aarav Mehta · Built with hand-written HTML</small></p>
  </footer>
</body>
</html>

🏅 आज के Job Skills

✔ पूरी one-page site plan करके बनाना✔ Head SEO, semantics, tables, forms और SVG जोड़ना✔ Form को e-mail service से जोड़ना✔ Recruiters के खोलने लायक portfolio publish करना

Practice tasks

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

Task 1: 3 certificates की list वाला “Certificates” section जोड़ें, हर एक में <time> से तारीख़।

Solution देखें

HTML

<section id="certs" aria-labelledby="h-certs">
  <h2 id="h-certs">Certificates</h2>
  <ul>
    <li>HTML – 15-Day Course, CodingEasily · <time datetime="2026-10">Oct 2026</time></li>
    <li>Responsive Web Design – freeCodeCamp · <time datetime="2026-08">Aug 2026</time></li>
    <li>Git &amp; GitHub Basics · <time datetime="2026-07">Jul 2026</time></li>
  </ul>
</section>

▶ Result

Task 2: “About me” paragraph का Hindi version lang="hi" के साथ जोड़ें।

Task 3: Portfolio GitHub Pages पर publish करें और live URL पर Lighthouse चलाएँ।

Quick quiz

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

1. Portfolio का सबसे अच्छा title?

नाम + role + शहर।

2. कौन सा attribute link से file download करवाता है?

<a href download>।

3. हर project card के लिए सबसे अच्छा…

स्वतंत्र content।

4. GitHub Pages पर form e-mail भेज सकता है…

Third-party form endpoint।

5. meter के पास “8/10” text क्यों?

सिर्फ़ visuals पर निर्भर न रहें।

Interview corner

💼 Interview Corner

अपना portfolio समझाइए।

जवाब ढाँचे में दें: उद्देश्य (असली काम दिखाना), tech (semantic HTML, SEO head, accessible form, SVG), एक हल की गई चुनौती (जैसे बिना server Formspree से form चलाना), नतीजे (Lighthouse scores) और आगे क्या जोड़ेंगे।

Page को accessible कैसे बनाया?

Skip link, तार्किक headings, हर input का label, table headers पर scope, meters के साथ text, SVG पर aria-label, दिखता focus और Tab व Lighthouse से testing।

सारांश

पहले sections plan: header, about, skills, projects, contact।
हर skill दोबारा: SEO head, semantics, tables, meters, forms, SVG।
Formspree से बिना server forms चलते हैं।
Validate, Lighthouse test, publish और link résumé पर।

➡️ आगे

Day 15 – Major Project: Sharma Sweets की पूरी 5-page business website, file-दर-file समझाकर।

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

मेरे पास असली projects नहीं हैं। क्या दिखाऊँ?

Course projects दिखाएँ (यह portfolio, कल की Sharma Sweets site) और किसी असली local दुकान या रिश्तेदार के लिए मुफ़्त में एक छोटी site बनाएँ।

क्या template ले लूँ?

Fresher के लिए हाथ से लिखा page skill कहीं बेहतर साबित करता है। CSS course के बाद इसे premium बना सकते हैं।

← HTML (15 Days)