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

Day 14: Mini Project: Personal Portfolio Page

⏱ 2–3 hours📶 Project🎯 100% self-study
Day 14 / 15

✅ Today you will learn

  • Plan a one-page portfolio like a professional
  • Write the SEO-ready head
  • Build header, about, skills, projects and contact sections
  • Check accessibility and validate
  • Publish it on GitHub Pages and share the link

🏢 In the real world

Recruiters spend about 30 seconds on a fresher’s application. A live portfolio link on your résumé – fast, clean and working on a phone – instantly shows you can actually build. Today you build one for “Aarav Mehta”, then replace the details with your own.

What you will build

▶  The finished portfolio – scroll inside the box

The full code is at the end of this lesson and in the free HTML course kit download.

Step 1: plan before you type

Header: photo/avatar, name, one-line role, section linksAbout: 3–4 lines + résumé downloadSkills: table with meter barsProjects: one article per project with live + code linksContact: form + e-mail + LinkedIn/GitHubFooter: copyright
One page, five sections
💡 Recruiter view

Put your best project first, link to the live site AND the code, and keep the about text short and specific (“built a 5-page site for a sweet shop”) instead of generic (“I am hard-working”).

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 = name + role + city – what a recruiter would search.
  • og:type="profile" makes WhatsApp/LinkedIn previews look personal.
  • For a 1-page site a small <style> block is fine; bigger sites use css/style.css.
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>
🧠 Why an SVG avatar?

It weighs under 1 KB and is always sharp. Swap it for your own photo later: <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>
  • The download attribute makes the résumé link save the PDF.
  • scope="col"/"row" make the table readable for screen readers.
  • <meter> is a real measurement bar – the text “8/10” next to it keeps it understandable for everyone.

Step 5: projects with article (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: a working 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>
  1. 1Go to formspree.io and sign up free
  2. 2Create a form – you get a URL like https://formspree.io/f/abcd1234
  3. 3Paste it into action=""
  4. 4Submit once and confirm your e-mail
  5. 5Every message now arrives in your inbox
Make the form send e-mails (no server needed)

Step 7: test, then publish

  1. Keyboard test: Tab through – skip link appears first, every link and field is reachable.
  2. Validator: validator.w3.org/nu → 0 errors.
  3. Lighthouse (mobile): aim for 90+ in Accessibility, Best Practices, SEO.
  4. Replace “Aarav Mehta”, links and projects with your real details.
  5. Upload to GitHub as yourname.github.io (Day 13) → Settings → Pages.
  6. Add the link to your résumé, LinkedIn “Featured” and e-mail signature.

Full 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 unlocked today

✔ Plan and build a complete one-page site✔ Combine head SEO, semantics, tables, forms and SVG✔ Connect a form to an e-mail service✔ Publish a portfolio that recruiters can open

Practice tasks

🏋️ Practice – do it yourself

Task 1: Add a “Certificates” section with a list of 3 certificates, each with a date using <time>.
Show 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: Add a Hindi version of the “About me” paragraph with lang="hi".
Task 3: Publish your portfolio on GitHub Pages and run Lighthouse on the live URL.

Quick quiz

🧠 Quick Quiz – test yourself

1. Best title for a portfolio?
Name + role + city.
2. Which attribute makes a link download the file?
<a href download>.
3. Each project card is best marked up as…
Self-contained content.
4. A form on GitHub Pages can send e-mail using…
A third-party form endpoint.
5. Why add the text “8/10” next to a meter?
Do not rely on visuals only.

Interview corner

💼 Interview Corner

Walk me through your portfolio.

Structure the answer: purpose (show real work), tech (semantic HTML, SEO head, accessible form, SVG), one challenge you solved (e.g. making the form work without a server via Formspree), results (Lighthouse scores) and what you would add next.

How did you make the page accessible?

Skip link, logical headings, labels for every input, scope on table headers, text with meters, an aria-label on the SVG, visible focus and testing with Tab and Lighthouse.

Summary

  • Plan sections first: header, about, skills, projects, contact.
  • Reuse every skill: SEO head, semantics, tables, meters, forms, SVG.
  • Formspree makes forms work without a server.
  • Validate, Lighthouse-test, publish and put the link on your résumé.
➡️ Next

Day 15 – Major Project: a complete 5-page business website for Sharma Sweets, explained file by file.

Frequently Asked Questions

I have no real projects yet. What do I show?
Show course projects (this portfolio, the Sharma Sweets site tomorrow) and build one small site for a real local shop or relative for free.
Should I use a template instead?
For a fresher, a hand-written page proves your skill far better. After the CSS course you can make it look premium.
← HTML (15 Days)
🔗

Share this topic with a friend

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

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

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

Next topicDay 15: Major Project: Multi-page Business Website Your progress: 14 / 15 (93%) · Lesson 15 / 15 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
RDBMS Part 3 – Class XI Commerce IT – video thumbnailRDBMS Part 3 – Class XI Commerce IT