BrounStack
Learning›CSS Tutorial›Mini Project
CHAPTER 14 · FINAL PROJECT

CSS Mini Project — Responsive Learning Profile

Ab tak jo CSS concepts seekhe hain unko ek real mini project me combine karenge. Hum ek simple HTML Learning Profile ko modern, responsive aur accessible interface me style karenge.

English + Hinglish35 min buildFinal project
Course milestone: Ye CSS course ka final chapter hai. Project complete karne ke baad tum selectors, box model, typography, Flexbox, Grid, responsive design, motion aur maintainable CSS ko ek saath apply kar chuke hoge.

Project goal

Build a responsive Learning Profile page with a header, hero, skills, learning progress, notes, call-to-action and contact form. The final layout should work from narrow mobile screens to wider desktops without horizontal overflow.

Hinglish Explanation

Goal sirf design copy karna nahi hai. Har section me decide karo ki kaunsa CSS concept best fit hai: spacing ke liye box model, cards ke liye Grid, nav/actions ke liye Flexbox, aur responsive behavior ke liye fluid sizing + media queries.

Suggested HTML structure

Apne existing HTML Learning Profile ko reusable classes do. Example structure:

profile.htmlHTML
<header class="profile-header">...</header>
<main class="profile-main">
  <section class="hero">...</section>
  <section class="section">
    <div class="skills-grid">
      <article class="skill-card">HTML</article>
      <article class="skill-card">CSS</article>
    </div>
  </section>
  <section class="section progress-section">...</section>
  <section class="section notes-section">...</section>
  <section class="section contact-section">...</section>
</main>

Step 1 — Design tokens

Start with a small set of reusable custom properties for colors, spacing and radius.

styles.cssCSS
:root {
  --brand: #0b7cff;
  --brand-dark: #075fd1;
  --ink: #0f172a;
  --muted: #64748b;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #dbe4f0;
  --radius: 1rem;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  --page: 72rem;
}

Step 2 — Reset and baseline

styles.cssCSS
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-soft);
}

img {
  max-width: 100%;
  height: auto;
}
Why? border-box sizing ko predictable rakhta hai, system font stack fast fallback deta hai, aur responsive image baseline overflow reduce karta hai.

Step 3 — Fluid page container

styles.cssCSS
.profile-main,
.profile-header__inner {
  width: min(100% - 2rem, var(--page));
  margin-inline: auto;
}

Is pattern se small screens par side spacing rahegi aur large screens par content unlimited stretch nahi hoga.

styles.cssCSS
.profile-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
}

.profile-header__inner {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.profile-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

Step 5 — Hero section

styles.cssCSS
.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.hero h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: 1.05;
}

.hero p {
  max-width: 60ch;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

Step 6 — Reusable buttons

styles.cssCSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: var(--brand);
  color: white;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.button:hover,
.button:focus-visible {
  background: var(--brand-dark);
  transform: translateY(-2px);
}

.button--secondary {
  background: white;
  color: var(--ink);
  border-color: var(--line);
}

Step 7 — Shared section styling

styles.cssCSS
.section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.section-heading {
  margin-bottom: 1.5rem;
}

.section-heading h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.section-heading p {
  margin: 0;
  color: var(--muted);
}

Step 8 — Skills with responsive Grid

styles.cssCSS
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.skill-card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.skill-card h3 {
  margin-top: 0;
}
Grid benefit

auto-fit + minmax() ki wajah se card count available width ke hisaab se automatically change ho sakti hai. Har width par alag media query zaroori nahi.

Step 9 — Progress area

Table ya progress list ko readable card container me rakho.

styles.cssCSS
.progress-card {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.progress-table {
  width: 100%;
  border-collapse: collapse;
}

.progress-table th,
.progress-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.progress-table th {
  background: #eef6ff;
}

Step 10 — Notes cards

styles.cssCSS
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.note-card {
  padding: 1.25rem;
  border-left: 4px solid var(--brand);
  border-radius: 0.75rem;
  background: var(--surface);
}

Step 11 — Contact form

styles.cssCSS
.contact-form {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
}

.form-row {
  display: grid;
  gap: 0.4rem;
}

.form-row label {
  font-weight: 700;
}

.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid #b8c5d6;
  border-radius: 0.7rem;
  font: inherit;
  background: white;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible,
.form-row select:focus-visible {
  outline: 3px solid rgba(11, 124, 255, 0.25);
  border-color: var(--brand);
}

Step 12 — Wider-screen layout

styles.cssCSS
@media (min-width: 48rem) {
  .hero {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .profile-summary {
    justify-self: end;
    max-width: 24rem;
  }
}

Breakpoint ko device name se nahi, layout need se choose karo. Agar content earlier ya later cramped lagta hai to breakpoint adjust karo.

Step 13 — Subtle motion

styles.cssCSS
.skill-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.skill-card:hover,
.skill-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

Step 14 — Reduced motion

styles.cssCSS
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Complete CSS

Final stylesheet ko sections me organize karo: tokens → baseline → layout → components → responsive rules → preferences. Neeche project ka compact complete version hai.

styles.cssCSS
:root {
  --brand:#0b7cff;
  --brand-dark:#075fd1;
  --ink:#0f172a;
  --muted:#64748b;
  --surface:#fff;
  --surface-soft:#f8fafc;
  --line:#dbe4f0;
  --radius:1rem;
  --shadow:0 18px 50px rgba(15,23,42,.10);
  --page:72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;color:var(--ink);background:var(--surface-soft)}
img{max-width:100%;height:auto}
.profile-main,.profile-header__inner{width:min(100% - 2rem,var(--page));margin-inline:auto}
.profile-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.profile-header__inner{min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.profile-nav,.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero{display:grid;gap:2rem;align-items:center;padding-block:clamp(3rem,8vw,7rem)}
.hero h1{margin:0;max-width:12ch;font-size:clamp(2.25rem,7vw,4.75rem);line-height:1.05}
.hero p{max-width:60ch;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.7rem 1rem;border:1px solid transparent;border-radius:.75rem;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;transition:transform 160ms ease,background-color 160ms ease}
.button:hover,.button:focus-visible{background:var(--brand-dark);transform:translateY(-2px)}
.button--secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.section{padding-block:clamp(2.5rem,6vw,5rem)}
.section-heading{margin-bottom:1.5rem}.section-heading h2{margin:0 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem)}.section-heading p{margin:0;color:var(--muted)}
.skills-grid,.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.skill-card,.note-card{padding:1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.skill-card{transition:transform 180ms ease,box-shadow 180ms ease}.skill-card:hover,.skill-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow)}
.note-card{border-left:4px solid var(--brand)}
.progress-card{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.progress-table{width:100%;border-collapse:collapse}.progress-table th,.progress-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--line)}.progress-table th{background:#eef6ff}
.contact-form{display:grid;gap:1rem;max-width:42rem}.form-row{display:grid;gap:.4rem}.form-row label{font-weight:700}.form-row input,.form-row textarea,.form-row select{width:100%;padding:.8rem .9rem;border:1px solid #b8c5d6;border-radius:.7rem;font:inherit;background:#fff}.form-row input:focus-visible,.form-row textarea:focus-visible,.form-row select:focus-visible{outline:3px solid rgba(11,124,255,.25);border-color:var(--brand)}
@media (min-width:48rem){.hero{grid-template-columns:1.2fr .8fr}.profile-summary{justify-self:end;max-width:24rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

Final testing checklist

  • 320px ke aas-paas narrow viewport par horizontal overflow check karo.
  • Viewport ko continuously resize karke awkward breakpoints identify karo.
  • 200% browser zoom par content reflow verify karo.
  • Keyboard se nav, buttons aur form controls access karo.
  • Focus indicator visible hai ya nahi check karo.
  • Long headings aur long text ke saath cards test karo.
  • Color contrast readable rakho.
  • Reduced-motion preference test karo.
  • DevTools me Grid/Flex overlays and computed styles inspect karo.
  • Duplicate aur unused CSS remove karo.

Project upgrades

Base project complete hone ke baad difficulty badhane ke liye dark theme variables, progress badges, print stylesheet, container queries ya JavaScript theme toggle add kar sakte ho. Pehle base responsive experience clean rakho.

Final Challenge

Project ko copy-paste exercise na banao. Complete CSS ek baar run karne ke baad 5 deliberate changes khud karo.

  1. Brand palette change karo using only custom properties.
  2. Skills Grid ki minimum card width change karke behavior observe karo.
  3. Hero breakpoint ko content ke according adjust karo.
  4. Button motion ko subtle ya completely static version me compare karo.
  5. Ek new “Projects” section add karke existing card system reuse karo.
CSS course complete ✅ Ab tum CSS fundamentals se responsive layouts aur final project tak full path cover kar chuke ho. Next natural step JavaScript hai, jahan static interfaces ko interactive banayenge.