Capstone: Build & Deploy a Responsive Portfolio Site

ক্যাপস্টোন — একটি রেসপনসিভ পোর্টফোলিও সাইট তৈরি ও ডেপ্লয়

Read: ~40 min Advanced 8 capstone checkpoints Live preview runner

1. You Made It to the Capstone

Module 01 started with a simple question: what actually happens when you visit a website? Twenty-four modules later, you understand HTML's structure, CSS's box model and layout systems, responsiveness, animation, architecture, and debugging. This final module has one job: pull all of it together into one real artifact — a portfolio website — and put it on a real, shareable URL.

মডিউল ০১ শুরু হয়েছিল একটি সহজ প্রশ্ন দিয়ে: আপনি যখন একটি ওয়েবসাইট ভিজিট করেন, তখন আসলে কী ঘটে? চব্বিশটি মডিউল পরে, আপনি এখন HTML-এর গঠন, CSS-এর box model ও লেআউট সিস্টেম, রেসপনসিভনেস, অ্যানিমেশন, আর্কিটেকচার, এবং ডিবাগিং বোঝেন। এই শেষ মডিউলের একটাই কাজ: এই সবকিছুকে একত্র করে একটি বাস্তব জিনিসে রূপ দেওয়া — একটি পোর্টফোলিও ওয়েবসাইট — এবং সেটিকে একটি বাস্তব, শেয়ার-করার-যোগ্য URL-এ প্রকাশ করা।

A portfolio site is the single most useful project a beginner web developer can ship: it demonstrates your skills, it's something you can link on a resume or in a job application, and — unlike a course exercise — it's yours to keep improving forever.

2. Planning a Multi-Section Portfolio

Before writing a single tag, decide what sections your site needs. Most portfolio sites share a similar skeleton: a header with navigation, a hero introducing you, a section showcasing projects or skills, and a way to get in touch. Sketching this on paper — even as five labeled boxes — before opening an editor saves you from restructuring HTML halfway through.

একটি ট্যাগও না লিখে প্রথমে ঠিক করুন আপনার সাইটে কোন সেকশনগুলো দরকার। বেশিরভাগ পোর্টফোলিও সাইটের একটি একই ধরনের কাঠামো থাকে: নেভিগেশনসহ একটি header, আপনাকে পরিচয় করিয়ে দেওয়া একটি hero, প্রোজেক্ট বা স্কিল দেখানোর একটি সেকশন, এবং যোগাযোগের একটি উপায়। এডিটর খোলার আগেই কাগজে এটি স্কেচ করা — এমনকি পাঁচটি লেবেল করা বাক্স হিসেবেও — HTML মাঝপথে পুনর্গঠন করার ঝামেলা থেকে বাঁচায়।

Section	Purpose	বাংলায়
`<header>`	Your name/logo and navigation links to other sections.	আপনার নাম/লোগো এবং অন্য সেকশনের নেভিগেশন লিংক।
Hero	One clear sentence about who you are and what you do.	আপনি কে এবং কী করেন তার একটি স্পষ্ট বাক্য।
Projects/Skills	2-6 concrete examples of work, or a grid of skills.	কাজের ২-৬টি নির্দিষ্ট উদাহরণ, বা স্কিলের একটি গ্রিড।
Contact	A form or direct links (email, GitHub, LinkedIn).	একটি ফর্ম বা সরাসরি লিংক (ইমেইল, GitHub, LinkedIn)।
`<footer>`	Copyright line and repeated social links.	কপিরাইট লাইন ও পুনরাবৃত্ত সোশ্যাল লিংক।

Key insight এই কোর্সের চূড়ান্ত লক্ষ্য হলো এমন একটি সাইট তৈরি করা যা আপনি সত্যিকারভাবে সবাইকে দেখাতে পারবেন — একটি লাইভ লিংক দিয়ে।

The whole point of this course was never just to learn syntax — it was to reach a site you can genuinely show people, with a real live link.

3. A Semantic HTML + CSS Starter Template — Run It Live 🚀

Below is a section starter combining several concepts from across the course: a semantic <section>/<article> skeleton (Module 08), CSS variables for a mini design system (Module 20), and CSS Grid for a responsive project layout (Module 17) that collapses to one column on narrow screens (Module 18). This is a realistic starting point for your own "Projects" section.

নিচে কোর্স জুড়ে শেখা একাধিক ধারণা একত্র করে একটি সেকশন স্টার্টার দেওয়া হলো: সিম্যান্টিক <section>/<article> কাঠামো (মডিউল ০৮), একটি মিনি ডিজাইন সিস্টেমের জন্য CSS ভ্যারিয়েবল (মডিউল ২০), এবং একটি রেসপনসিভ প্রোজেক্ট লেআউটের জন্য CSS Grid (মডিউল ১৭) যা ছোট স্ক্রিনে এক কলামে পরিণত হয় (মডিউল ১৮)। এটি আপনার নিজের "Projects" সেকশনের জন্য একটি বাস্তবসম্মত শুরুর বিন্দু।

portfolio-section.html

<section class="projects" id="projects">
  <h2 class="projects__title">Selected Projects</h2>
  <div class="projects__grid">
    <article class="project-card">
      <h3 class="project-card__title">Weather Dashboard</h3>
      <p class="project-card__desc">A responsive weather app built with HTML, CSS, and a public API.</p>
      <a class="project-card__link" href="#">View Project →</a>
    </article>
    <article class="project-card project-card--featured">
      <h3 class="project-card__title">Portfolio Site</h3>
      <p class="project-card__desc">This very site — planned, built, and deployed during this course.</p>
      <a class="project-card__link" href="#">View Project →</a>
    </article>
    <article class="project-card">
      <h3 class="project-card__title">Recipe Finder</h3>
      <p class="project-card__desc">Search and filter recipes using semantic HTML and CSS Grid.</p>
      <a class="project-card__link" href="#">View Project →</a>
    </article>
  </div>
</section>

style.css

:root {
  --brand-green: #39b549;
  --ink: #0f172a;
  --muted: #4b5563;
  --radius: 10px;
  --gap: 1.2rem;
}
.projects {
  font-family: Roboto, sans-serif;
  padding: 1rem 0;
}
.projects__title {
  color: var(--ink);
  margin-bottom: 1rem;
}
.projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.project-card {
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  padding: 1.1rem;
  background: #fff;
}
.project-card__title {
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-size: 1.05rem;
}
.project-card__desc {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.project-card__link {
  color: var(--brand-green);
  font-weight: 600;
  text-decoration: none;
}
.project-card--featured {
  border-color: var(--brand-green);
  border-width: 2px;
}
@media (max-width: 640px) {
  .projects__grid { grid-template-columns: 1fr; }
}

4. Responsive Across Phone, Tablet & Desktop

A portfolio is judged the moment it opens on a phone — most first visits, especially from a resume link shared on mobile, happen there. Build mobile-first: write your base styles for a narrow screen, then layer on min-width media queries to add columns, larger type, and more whitespace as the viewport grows (Module 18). Test at three checkpoints at minimum: ~375px (phone), ~768px (tablet), and ~1280px (desktop).

একটি পোর্টফোলিও ফোনে খোলার মুহূর্তেই বিচার করা হয় — বেশিরভাগ প্রথম ভিজিট, বিশেষ করে রেজ্যুমে শেয়ার করা লিংক থেকে, মোবাইলেই হয়। Mobile-first পদ্ধতিতে বানান: প্রথমে ছোট স্ক্রিনের জন্য বেস স্টাইল লিখুন, তারপর viewport বড় হওয়ার সাথে সাথে কলাম, বড় টাইপ, ও বেশি whitespace যোগ করতে min-width মিডিয়া কোয়েরি যুক্ত করুন (মডিউল ১৮)। অন্তত তিনটি চেকপয়েন্টে পরীক্ষা করুন: ~375px (ফোন), ~768px (ট্যাবলেট), ~1280px (ডেস্কটপ)।

~375px Phone
Single column, stacked nav, large tap targets.

~768px Tablet
Two-column project grid, horizontal nav begins.

~1280px Desktop
Full multi-column grid, generous margins.

5. Free Static Hosting with GitHub Pages

Your finished site needs a home on the internet — GitHub Pages hosts static HTML/CSS sites for free, directly from a GitHub repository, with zero server setup. The steps below take you from local files to a real public URL.

আপনার সম্পূর্ণ সাইটটির ইন্টারনেটে একটি ঠিকানা দরকার — GitHub Pages বিনামূল্যে স্ট্যাটিক HTML/CSS সাইট হোস্ট করে, সরাসরি একটি GitHub রিপোজিটরি থেকে, কোনো সার্ভার সেটআপ ছাড়াই। নিচের ধাপগুলো আপনাকে লোকাল ফাইল থেকে একটি বাস্তব পাবলিক URL পর্যন্ত নিয়ে যাবে।

Step	What to do	বাংলায়
1	Create a free GitHub account and a new public repository, e.g. `my-portfolio`.	একটি বিনামূল্যে GitHub অ্যাকাউন্ট ও একটি নতুন পাবলিক রিপোজিটরি তৈরি করুন, যেমন `my-portfolio`।
2	Push your `index.html`, CSS, and asset files to that repository's `main` branch.	আপনার `index.html`, CSS, ও অ্যাসেট ফাইল সেই রিপোজিটরির `main` ব্রাঞ্চে push করুন।
3	In the repo, go to Settings → Pages.	রিপোতে গিয়ে Settings → Pages-এ যান।
4	Under "Build and deployment," set source to Deploy from a branch, pick `main` and the `/ (root)` folder, then Save.	"Build and deployment"-এর নিচে source-কে Deploy from a branch করুন, `main` ও `/ (root)` ফোল্ডার বেছে নিন, তারপর Save করুন।
5	Wait about a minute, then refresh the Pages settings — your live URL appears: `https://username.github.io/repo-name`.	প্রায় এক মিনিট অপেক্ষা করুন, তারপর Pages settings রিফ্রেশ করুন — আপনার লাইভ URL দেখা যাবে: `https://username.github.io/repo-name`।

Naming detail Your entry file must be named exactly index.html at the repository root — that's the file GitHub Pages loads by default at your site's base URL.

আপনার এন্ট্রি ফাইলের নাম রিপোজিটরির root-এ ঠিক index.html হতে হবে — GitHub Pages ডিফল্টভাবে আপনার সাইটের base URL-এ এই ফাইলটিই লোড করে।

6. Sharing Your Live Link

Once live, put the link everywhere that matters: your resume, your LinkedIn/GitHub profile, and any job application. A live portfolio link, built and shipped entirely by you, tells an employer far more than a bullet point ever could.

একবার লাইভ হয়ে গেলে, লিংকটি এমন সব জায়গায় দিন যেখানে গুরুত্বপূর্ণ: আপনার রেজ্যুমে, LinkedIn/GitHub প্রোফাইল, এবং যেকোনো চাকরির আবেদন। সম্পূর্ণভাবে আপনার নিজের হাতে তৈরি ও প্রকাশিত একটি লাইভ পোর্টফোলিও লিংক, একটি bullet point-এর চেয়ে অনেক বেশি কিছু একজন নিয়োগকর্তাকে জানায়।

Keep shipping A portfolio is never "done" — add a project every time you finish one. The habit of shipping small, regular updates is worth more than waiting for a perfect version that never arrives.

একটি পোর্টফোলিও কখনো "সম্পূর্ণ" হয় না — প্রতিবার একটি প্রোজেক্ট শেষ করলে সেটি যোগ করুন। ছোট, নিয়মিত আপডেট প্রকাশ করার অভ্যাস, কখনো না আসা একটি নিখুঁত সংস্করণের অপেক্ষা করার চেয়ে অনেক বেশি মূল্যবান।

7. Capstone Checkpoints

This isn't a quiz — it's a build guide. Work through all 8 checkpoints in order to go from a blank folder to a live, deployed portfolio site. Each checkpoint has a Show Answer with either a runnable snippet or clear written steps.

এটি কোনো কুইজ নয় — এটি একটি বিল্ড গাইড। একটি খালি ফোল্ডার থেকে একটি লাইভ, ডেপ্লয় করা পোর্টফোলিও সাইট পর্যন্ত পৌঁছাতে ৮টি চেকপয়েন্ট ধারাবাহিকভাবে সম্পন্ন করুন। প্রতিটি চেকপয়েন্টে একটি Show Answer রয়েছে, হয় একটি চালু-করার-যোগ্য কোড স্নিপেট বা স্পষ্ট লিখিত ধাপসহ।

Checkpoint 1 — On paper (or in a notes app), sketch the sections your portfolio will have and the order they'll appear in.

চেকপয়েন্ট ১ — কাগজে (বা নোটস অ্যাপে) স্কেচ করুন আপনার পোর্টফোলিওতে কোন সেকশনগুলো থাকবে এবং তারা কোন ক্রমে দেখা যাবে।

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

Suggested order: 1) Header with name + nav, 2) Hero with a one-sentence intro, 3) About/Skills, 4) Projects grid, 5) Contact form, 6) Footer with social links. Write each as a labeled box with a rough height — you don't need exact pixels, just the order and roughly how much space each needs.

প্রস্তাবিত ক্রম: ১) নাম + নেভিগেশনসহ header, ২) এক-বাক্যের পরিচয়সহ hero, ৩) About/Skills, ৪) Projects গ্রিড, ৫) Contact form, ৬) সোশ্যাল লিংকসহ footer। প্রতিটিকে একটি লেবেল করা বাক্স হিসেবে লিখুন, আনুমানিক উচ্চতাসহ — নিখুঁত পিক্সেলের দরকার নেই, শুধু ক্রম এবং কতটা জায়গা লাগবে তা মোটামুটি জানলেই চলবে।
Checkpoint 2 — Write the semantic HTML skeleton for the whole page (no styling yet) using proper landmark elements from Module 08.

চেকপয়েন্ট ২ — মডিউল ০৮ থেকে শেখা সঠিক landmark এলিমেন্ট ব্যবহার করে পুরো পেজের সিম্যান্টিক HTML কাঠামো লিখুন (এখনো স্টাইলিং ছাড়া)।
✨ Show Answer (উত্তর দেখুন)
skeleton.html
```
<body>
  <header>
    <h1>Rahim Uddin</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="hero"></section>
    <section id="about"></section>
    <section id="projects"></section>
    <section id="contact"></section>
  </main>

  <footer></footer>
</body>
```

Checkpoint 3 — Build the header and navigation, styled with Flexbox so the name sits left and the nav links sit right.

চেকপয়েন্ট ৩ — header ও navigation বানান, Flexbox দিয়ে স্টাইল করা যাতে নাম বামে ও নেভিগেশন লিংক ডানে বসে।

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

header.html

<header class="site-header">
  <p class="site-header__name">Rahim Uddin</p>
  <nav class="site-header__nav">
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

style.css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  font-family: Roboto, sans-serif;
}
.site-header__name { font-weight: 700; margin: 0; }
.site-header__nav { display: flex; gap: 1.2rem; }
.site-header__nav a { text-decoration: none; color: #1a1a1a; }

Checkpoint 4 — Build the hero section: your name, a one-sentence description of what you do, and a call-to-action button linking to your projects.

চেকপয়েন্ট ৪ — hero সেকশন বানান: আপনার নাম, আপনি কী করেন তার এক-বাক্যের বর্ণনা, এবং projects-এ যাওয়ার একটি call-to-action বাটন।

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

hero.html

<section class="hero" id="hero">
  <h2 class="hero__title">Hi, I'm Rahim Uddin</h2>
  <p class="hero__subtitle">I build simple, fast websites with HTML, CSS, and a lot of care.</p>
  <a class="hero__cta" href="#projects">See My Work</a>
</section>

style.css

.hero {
  text-align: center;
  padding: 3rem 1.5rem;
  font-family: Roboto, sans-serif;
}
.hero__title { font-size: 2rem; margin-bottom: 0.6rem; }
.hero__subtitle { color: #4b5563; margin-bottom: 1.2rem; }
.hero__cta {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: #39b549;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

Checkpoint 5 — Build the Projects section as a responsive grid (reuse the pattern from section 3 of this lesson), showing at least 3 projects or skills.

চেকপয়েন্ট ৫ — Projects সেকশনটি একটি রেসপনসিভ গ্রিড হিসেবে বানান (এই লেসনের সেকশন ৩-এর প্যাটার্ন পুনর্ব্যবহার করুন), অন্তত ৩টি প্রোজেক্ট বা স্কিল দেখিয়ে।

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

Answer: Reuse the exact .projects / .projects__grid / .project-card pattern from section 3 above — copy the HTML and CSS, then swap in your own project titles, descriptions, and links. The @media (max-width: 640px) rule already makes it collapse to one column on phones.

উপরের সেকশন ৩-এর ঠিক .projects / .projects__grid / .project-card প্যাটার্নটি পুনর্ব্যবহার করুন — HTML ও CSS কপি করুন, তারপর নিজের প্রোজেক্টের নাম, বর্ণনা, ও লিংক বসান। @media (max-width: 640px) নিয়মটি ইতিমধ্যেই ফোনে এক কলামে পরিণত হওয়া নিশ্চিত করে।

Checkpoint 6 — Build a contact form reusing Module 24's patterns: labeled fields, a submit button, and visible focus states.

চেকপয়েন্ট ৬ — মডিউল ২৪-এর প্যাটার্ন পুনর্ব্যবহার করে একটি contact form বানান: লেবেল-সহ ফিল্ড, একটি submit বাটন, ও দৃশ্যমান focus state।

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

contact.html

<section class="contact" id="contact">
  <h2>Get In Touch</h2>
  <form class="contact__form">
    <div class="contact__field">
      <label for="c-email">Email</label>
      <input type="email" id="c-email" name="email" required>
    </div>
    <div class="contact__field">
      <label for="c-msg">Message</label>
      <textarea id="c-msg" name="message" rows="4" required></textarea>
    </div>
    <button type="submit">Send</button>
  </form>
</section>

style.css

.contact__form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; }
.contact__field { display: flex; flex-direction: column; gap: 0.4rem; }
.contact__field input,
.contact__field textarea {
  padding: 0.6rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
}
.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: #39b549;
  box-shadow: 0 0 0 3px rgba(57,181,73,0.2);
}
.contact__form button {
  padding: 0.7rem 1.2rem;
  background: #39b549;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

Checkpoint 7 — Add media queries so the whole page reflows cleanly at ~768px and ~480px, and test it at all three checkpoint widths from section 4.

চেকপয়েন্ট ৭ — এমন মিডিয়া কোয়েরি যোগ করুন যাতে পুরো পেজ ~768px ও ~480px-এ পরিষ্কারভাবে reflow করে, এবং সেকশন ৪-এর তিনটি চেকপয়েন্ট প্রস্থেই পরীক্ষা করুন।
✨ Show Answer (উত্তর দেখুন)
responsive.html
```
<p>Resize the preview pane (or your real browser) to see this rule apply.</p>
```
style.css
```
.site-header__nav { flex-wrap: wrap; }
@media (max-width: 768px) {
  .projects__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .site-header { flex-direction: column; gap: 0.6rem; }
  .projects__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 1.5rem; }
}
```
Checkpoint 8 — Deploy your finished site to GitHub Pages and get your live URL.

চেকপয়েন্ট ৮ — আপনার সম্পূর্ণ সাইটটি GitHub Pages-এ ডেপ্লয় করুন এবং আপনার লাইভ URL পান।
✨ Show Answer (উত্তর দেখুন)
Steps:
1. Create a free GitHub account if you don't have one, and a new public repository (e.g. my-portfolio).
2. Push your finished index.html and any CSS/image files to the repository's main branch.
3. Open the repository, go to Settings → Pages.
4. Set source to Deploy from a branch, choose main and / (root), then Save.
5. Wait about a minute, refresh the Pages settings page, and copy your live URL: https://username.github.io/repo-name.
6. Open that URL in a new tab to confirm your portfolio is really live — then share it.
ধাপগুলো: ১) একটি বিনামূল্যে GitHub অ্যাকাউন্ট (না থাকলে) ও একটি নতুন পাবলিক রিপোজিটরি তৈরি করুন (যেমন my-portfolio)। ২) আপনার সম্পূর্ণ index.html ও CSS/ইমেজ ফাইল রিপোজিটরির main ব্রাঞ্চে push করুন। ৩) রিপোজিটরি খুলে Settings → Pages-এ যান। ৪) source-কে Deploy from a branch করুন, main ও / (root) বেছে নিন, Save করুন। ৫) প্রায় এক মিনিট অপেক্ষা করে Pages settings রিফ্রেশ করুন এবং আপনার লাইভ URL কপি করুন: https://username.github.io/repo-name। ৬) সেই URL একটি নতুন ট্যাবে খুলে নিশ্চিত করুন আপনার পোর্টফোলিও সত্যিই লাইভ — তারপর সেটি শেয়ার করুন।

Course Complete — Congratulations!

You started at Module 01 learning what a browser and a server actually do. You now know how to structure content with semantic HTML, style and lay it out with the full power of modern CSS — Flexbox, Grid, responsive design, animation — debug it like a professional with DevTools, and organize a real stylesheet so it stays maintainable. And in this final module, you took all of that and shipped it to a real, live URL that anyone on Earth can open. That is genuinely the hardest and most important part of learning web development — most people never finish and ship. You did.

আপনি শুরু করেছিলেন মডিউল ০১ থেকে, একটি ব্রাউজার ও সার্ভার আসলে কী করে তা শিখে। এখন আপনি জানেন কীভাবে সিম্যান্টিক HTML দিয়ে কনটেন্ট গঠন করতে হয়, আধুনিক CSS-এর পূর্ণ ক্ষমতা দিয়ে — Flexbox, Grid, রেসপনসিভ ডিজাইন, অ্যানিমেশন — সেটি স্টাইল ও লেআউট করতে হয়, DevTools দিয়ে পেশাদারের মতো ডিবাগ করতে হয়, এবং একটি বাস্তব stylesheet-কে এমনভাবে গোছাতে হয় যাতে সেটি মেইনটেইনেবল থাকে। আর এই শেষ মডিউলে, আপনি এই সবকিছু একত্র করে একটি বাস্তব, লাইভ URL-এ প্রকাশ করেছেন, যা পৃথিবীর যে কেউ খুলতে পারে। এটিই আসলে ওয়েব ডেভেলপমেন্ট শেখার সবচেয়ে কঠিন ও গুরুত্বপূর্ণ অংশ — বেশিরভাগ মানুষ কখনো শেষ করে প্রকাশ করে না। আপনি করেছেন।

You're done with this course. Now go build something real — এখন সত্যিকারের কিছু তৈরি করুন।

Previous: Forms Styling & UX Polish Explore More Courses