Responsive Web Design with HTML5 & CSS3 — 3-Month Course

(Bagz Institute Technology)

Overview

A practical, portfolio-first program that teaches you to design and build mobile-first, accessible, and performant websites using semantic HTML5 and modern CSS3. You’ll master layout systems (Flexbox, Grid, Subgrid), Container Queries, CSS Variables (custom properties), @layer (cascade control), fluid typography with clamp(), responsive images, accessibility (WCAG), and production workflows (Git, Lighthouse, deployment).

Who It’s For

Beginners, designers moving into front-end, and entrepreneurs who need professional websites that work on any device and connection speed.

Entry Requirements

• No prior coding required.

• Basic computer literacy, a laptop you can install software on, stable internet.

• Recommended: A free GitHub account and a Figma account.

What You’ll Be Able To Do

• Write semantic HTML5 (meaningful tags like <header>, <main>, <nav>, which help SEO & screen readers).

• Build responsive layouts with Flexbox & Grid/Subgrid; use Container Queries to adapt components (not just pages).

• Design scalable CSS with BEM naming, custom properties, @layer, and nesting.

• Ship fast pages: responsive images (srcset/sizes, loading="lazy"), modern units (dvh, svh), Core Web Vitals.

• Implement accessible UI (color contrast, focus states, prefers-reduced-motion, keyboard nav).

• Use a professional workflow: Git/GitHub, pull requests, code reviews, Netlify/Vercel deploys.

Tools & Lab Requirements

Software: VS Code, Git, Node.js (for simple tooling), a modern browser with DevTools, Figma, Lighthouse/PageSpeed Insights.
Optional: Prettier, ESLint (style consistency), Sass or PostCSS (to compare with native CSS features).

Course Outline (12 Weeks · ~90–108 hours)

Week 1 — Web Foundations & Semantic HTML
How the web works (requests, responses, assets). HTML5 structure (<header>, <main>, <section>, landmarks), headings, lists, tables, forms.
Lab: Build a clean, semantic one-page site; add skip links for accessibility.

Week 2 — CSS Fundamentals & the Cascade
Selectors, specificity, cascade, inheritance. Custom properties (CSS variables) and @layer to control the cascade.
Lab: Create a theme system with variables and layers; dark/light mode using prefers-color-scheme.

Week 3 — Responsive Thinking & Fluid Type
Viewport meta, mobile-first, breakpoints, modern units (rem, %, vw, dvh/svh). min() / max() / clamp() for fluid typography and spacing.
Lab: Implement a fluid type scale; responsive spacing and container widths.

Week 4 — Flexbox Deep Dive
Axes, wrapping, alignment, common patterns (nav bars, cards, sticky footers).
Lab: Build a responsive navigation and card grid with Flexbox utilities.

Week 5 — CSS Grid & Subgrid
Explicit/implicit grids, grid areas, Subgrid for nested layouts; when to pick Grid vs Flexbox.
Lab: Magazine-style layout; complex landing page section with Subgrid.

Week 6 — Component-Level Responsiveness
Container Queries (components adapt to their container), :has() for parent-aware styling, CSS nesting for readability.
Lab: Build a reusable card/list component that reflows inside any layout.

Week 7 — Forms, Accessibility & Design Systems
Accessible labels, errors, keyboard flows, accent-color, focus states, color contrast (WCAG), tokens and BEM architecture.
Lab: Style a multi-step form with validation and accessible states.

Week 8 — Media & Responsive Images
<picture>, srcset/sizes, art direction, loading="lazy", modern formats (WebP/AVIF).
Lab: Optimize hero and gallery images for 2G/3G scenarios.

Week 9 — Animation & Motion Preferences
CSS transitions, keyframes, the View Transitions API (intro), prefers-reduced-motion.
Lab: Subtle, accessible animations; avoid jank with will-change and transform.

Week 10 — Performance & SEO Basics
Critical CSS, font loading, caching, Lighthouse audits, metadata & structured data (basics), sitemap/robots.
Lab: Hit Core Web Vitals targets on your project.

Week 11 — Capstone Build I (Design → Code)
From Figma wireframes to responsive components; design tokens, pattern library page.
Lab: Implement header, footer, hero, grids, and forms.

Week 12 — Capstone Build II (Polish → Deploy)
Accessibility pass, performance pass, final QA; deployment to Netlify/Vercel; project presentation.
Deliverable: Live, responsive portfolio site with a README and design notes.

Assessment & Certification

• Weekly Labs (40%) — practical builds & code reviews.

• Accessibility & Performance Audit (20%) — WCAG & Lighthouse report.

• Capstone Project (30%) — fully responsive, accessible, deployed site.

• Professional Practice (10%) — Git workflow, documentation, presentation.
  Certificate of Completion upon passing and attendance.

Delivery & Schedule

• In-person labs with instructor demos (hybrid theory available).

• 2–3 sessions/week, 3–4 hrs/session; cohort size 10–16 for close guidance.

Portfolio Deliverables

• Semantic one-pager, component library, responsive form, optimized media gallery, capstone site.

Support & Pathways

Templates (design tokens, BEM starter, audit checklists), hosting/vendor list, and guidance for freelance gigs or junior front-end roles.