MERN Course: HTML & CSS Foundations
Weeks 1–4 of the MERN syllabus — semantic HTML, CSS box model, Flexbox, Grid, responsive design, Bootstrap, Tailwind, and performance-minded styling with practical examples.
Introduction
Every MERN developer needs a solid front-end foundation before React. This guide completes the HTML & CSS section of the MERN course syllabus with examples, Note/Tip/Warning callouts, and performance guidance — rendered the same way as the rest of this blog.
Course Reference
Quick index
| # | Topic | Description |
|---|---|---|
| 1 | Introduction to the Web & HTML | Web development splits into front-end (what users see) and back-end (servers, databases, APIs). |
| 2 | Working with Text & Content | Headings create a document outline. |
| 3 | Tables & Forms in HTML | Tables are for tabular data, not page layout. |
| 4 | CSS Fundamentals & Backgrounds | CSS controls presentation. |
| 5 | The Box Model & Layout | Every element is a box: content → padding → border → margin. |
| 6 | Grid and Flex Layout | Flexbox excels at one-dimensional alignment (nav bars, toolbars). |
| 7 | Introduction to Responsive Web Design | Responsive design adapts layout to viewport width. |
| 8 | CSS Media Queries | Media queries apply styles at breakpoints. |
| 9 | Building Navigation Menus | Navigation uses <nav> with a list of links. |
| 10 | Introduction to CSS Frameworks (Bootstrap) | Frameworks ship pre-built grids, components, and utilities so teams ship faster. |
| 11 | Introduction to Tailwind CSS | Tailwind is utility-first: small classes compose in markup. |
| 12 | CSS Variables, SASS & Other Tools | CSS custom properties (--token) enable theming (light/dark) without duplicating rules. |
Week 1: HTML Foundations
1. Introduction to the Web & HTML
Web development splits into front-end (what users see) and back-end (servers, databases, APIs). HTML is the semantic skeleton — it describes structure and meaning, not appearance.
- Use
<!DOCTYPE html>so browsers render in standards mode - Keep one
<h1>per page for accessibility and SEO - Prefer semantic tags over generic
<div>soup
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kazi Rahamatullah — Portfolio</title>
</head>
<body>
<header>
<h1>FullStack Developer</h1>
<p>Building MERN applications with performance in mind.</p>
</header>
</body>
</html>2. Working with Text & Content
Headings create a document outline. Paragraphs, lists, images, and links should be chosen for meaning — not just visuals.
Example:
<article>
<h2>About Me</h2>
<p>I build scalable web apps with React, Node.js, and MongoDB.</p>
<ul>
<li>Frontend: React, Next.js, Tailwind CSS</li>
<li>Backend: Express, REST APIs</li>
</ul>
<img src="/profile.jpg" alt="Kazi Rahamatullah profile photo" width="320" height="320" loading="lazy" />
<a href="/contact">Get in touch</a>
</article>3. Tables & Forms in HTML
Tables are for tabular data, not page layout. Forms need labels tied to inputs for accessibility and better UX on mobile.
Example:
<form action="/api/contact" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required autocomplete="email" />
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send</button>
</form>Week 2: Introduction to CSS Styling
4. CSS Fundamentals & Backgrounds
CSS controls presentation. External stylesheets are cached by the browser and keep HTML clean. Prefer class selectors over deep nesting.
Example:
/* styles.css */
.card {
background: linear-gradient(135deg, #ffe543 0%, #4ce2e2 100%);
background-position: center;
background-size: cover;
color: #111;
font-family: system-ui, sans-serif;
}5. The Box Model & Layout
Every element is a box: content → padding → border → margin. Use box-sizing: border-box globally so width math stays predictable.
Example:
*,
*::before,
*::after {
box-sizing: border-box;
}
.layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 2rem;
margin-inline: auto;
padding-inline: 1.5rem;
max-width: 72rem;
}6. Grid and Flex Layout
Flexbox excels at one-dimensional alignment (nav bars, toolbars). CSS Grid excels at two-dimensional layouts (page shells, dashboards).
Example:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
}Week 3: Responsive Design & Navigation
7. Introduction to Responsive Web Design
Responsive design adapts layout to viewport width. Mobile-first means base styles target small screens; larger breakpoints add complexity.
Example:
.container {
margin-inline: auto;
width: min(100% - 2rem, 72rem);
}
img,
video {
max-width: 100%;
height: auto;
}8. CSS Media Queries
Media queries apply styles at breakpoints. Prefer min-width (mobile-first) over max-width (desktop-first).
Example:
/* Mobile base */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 240px 1fr;
}
.sidebar {
display: block;
}
}9. Building Navigation Menus
Navigation uses <nav> with a list of links. Dropdowns and mobile menus should remain keyboard-accessible.
Example:
<nav aria-label="Main">
<ul class="nav-list">
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Week 4: Expanding Your CSS Toolkit
10. Introduction to CSS Frameworks (Bootstrap)
Frameworks ship pre-built grids, components, and utilities so teams ship faster. Bootstrap uses component classes; learn its grid before overriding everything.
Example:
<div class="container py-4">
<div class="row g-4">
<div class="col-md-6 col-12">
<div class="card p-3">Feature A</div>
</div>
<div class="col-md-6 col-12">
<div class="card p-3">Feature B</div>
</div>
</div>
</div>11. Introduction to Tailwind CSS
Tailwind is utility-first: small classes compose in markup. It pairs well with React/Next.js and design systems like this portfolio site.
Example:
<article class="mx-auto max-w-3xl border-4 border-black p-6 shadow-[4px_4px_0_#000]">
<h2 class="text-2xl font-extrabold uppercase">Blog Post</h2>
<p class="mt-4 leading-relaxed text-neutral-700">Utility classes keep styles colocated with components.</p>
</article>12. CSS Variables, SASS & Other Tools
CSS custom properties (--token) enable theming (light/dark) without duplicating rules. SASS adds nesting and mixins — compile to plain CSS in build step.
Example:
:root {
--color-accent: #ff6b8b;
--space-md: 1rem;
}
.card {
border-color: var(--color-accent);
padding: var(--space-md);
}
.dark {
--color-accent: #b283ff;
}Subscribe to my newsletter
Stay up to date and get notified when I share new contents.
No spam ever, unsubscribe anytime