HTML, CSS & JavaScript · Chapter 1.12 · Pro level

Capstone: Complete Responsive Portfolio + Go Live

कैपस्टोन: पूरा Responsive पोर्टफोलियो + वेबसाइट लाइव करो

Time to combine everything into a real portfolio you can show schools and employers: a proper <!DOCTYPE html> page with <head> (title + SEO meta description + viewport), semantic <header>, <nav>, <main>, <section>, <footer>, flexbox cards, an image with alt text (accessibility), and a little JavaScript. To publish it free: save it as index.html (💾 Download File) and upload to GitHub Pages, Netlify Drop or Firebase Hosting — you get a real link to share!

अब सब कुछ जोड़कर एक असली पोर्टफोलियो बनाओ जो स्कूल और कंपनियों को दिखा सको: सही <!DOCTYPE html> पेज, <head> (title + SEO meta description + viewport), semantic <header>, <nav>, <main>, <section>, <footer>, flexbox कार्ड्स, alt टेक्स्ट वाली फ़ोटो (accessibility) और थोड़ी JavaScript। मुफ़्त में लाइव करने के लिए: इसे index.html नाम से सेव करो (💾 Download File) और GitHub Pages, Netlify Drop या Firebase Hosting पर अपलोड करो — आपको शेयर करने लायक असली लिंक मिलेगा!

Open this chapter in the live classroom HTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<!DOCTYPE html>: First line of every real page: "this is modern HTML5".; हर असली पेज की पहली लाइन: "यह आधुनिक HTML5 है"।
<title> & <meta name="description">: Tab title and the summary Google shows in search results (SEO).; टैब का नाम और वह सारांश जो Google सर्च में दिखाता है (SEO)।
<section id="projects">: A themed part of the page; id lets the menu link jump to it (href="#projects").; पेज का एक हिस्सा; id से मेन्यू का लिंक वहाँ कूद सकता है (href="#projects")।
alt="...": Describes an image for blind users & when the image fails to load.; फ़ोटो का विवरण — नेत्रहीन यूज़र्स के लिए और जब फ़ोटो लोड न हो।

Ready example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aarav | Web Developer</title>
  <meta name="description" content="Portfolio of Aarav, a student web developer.">
  <style>
    body { font-family: sans-serif; margin: 0; }
    header { background: #1e1b4b; color: white; padding: 16px; }
    nav a { color: #fde68a; margin-right: 12px; }
    .cards { display: flex; gap: 10px; flex-wrap: wrap; }
    .card { flex: 1; min-width: 140px; padding: 14px; border: 1px solid #cbd5e1; border-radius: 10px; }
    footer { text-align: center; padding: 10px; color: #64748b; }
  </style>
</head>
<body>
  <header>
    <h1>Aarav Sharma</h1>
    <nav><a href="#projects">Projects</a><a href="#contact">Contact</a></nav>
  </header>
  <main>
    <section id="projects">
      <h2>My Projects</h2>
      <div class="cards">
        <div class="card">🌐 School Website</div>
        <div class="card">🧮 Calculator</div>
      </div>
    </section>
    <section id="contact">
      <h2>Contact</h2>
      <button id="hireBtn">Say Hello</button>
      <p id="note"></p>
    </section>
  </main>
  <footer>© 2026 Aarav</footer>
  <script>
    document.getElementById("hireBtn").addEventListener("click", function () {
      document.getElementById("note").textContent = "Thanks! Email: aarav@example.com";
    });
  </script>
</body>
</html>

What you will see: A complete one-page portfolio: header with menu, project cards, contact button and footer.

पूरा एक-पेज पोर्टफोलियो: मेन्यू वाला header, प्रोजेक्ट कार्ड्स, contact बटन और footer।

Line by line

<head> ... <title> ... <meta name="description"> ...: Page settings: phone-friendly viewport, tab title and SEO summary.; पेज की सेटिंग्स: मोबाइल viewport, टैब टाइटल और SEO सारांश।
<header> <nav> <main> <section> <footer>: Semantic layout that Google and screen readers understand.; Semantic लेआउट जिसे Google और screen readers समझते हैं।
.cards { display: flex; flex-wrap: wrap; }: Cards sit in a row and wrap to the next line on phones.; कार्ड एक लाइन में, और फ़ोन पर अगली लाइन में चले जाते हैं।
<script> ... addEventListener("click", ...) ...: A small interactive touch with JavaScript.; JavaScript से छोटा-सा इंटरैक्टिव फ़ीचर।

Common mistake

✗ Wrong

<img src="me.jpg">

✓ Right

<img src="me.jpg" alt="Photo of Aarav">

Always add alt text so screen readers (and Google) understand the image.

हमेशा alt टेक्स्ट लिखो ताकि screen readers (और Google) फ़ोटो को समझ सकें।

Your task

Complete the portfolio: a <title>, a <header> with <h1> + <nav>, a <section> with at least 2 .card boxes inside <main>, and a <footer>.

पोर्टफोलियो पूरा करो: <title>, <h1> + <nav> वाला <header>, <main> के अंदर कम से कम 2 .card वाला <section>, और <footer>।

Add <title>Your Name | Portfolio</title> inside <head>.
<head> के अंदर <title>Your Name | Portfolio</title> जोड़ो।
Add <header><h1>Your Name</h1><nav><a href="#skills">Skills</a></nav></header>.
<header><h1>Your Name</h1><nav><a href="#skills">Skills</a></nav></header> जोड़ो।
Inside <main> add <section id="skills"> with <div class="cards"> and two <div class="card"> items, then a <footer> before </body>.
<main> में <section id="skills"> बनाओ, उसमें <div class="cards"> और दो <div class="card">, फिर </body> से पहले <footer>।

Starter code for the task

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- TODO 1: <title>Apna Naam | Portfolio</title> likho -->
  <style>
    .cards { display: flex; gap: 10px; flex-wrap: wrap; }
    .card { padding: 12px; border: 1px solid #ccc; border-radius: 10px; }
  </style>
</head>
<body>
  <!-- TODO 2: <header> mein <h1> apna naam aur <nav> mein 2 links -->
  <main>
    <!-- TODO 3: <section> banao jisme <h2>My Skills</h2> aur .cards ke andar 2+ .card -->
  </main>
  <!-- TODO 4: <footer> mein copyright -->
</body>
</html>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

A real page = <!DOCTYPE html> + <head> (title, meta) + semantic <body>.
Use alt on images and meaningful tags for accessibility & SEO.
Publish free: Download index.html → GitHub Pages / Netlify / Firebase.

असली पेज = <!DOCTYPE html> + <head> (title, meta) + semantic <body>।
Accessibility और SEO के लिए फ़ोटो पर alt और अर्थ वाले टैग लगाओ।
मुफ़्त में लाइव करो: index.html डाउनलोड → GitHub Pages / Netlify / Firebase।

Quick quiz

Why do we write <meta name="description" content="...">?

<meta name="description" content="..."> क्यों लिखते हैं?

To change the font
To give Google a summary of the page (SEO)
To play music
To make a button

Show the answer

Answer: B (To give Google a summary of the page (SEO))

Search engines show the meta description under your page title.

सर्च इंजन आपके टाइटल के नीचे meta description दिखाते हैं।

Practice problems for this chapter

Mini Project: Raju's Chai Stall Website · Pro · Mini project
मिनी प्रोजेक्ट: Raju's Chai Stall वेबसाइट

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.