Milestone: Build a Static Multi-Section Page Milestone

মাইলস্টোন — একটি সম্পূর্ণ স্ট্যাটিক পেজ

Read: ~25 min Medium 6 practice problems Live preview runner

1. Why This Module Is Different

You've now met the building blocks of HTML: text and semantic tags, links, images and media, lists and tables, forms, semantic HTML5 layout, and accessibility. A milestone module doesn't teach a new tag — it asks you to combine everything you already know into one real, working page. This is where scattered knowledge turns into an actual skill.

আপনি ইতিমধ্যে HTML-এর মূল বিষয়গুলো শিখেছেন — টেক্সট ও সিমান্টিক ট্যাগ, লিংক, ছবি ও মিডিয়া, লিস্ট ও টেবিল, ফর্ম, সিমান্টিক HTML5 লেআউট এবং অ্যাক্সেসিবিলিটি। একটি মাইলস্টোন মডিউল নতুন কোনো ট্যাগ শেখায় না — বরং এটি আপনাকে এখন পর্যন্ত শেখা সবকিছু একসাথে একটি বাস্তব পেজে প্রয়োগ করতে বলে। এখানেই বিক্ষিপ্ত জ্ঞান একটি প্রকৃত দক্ষতায় রূপান্তরিত হয়।

By the end of this module you will have built — piece by piece — one cohesive static page: a header with navigation, a hero section, a content section with a list or table, an image gallery, and a footer with links. No CSS yet — that begins in Phase 4. The goal here is a page that is correct, meaningful, and complete before it is ever made beautiful.

এই মডিউল শেষে আপনি ধাপে ধাপে একটি সম্পূর্ণ পেজ তৈরি করবেন — নেভিগেশনসহ header, একটি hero section, একটি লিস্ট বা টেবিলসহ content section, একটি image gallery এবং লিংকসহ footer। এখনো কোনো CSS নেই — সেটি শুরু হবে Phase 4 থেকে। এখানে লক্ষ্য হলো এমন একটি পেজ যা সুন্দর হওয়ার আগেই সঠিক, অর্থবহ এবং সম্পূর্ণ।

2. Step Zero: Plan Before You Type

Every real page starts as a sketch, not code. Before writing a single tag, decide: what sections does this page need, in what order, and what does each section contain? For our milestone project we'll build a one-page personal/portfolio-style site with five sections: header+nav, hero, about/skills content, project gallery, and footer.

প্রতিটি বাস্তব পেজ শুরু হয় একটি স্কেচ দিয়ে, কোড দিয়ে নয়। একটি ট্যাগও না লিখে আগে ঠিক করুন — এই পেজে কোন কোন সেকশন দরকার, কোন ক্রমে, এবং প্রতিটি সেকশনে কী থাকবে। আমাদের মাইলস্টোন প্রজেক্টের জন্য আমরা একটি এক-পাতার পোর্টফোলিও-ধরনের সাইট বানাবো পাঁচটি সেকশন নিয়ে — header+nav, hero, about/skills কনটেন্ট, প্রজেক্ট গ্যালারি, এবং footer।

Figure 10.1 — একটি সম্পূর্ণ পেজের কাঠামো পরিকল্পনা।

3. The Semantic Skeleton

Recall from Module 08 that <header>, <nav>, <main>, <section>, and <footer> describe the role of each region of the page, not its appearance. A skeleton built from these tags is readable by screen readers, search engines, and other developers before a single line of CSS exists.

মনে করুন Module 08-এর কথা — <header>, <nav>, <main>, <section>, এবং <footer> পেজের প্রতিটি অংশের ভূমিকা বর্ণনা করে, চেহারা নয়। এই ট্যাগ দিয়ে বানানো স্কেলিটন কোনো CSS ছাড়াই স্ক্রিন রিডার, সার্চ ইঞ্জিন ও অন্য ডেভেলপারদের কাছে বোধগম্য।

skeleton.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rima Akter — Front-End Developer</title>
</head>
<body>
  <header>
    <!-- logo + nav goes here -->
  </header>

  <main>
    <section id="hero"><!-- hero content --></section>
    <section id="about"><!-- about + skills --></section>
    <section id="projects"><!-- gallery --></section>
  </main>

  <footer>
    <!-- footer links -->
  </footer>
</body>
</html>

4. Real Content, Real Links, Real Images

An empty skeleton isn't a page. Every section needs real, meaningful content: actual sentences (not "lorem ipsum" placeholder text, though that's fine to prototype with), working <a href> links that go somewhere sensible, and <img> tags with descriptive alt text. Broken or fake links and images with empty alt="" are the two most common mistakes learners ship in a "finished" project.

খালি স্কেলিটন কোনো পেজ নয়। প্রতিটি সেকশনে দরকার বাস্তব, অর্থবহ কনটেন্ট — সত্যিকারের বাক্য (প্রোটোটাইপের জন্য "lorem ipsum" চলতে পারে, তবে ফাইনালে নয়), যেসব <a href> লিংক সত্যিই কোথাও নিয়ে যায়, এবং বর্ণনামূলক alt টেক্সটসহ <img> ট্যাগ। ভাঙা বা ভুয়া লিংক এবং খালি alt=""-যুক্ত ছবি — শিক্ষার্থীদের "সম্পূর্ণ" প্রজেক্টে সবচেয়ে বেশি দেখা দুটি ভুল।

Common Mistake — সাধারণ ভুল Using href="#" everywhere and calling it done. Real navigation should point to real anchors (href="#projects") or real pages — never a dead link left "for later."

সব জায়গায় href="#" ব্যবহার করে কাজ শেষ ভাবা। প্রকৃত নেভিগেশন সত্যিকারের anchor (href="#projects") বা সত্যিকারের পেজে যাওয়া উচিত — কখনোই "পরে করবো" বলে মৃত লিংক রাখা উচিত নয়।

5. Validate Your HTML

Before calling any page "done," run it through the W3C Markup Validator. It catches unclosed tags, missing alt attributes, duplicate id values, and invalid nesting — mistakes browsers silently "fix" for you, which means you never notice them until something breaks unexpectedly.

কোনো পেজকে "শেষ" বলার আগে সেটিকে W3C Markup Validator-এ চালিয়ে দেখুন। এটি অসম্পূর্ণ ট্যাগ, অনুপস্থিত alt অ্যাট্রিবিউট, ডুপ্লিকেট id, এবং ভুল nesting ধরে ফেলে — এমন ভুল যা ব্রাউজার নিজে থেকেই নীরবে "ঠিক করে দেয়", ফলে হঠাৎ কিছু ভেঙে না যাওয়া পর্যন্ত আপনি সেগুলো খেয়ালই করেন না।

Key insight Valid HTML isn't bureaucracy — it's a safety net. A page that validates cleanly behaves predictably across every browser and every future CSS rule you add.

বৈধ (valid) HTML কোনো আমলাতান্ত্রিক নিয়ম নয় — এটি একটি নিরাপত্তা জাল। যে পেজ ভালোভাবে validate হয়, তা প্রতিটি ব্রাউজারে এবং ভবিষ্যতে যোগ করা প্রতিটি CSS নিয়মে predictably আচরণ করে।

6. Ship-It Checklist (শিপ করার আগে চেকলিস্ট)

Check	Why it matters	বাংলায়
Exactly one `<h1>`	Defines the single main heading for the page.	পেজের একমাত্র প্রধান heading নির্ধারণ করে।
Every `<img>` has meaningful `alt`	Accessibility & SEO.	অ্যাক্সেসিবিলিটি ও SEO-এর জন্য জরুরি।
Nav links resolve (no dead `#`)	Working navigation is the point of nav.	কাজ করা নেভিগেশনই এর মূল উদ্দেশ্য।
Landmarks used correctly	`header`/`nav`/`main`/`footer` each appear once (per Module 08/09).	প্রতিটি landmark একবার করে ব্যবহৃত হয়েছে।
Table/list used where data is tabular/listy	Not for visual layout — for real structured data.	ভিজ্যুয়াল লেআউটের জন্য নয় — প্রকৃত গঠিত ডেটার জন্য।
Validator shows 0 errors	Catches typos and structural mistakes early.	টাইপো ও কাঠামোগত ভুল আগেভাগে ধরে।

7. Guided Build — Checkpoints

This milestone's "practice" is one continuous build. Complete each checkpoint in order — each one adds a section to the same page. Try building it yourself first, then click Show Answer to check your work and run it live.

এই মাইলস্টোনের "প্র্যাকটিস" আসলে একটি একটানা বিল্ড। প্রতিটি চেকপয়েন্ট ক্রমানুসারে সম্পন্ন করুন — প্রতিটি একই পেজে একটি নতুন সেকশন যোগ করে। প্রথমে নিজে বানানোর চেষ্টা করুন, তারপর Show Answer-এ ক্লিক করে মিলিয়ে নিন এবং লাইভ চালিয়ে দেখুন।

Checkpoint 1 — Build the <header> with a logo/site name and a <nav> containing 3 links to page sections (#hero, #about, #projects).

চেকপয়েন্ট ১ — একটি site name/logo সহ <header> এবং তিনটি সেকশন-লিংক (#hero, #about, #projects) সহ <nav> তৈরি করুন।
✨ Show Answer (উত্তর দেখুন)
step1.html
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Rima Akter</title></head>
<body>
  <header>
    <p><strong>Rima Akter</strong></p>
    <nav>
      <a href="#hero">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
    </nav>
  </header>
</body>
</html>
```

Checkpoint 2 — Add a hero <section id="hero"> inside <main> with an <h1>, one intro paragraph, and a call-to-action link to #projects.

চেকপয়েন্ট ২ — <main>-এর ভেতর <section id="hero"> যোগ করুন, যাতে থাকবে একটি <h1>, একটি ভূমিকা paragraph, এবং #projects-এ যাওয়ার একটি CTA লিংক।

✨ Show Answer (উত্তর দেখুন)

step2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Rima Akter</title></head>
<body>
  <header>
    <p><strong>Rima Akter</strong></p>
    <nav>
      <a href="#hero">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
    </nav>
  </header>

  <main>
    <section id="hero">
      <h1>Hi, I'm Rima — a front-end developer.</h1>
      <p>I build clean, accessible web pages with HTML and CSS.</p>
      <a href="#projects">See my work &rarr;</a>
    </section>
  </main>
</body>
</html>

Checkpoint 3 — Add an <section id="about"> with a heading, a short bio paragraph, and an unordered list of 4 skills.

চেকপয়েন্ট ৩ — একটি heading, একটি সংক্ষিপ্ত bio paragraph, এবং ৪টি স্কিলের একটি unordered list সহ <section id="about"> যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
step3.html
```
<section id="about">
  <h2>About Me</h2>
  <p>I'm a self-taught developer from Dhaka, learning to build the web one module at a time.</p>
  <ul>
    <li>HTML5 & semantic markup</li>
    <li>CSS layout basics</li>
    <li>Accessible forms</li>
    <li>Responsive images</li>
  </ul>
</section>
```

Checkpoint 4 — Add a <section id="projects"> with 3 <figure> elements, each containing an <img> with descriptive alt text and a <figcaption>.

চেকপয়েন্ট ৪ — ৩টি <figure> এলিমেন্টসহ <section id="projects"> যোগ করুন, প্রতিটিতে বর্ণনামূলক alt টেক্সটসহ <img> এবং একটি <figcaption> থাকবে।

✨ Show Answer (উত্তর দেখুন)

step4.html

<section id="projects">
  <h2>Projects</h2>
  <figure>
    <img src="https://via.placeholder.com/200x120" alt="Screenshot of a to-do list web app">
    <figcaption>To-Do List App</figcaption>
  </figure>
  <figure>
    <img src="https://via.placeholder.com/200x120" alt="Screenshot of a recipe finder website">
    <figcaption>Recipe Finder</figcaption>
  </figure>
  <figure>
    <img src="https://via.placeholder.com/200x120" alt="Screenshot of a weather dashboard">
    <figcaption>Weather Dashboard</figcaption>
  </figure>
</section>

Checkpoint 5 — Add a <footer> with a copyright line and 2 real contact links (mailto: and a social profile).

চেকপয়েন্ট ৫ — একটি কপিরাইট লাইন এবং ২টি সত্যিকারের যোগাযোগ লিংক (mailto: এবং একটি সোশ্যাল প্রোফাইল) সহ <footer> যোগ করুন।
✨ Show Answer (উত্তর দেখুন)
step5.html
```
<footer>
  <p>&copy; 2026 Rima Akter. All rights reserved.</p>
  <p>
    <a href="mailto:rima@example.com">Email me</a> ·
    <a href="https://github.com/example" target="_blank" rel="noopener">GitHub</a>
  </p>
</footer>
```

Checkpoint 6 — Assemble all five pieces into one complete, valid HTML document and describe in one sentence how you would validate it.

চেকপয়েন্ট ৬ — পাঁচটি অংশ একত্র করে একটি সম্পূর্ণ, বৈধ HTML ডকুমেন্ট বানান এবং এক বাক্যে বলুন আপনি কীভাবে এটি validate করবেন।

✨ Show Answer (উত্তর দেখুন)

full-page.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rima Akter — Front-End Developer</title>
</head>
<body>
  <header>
    <p><strong>Rima Akter</strong></p>
    <nav>
      <a href="#hero">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
    </nav>
  </header>

  <main>
    <section id="hero">
      <h1>Hi, I'm Rima — a front-end developer.</h1>
      <p>I build clean, accessible web pages with HTML and CSS.</p>
      <a href="#projects">See my work &rarr;</a>
    </section>

    <section id="about">
      <h2>About Me</h2>
      <p>I'm a self-taught developer from Dhaka, learning to build the web one module at a time.</p>
      <ul>
        <li>HTML5 & semantic markup</li>
        <li>CSS layout basics</li>
        <li>Accessible forms</li>
        <li>Responsive images</li>
      </ul>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <figure>
        <img src="https://via.placeholder.com/200x120" alt="Screenshot of a to-do list web app">
        <figcaption>To-Do List App</figcaption>
      </figure>
      <figure>
        <img src="https://via.placeholder.com/200x120" alt="Screenshot of a recipe finder website">
        <figcaption>Recipe Finder</figcaption>
      </figure>
      <figure>
        <img src="https://via.placeholder.com/200x120" alt="Screenshot of a weather dashboard">
        <figcaption>Weather Dashboard</figcaption>
      </figure>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Rima Akter. All rights reserved.</p>
    <p>
      <a href="mailto:rima@example.com">Email me</a> ·
      <a href="https://github.com/example" target="_blank" rel="noopener">GitHub</a>
    </p>
  </footer>
</body>
</html>

Answer: Paste the full document into the W3C Markup Validator (validator.w3.org) and fix any reported errors before considering the page done.

পুরো ডকুমেন্টটি W3C Markup Validator (validator.w3.org)-এ পেস্ট করুন এবং পেজটিকে সম্পূর্ণ ধরার আগে যেকোনো রিপোর্ট করা ভুল ঠিক করুন।

Summary — Module 10

A real page is built by planning its sections first, then filling a semantic skeleton (header/nav/main/section/footer) with real content, real links, and real images — and validating it before calling it finished. No CSS was needed to make this page correct; correctness always comes before appearance.

একটি বাস্তব পেজ তৈরি হয় প্রথমে সেকশন পরিকল্পনা করে, তারপর একটি সিমান্টিক স্কেলিটন (header/nav/main/section/footer) বাস্তব কনটেন্ট, বাস্তব লিংক ও বাস্তব ছবি দিয়ে পূরণ করে — এবং শেষ ধরার আগে validate করে। এই পেজকে সঠিক বানাতে কোনো CSS দরকার হয়নি; সঠিকতা সবসময় চেহারার আগে আসে।

Next Module → Introducing CSS: Syntax, Selectors & Specificity — এখন থেকে আমরা এই একই পেজকে দৃষ্টিনন্দন করতে CSS শিখবো।

Previous: Accessibility Fundamentals (a11y) Next: Introducing CSS: Syntax, Selectors & Specificity