✅ Practice + Quiz  ·  Lesson 39

Project: Portfolio Page

Project: Portfolio Page

What We Are Building

Time to combine everything into a real project: a personal portfolio page — the "About Me" website every developer needs. It uses semantic structure, headings, an image, lists, links and a contact section — a working showcase of your HTML skills. No CSS yet (that's the next course); this is clean, valid, semantic HTML that already works and reads well. You'll style it beautifully once you learn CSS.
Sections we'll build:
┌─ header:  name + tagline + nav
├─ about:   photo + short intro
├─ skills:  a list of what you know
├─ projects: a list of things you've made
└─ footer:  contact links

Planning the Structure — think before you type

Every good page starts as an outline. Ours maps directly onto semantic tags:

SectionSemantic tagContains
Top bar<header> + <nav>Your name (h1), navigation links
Introduction<section>Photo, a short paragraph about you
Skills<section> + <ul>A bulleted list of skills
Projects<section> + <article>Each project as an article
Contact<footer>Email and social links

The Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gagan Kumar - Web Developer Portfolio</title>
    <meta name="description" content="Portfolio of Gagan Kumar, PHP and web developer.">
</head>
<body>

    <header>
        <h1>Gagan Kumar</h1>
        <p>PHP & Web Developer</p>
        <nav>
            <a href="#about">About</a> |
            <a href="#skills">Skills</a> |
            <a href="#projects">Projects</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <img src="my-photo.jpg" alt="Photo of Gagan Kumar" width="150">
            <p>I build web applications using PHP and MySQL. I enjoy turning
               ideas into working websites and love clean, semantic code.</p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>HTML5 & CSS</li>
                <li>PHP & MySQL</li>
                <li>JavaScript</li>
                <li>Responsive Design</li>
            </ul>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <article>
                <h3>School ERP System</h3>
                <p>A complete school management system for admissions,
                   attendance and results.</p>
            </article>
            <article>
                <h3>E-Commerce Website</h3>
                <p>An online store with cart, orders and invoices.</p>
            </article>
        </section>
    </main>

    <footer id="contact">
        <h2>Contact</h2>
        <p>Email: <a href="mailto:gagan@example.com">gagan@example.com</a></p>
        <p>&copy; 2026 Gagan Kumar</p>
    </footer>

</body>
</html>

Walkthrough — why each choice

  • head: charset + viewport + a unique title and description — SEO and mobile ready from line one.
  • header with h1: your name is the page's single h1; the tagline is a plain paragraph.
  • nav with #links: the navigation uses bookmark links (#about) that jump to each section's id — the same ToC technique from the links chapter.
  • semantic sections: about/skills/projects are <section>s; each project is an <article> because a project makes sense on its own.
  • img with alt + width: accessible and no layout shift.
  • footer with mailto: a real clickable email link.

Save this as index.html, add a photo named my-photo.jpg in the same folder, and open it — a complete, working portfolio, no CSS needed to function.

Make It Yours (practice challenges)

Extend the project to cement your skills:
✅ Add an "Education" section with a description list (dl/dt/dd)
✅ Add a table of your certifications
✅ Add real links to your GitHub and LinkedIn (target="_blank" rel="noopener")
✅ Add a second h3 project with an image
✅ Validate it at validator.w3.org — fix any warnings
When you learn CSS next, you'll return to THIS exact file and turn it into a beautiful, colourful, responsive site — the same HTML, dressed up. That's the power of separating structure from style.

हम क्या बना रहे हैं

अब सब कुछ एक असली project में जोड़ने का समय: एक personal portfolio page — वह "About Me" website जो हर developer को चाहिए. इसमें semantic structure, headings, एक image, lists, links और contact section है — आपकी HTML skills का चलता showcase. अभी CSS नहीं (वह अगला course); यह साफ, valid, semantic HTML है जो पहले से काम करता और अच्छा पढ़ता है. CSS सीखते ही इसे खूबसूरती से style करेंगे.
Jo sections banayenge:
┌─ header:  naam + tagline + nav
├─ about:   photo + chhota intro
├─ skills:  jo aata hai uski list
├─ projects: jo banaya uski list
└─ footer:  contact links

Structure की योजना — type करने से पहले सोचिए

हर अच्छा page एक outline से शुरू होता है. हमारा सीधे semantic tags पर मैप होता है:

SectionSemantic tagक्या रखता है
ऊपरी bar<header> + <nav>आपका नाम (h1), navigation links
परिचय<section>Photo, आपके बारे में छोटा paragraph
Skills<section> + <ul>Skills की bulleted list
Projects<section> + <article>हर project एक article
Contact<footer>Email और social links

पूरा Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gagan Kumar - Web Developer Portfolio</title>
    <meta name="description" content="Portfolio of Gagan Kumar, PHP and web developer.">
</head>
<body>

    <header>
        <h1>Gagan Kumar</h1>
        <p>PHP & Web Developer</p>
        <nav>
            <a href="#about">About</a> |
            <a href="#skills">Skills</a> |
            <a href="#projects">Projects</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <img src="my-photo.jpg" alt="Photo of Gagan Kumar" width="150">
            <p>I build web applications using PHP and MySQL. I enjoy turning
               ideas into working websites and love clean, semantic code.</p>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>HTML5 & CSS</li>
                <li>PHP & MySQL</li>
                <li>JavaScript</li>
                <li>Responsive Design</li>
            </ul>
        </section>

        <section id="projects">
            <h2>Projects</h2>
            <article>
                <h3>School ERP System</h3>
                <p>A complete school management system for admissions,
                   attendance and results.</p>
            </article>
            <article>
                <h3>E-Commerce Website</h3>
                <p>An online store with cart, orders and invoices.</p>
            </article>
        </section>
    </main>

    <footer id="contact">
        <h2>Contact</h2>
        <p>Email: <a href="mailto:gagan@example.com">gagan@example.com</a></p>
        <p>&copy; 2026 Gagan Kumar</p>
    </footer>

</body>
</html>

Walkthrough — हर choice क्यों

  • head: charset + viewport + unique title और description — पहली line से SEO और mobile ready.
  • header with h1: आपका नाम page की अकेली h1; tagline सादा paragraph.
  • nav with #links: navigation bookmark links (#about) use करता है जो हर section की id पर jump करते हैं — links chapter वाली ToC तकनीक.
  • semantic sections: about/skills/projects <section> हैं; हर project <article> क्योंकि project अपने आप में समझ आता है.
  • img with alt + width: accessible और कोई layout shift नहीं.
  • footer with mailto: असली clickable email link.

इसे index.html के रूप में save कीजिए, same folder में my-photo.jpg नाम की photo डालिए, और खोलिए — पूरा, चलता portfolio, काम करने को CSS नहीं चाहिए.

इसे अपना बनाइए (practice challenges)

Skills पक्की करने को project बढ़ाइए:
✅ description list (dl/dt/dd) के साथ "Education" section जोड़िए
✅ अपने certifications की table जोड़िए
✅ अपने GitHub और LinkedIn के असली links (target="_blank" rel="noopener")
✅ image के साथ दूसरा h3 project जोड़िए
✅ validator.w3.org पर validate कीजिए — warnings fix कीजिए
अगले CSS सीखते ही आप ISI file पर लौटेंगे और इसे खूबसूरत, रंगीन, responsive site बनाएंगे — वही HTML, सजा हुआ. यही structure को style से अलग करने की ताकत है.
← Back to HTML Tutorial
🔗

Share this topic with a friend

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

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

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

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.