HTML & CSS Guide

01 Introduction — The Frontend Foundation

HTML (HyperText Markup Language) is the structure of a webpage — headings, paragraphs, images, links, forms. CSS (Cascading Style Sheets) is the presentation — color, layout, typography, animation, responsiveness. Together they are the two skills every frontend developer uses daily, and they are the foundation of every framework (React, Vue, Svelte all render HTML and style with CSS).

How the browser renders your page

• Parse HTML → builds the DOM tree (nodes for every element)
• Parse CSS → builds the CSSOM tree (every rule)
• Render tree → combines DOM + CSSOM, discarding things like display:none
• Layout (reflow) → computes the exact position and size of every box
• Paint → fills pixels on screen
• Composite → layers transforms/opacity for smooth animation

Why this still matters in 2026

• Frameworks change constantly — HTML and CSS do not
• Performance, accessibility and SEO are judged on the final DOM and CSS
• Tailwind, Bootstrap and every UI kit still compile down to CSS
• It is the fastest way to become employable — no build step required

02 Setup & Dev Tools Beginner

Your first file — no build step needed

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML and CSS page.</p>
</body>
</html>Copy

/* style.css */
body{
  font-family: system-ui, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  padding: 40px;
}
h1{ color: #f97316; }Copy

Live Server extension

• Install Live Server by Ritwick Dey in VS Code
• Right-click the HTML file → Open with Live Server
• Your page reloads automatically on every save at http://127.0.0.1:5500

Browser DevTools — your superpower

03 Document Structure & Core Tags Beginner

The anatomy of an HTML document

<!DOCTYPE html>          <!-- tells the browser to use modern standards mode -->
<html lang="en">      <!-- root element; lang is required for a11y -->
  <head>               <!-- metadata: not visible on the page -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
  </head>
  <body>               <!-- everything the user actually sees -->
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>Copy

Elements, tags, attributes, values

<a href="https://developer.mozilla.org" class="link" target="_blank" rel="noopener">MDN</a>Copy

• Tag — <a> and </a>
• Element — the tag plus its content: <a>MDN</a>
• Attribute — href
• Value — https://developer.mozilla.org

Void (self-closing) elements

These have no closing tag and no content:

• <img> <br> <hr> <input> <meta> <link>
• <area> <base> <source> <track> <wbr>

Comments and entities

<!-- This is an HTML comment -->

<p>5 < 10 && 10 > 5</p>      <!-- escape < and > -->
<p>Tom &amp; Jerry          <!-- escape the ampersand itself -->
<p>&copy; 2026 &mdash; Laksh Guides</p>Copy

The heading hierarchy rule

Headings are the outline of your page, not a way to pick font sizes. There must be exactly one <h1>, and levels must not skip.

04 Text, Links, Images & Tables Beginner

Lists

<ul>              <!-- unordered (bulleted) -->
  <li>Flexbox</li>
  <li>Grid</li>
</ul>

<ol type="A">        <!-- ordered (numbered); type="A" / "i" / "1" -->
  <li>Read HTML</li>
  <li>Read CSS</li>
</ol>

<dl>              <!-- description list -->
  <dt>API</dt>      <!-- term -->
  <dd>Application Programming Interface</dd>
</dl>Copy

Links — the essentials

<a href="https://developer.mozilla.org">MDN Web Docs</a>
<a href="page.html">Internal page</a>
<a href="#section">Jump to section</a>
<a href="mailto:hello@example.com">Email me</a>
<a href="tel:+919876543210">Call support</a>
<a href="report.pdf" download>Download the PDF</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>Copy

Images

<img
  src="images/laksh.jpg"
  alt="Laksh working at a desk with two monitors"
  width="600"        <!-- reserve space, prevents layout shift -->
  height="400"
  loading="lazy"     <!-- defer offscreen images -->
  decoding="async"
>Copy

Tables — for tabular data only

<table>
  <caption>Browser market share, 2026</caption>
  <thead>
    <tr><th scope="col">Browser</th><th scope="col">Share</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Chrome</th><td>66%</td></tr>
    <tr><th scope="row">Safari</th><td>18%</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>100%</td></tr>
  </tfoot>
</table>Copy

05 Forms & Inputs Beginner

Forms are how users send data. A good form works even when JavaScript is disabled.

<form action="/signup" method="post">
  <label for="name">Full name</label>
  <input type="text" id="name" name="name" autocomplete="name" required>

  <label for="email">Email address</label>
  <input type="email" id="email" name="email" autocomplete="email" required>

  <label for="pw">Password</label>
  <input type="password" id="pw" name="pw" minlength="8" required>

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="18" max="100">

  <label for="birth">Date of birth</label>
  <input type="date" id="birth" name="birth">

  <label for="color">Favourite colour</label>
  <input type="color" id="color" name="color" value="#e34f26">

  <label>
    <input type="checkbox" name="terms" value="yes" required>
    I accept the terms and conditions
  </label>

  <label for="plan">Plan</label>
  <select id="plan" name="plan">
    <optgroup label="Personal">
      <option value="free">Free</option>
      <option value="pro" selected>Pro</option>
    </optgroup>
    <option value="team">Team</option>
  </select>

  <textarea id="bio" name="bio" rows="4" maxlength="500" placeholder="Tell us about yourself"></textarea>

  <button type="submit">Create account</button>
  <button type="reset">Reset</button>
</form>Copy

Input types you'll actually use

The label is not optional

• for="id" must match the input's id
• Clicking the label focuses the input
• Screen readers announce the label instead of "text field, edit, blank"
• Nesting the input inside the label also works, but for is clearer

06 Semantic Layout Intermediate

Semantic elements describe what a piece of content is, not how it looks. They give free SEO, accessibility and correct behaviour, and they make your code readable months later.

<body>
  <header>              <!-- site banner: logo, nav -->
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/guides">Guides</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>                <!-- the unique content of this page -->
    <article>
      <header>
        <h1>Understanding Flexbox</h1>
        <p><time datetime="2026-08-14">14 Aug 2026</time></p>
      </header>
      <section>
        <h2>Main axis and cross axis</h2>
        <p>...</p>
      </section>
      <aside>Related links</aside>
      <footer>Posted by Laksh</footer>
    </article>
  </main>

  <aside>              <!-- complementary: sidebar, ads, TOC -->
  <footer>              <!-- site-wide footer -->
</body>Copy

Choosing the right element

07 Accessibility & SEO Basics Intermediate

Accessibility (a11y) means your page works for keyboard users, screen-reader users, and users with low vision, colour blindness or motor impairments. It is a legal requirement for public sites (WCAG 2.2) and it is good engineering.

Keyboard first

• Every interactive element must be reachable and operable with Tab, Enter and Space
• Use native <button> and <a> instead of <div onclick>
• Never remove the focus outline — style it instead: :focus-visible{ outline:2px solid #e34f26; outline-offset:2px; }
• Modals must trap focus and close with Esc (<dialog> does this for free)

ARIA — use sparingly

<!-- Good: a real button needs nothing extra -->
<button>Open menu</button>

<!-- Necessary when you must use a div (e.g. a custom widget) -->
<div role="button" tabindex="0" aria-pressed="false"
     aria-label="Toggle navigation menu">☰</div>

<!-- Live region for dynamic messages -->
<p role="status" aria-live="polite">Form submitted successfully</p>

<!-- Hide decorative icons from screen readers -->
<span aria-hidden="true">★</span>
<span class="visually-hidden">5 out of 5 stars</span>Copy

SEO essentials

• One descriptive <title> per page (unique, ~60 characters)
• Meta description (<meta name="description">) — 120–160 chars
• Semantic tags give search engines your outline for free
• Meaningful alt text on images
• Open Graph tags for link previews on WhatsApp, Slack, X
• Fast load time and valid HTML — Lighthouse score is a ranking signal

<meta name="description" content="Learn HTML and CSS from scratch: semantic markup, flexbox, grid, responsive design, and theming with CSS variables.">
<meta property="og:type" content="website">
<meta property="og:title" content="HTML & CSS Guide">
<meta property="og:description" content="From document structure to CSS Grid — the complete frontend foundation.">
<meta property="og:image" content="https://example.com/og.png">Copy

08 CSS Selectors Beginner

/* Universal + element */
*                  /* every element */
p                  /* every <p> */

/* Class and ID */
.card              /* any element with class="card" */
#header            /* the element with id="header" (unique) */

/* Compound (no space = same element) */
nav ul li.active    /* li that has class active, inside ul inside nav */
button.primary

/* Descendant / child / next sibling */
.card p            /* p anywhere inside .card */
.card > p         /* p that is a DIRECT child of .card */
.card + p           /* p immediately after .card */
.card ~ p           /* every p AFTER .card */

/* Attribute */
a[href^="https"]    /* external links */
input[type="text"]
a[target="_blank"]
[data-id="42"]

/* Pseudo-classes */
a:hover
a:focus-visible
li:nth-child(2)         /* 2nd li */
li:nth-child(odd)       /* 1st, 3rd, 5th */
li:not(.active)         /* except */
input:checked           /* checkbox/radio checked */
input:required
input:invalid
p::placeholder
div:has(h2)             /* div containing an h2 */
::selection            /* highlighted text */

/* Pseudo-elements */
p::before  { content: "→ "; }
p::after   { content: ""; }
li::marker { color: #e34f26; }
::first-letter{ font-size:3rem; float:left; }Copy

Combinators at a glance

• A B — descendant (space)
• A > B — direct child
• A + B — adjacent sibling (immediately after)
• A ~ B — general sibling (anywhere after)
• A, B — group (comma = OR)

09 The Cascade, Specificity & Inheritance Intermediate

When two rules target the same element, the browser decides which wins using the cascade. The order is:

1. Origin & importance — user-agent styles < author styles < !important author < user !important
2. @layer — unlayered styles beat layered ones
3. Specificity — a numeric score per selector
4. Source order — if specificity ties, the last rule in the file wins

Specificity scoring (0, a, b, c)

• a — number of IDs → #header = (1,0,0)
• b — number of classes, attributes, pseudo-classes → .card = (0,1,0)
• c — number of elements and pseudo-elements → p = (0,0,1)

Inheritance

Some properties inherit down the DOM tree by default — color, font-family, line-height, text-align, visibility. Most others do not — margin, padding, border, width.

/* Stop inheritance */
.card *{ all: unset; }        /* nuclear option — use with care */
button{ font: inherit; }      /* forms don't inherit fonts by default */Copy

/* Modern solution: @layer makes order explicit — no more specificity wars */
@layer reset, base, components, utilities;

@layer base{
  body{ font-family: system-ui, sans-serif; }
}
@layer components{
  .card{ padding: 20px; }   /* overrides base regardless of file order */
}
@layer utilities{
  .card{ padding: 40px; }   /* utilities always win */
}Copy

10 The Box Model Beginner

Every element on a page is a rectangular box with four layers: content → padding → border → margin. Margin is outside the border; padding is inside it.

      ┌──────────── margin (transparent, outside) ────────────┐
      │  ┌──────── border ────────────────────────────────┐   │
      │  │  ┌──── padding ──────────────────────────────┐  │   │
      │  │  │        CONTENT  (width × height)         │  │   │
      │  │  └───────────────────────────────────────────┘  │   │
      │  └─────────────────────────────────────────────────┘   │
      └──────────────────────────────────────────────────────────┘Copy

.box{
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #e34f26;
  margin: 30px;
}

/* Default: content-box → total width = 200 + 40 + 10 + 60 = 310px */

/* The fix almost everyone needs: */
*, *::before, *::after{ box-sizing: border-box; }Copy

Margin collapse

Vertical margins of adjacent siblings collapse into one — the bigger value wins, they do not add. A child's top margin can also collapse through its parent if the parent has no padding or border.

.a{ margin-bottom: 30px; }
.b{ margin-top: 20px; }   /* gap between them = 30px, NOT 50px */Copy

• Fix with gap in Flexbox/Grid (never collapses)
• Fix with a flex/grid parent on the container
• Fix with padding or overflow:hidden on the parent

Width, min and max

• width: 50% — percentage of the parent's content width
• max-width: 60ch — caps line length for readability (ideal body text is 45–75 characters)
• min-width — stops flex items shrinking below a usable size
• height: 100vh — viewport height; 100% only works if the parent has an explicit height
• aspect-ratio: 16 / 9 — modern replacement for padding hacks

11 Colors, Fonts & Units Beginner

Color formats

Units

• px — absolute, predictable. Good for borders, icons, small fixed elements
• rem — relative to the root font size. Scales with user settings — use for font sizes and spacing
• em — relative to the element's own font size. Use for padding that should scale with text
• % — relative to the parent. Widths, heights, font sizes
• vw / vh — 1% of viewport width/height
• ch — width of the "0" glyph. Perfect for max-width on text
• fr — fraction of free space. Grid only

Typography that reads well

body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;         /* 16px default */
  line-height: 1.6;        /* 1.5–1.8 for body text */
  color: #475569;
  max-width: 70ch;         /* readable line length */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

h1{ font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); line-height: 1.15; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); }

.btn{
  font: inherit;           /* buttons don't inherit fonts by default */
  font-weight: 600;
  letter-spacing: 0.01em;
}Copy

12 Flexbox Intermediate

Flexbox lays out items in one direction — a row or a column. This is the single most-used layout tool on the web: nav bars, button groups, card rows, centering anything.

.container{
  display: flex;              /* row by default */
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: wrap | nowrap | wrap-reverse;
  justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | center | flex-end | baseline;
  align-content: flex-start | center | space-between;  /* multi-line only */
  gap: 1rem;
}Copy

Main axis vs cross axis

• main axis — the direction items flow (flex-direction). justify-content distributes along it.
• cross axis — perpendicular to it. align-items aligns along it.

Properties on the items

.item{
  flex-grow: 1;         /* share leftover space */
  flex-shrink: 1;       /* default: allowed to shrink */
  flex-basis: 200px;    /* starting size before free space */
  flex: 1 1 auto;       /* grow shrink basis shorthand */
  flex: 0 0 200px;      /* fixed width, never grow/shrink */
  align-self: flex-end; /* override align-items for one item */
  order: 2;             /* visual order only — DOM order is unchanged */
  min-width: 0;         /* CRITICAL: allows shrinking below content size */
}Copy

Pattern 1 — perfect centring

.center{
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertical */
  min-height: 100vh;
}Copy

Pattern 2 — navbar with pushed-right links

.navbar{ display: flex; align-items: center; gap: 1.5rem; }
.navbar .brand{ margin-right: auto; }   /* pushes the rest to the right */
.navbar a{ text-decoration: none; color: #f1f5f9; }
.navbar a:hover{ color: #e34f26; }
.navbar a[aria-current="page"]{ color: #e34f26; font-weight: 600; }Copy

Pattern 3 — wrapping card row

.cards{
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}
.card{
  flex: 1 1 260px;      /* grow, shrink, basis 260px */
  max-width: 380px;
  padding: 1.5rem;
  border: 1px solid #334155;
  border-radius: 16px;
}Copy

13 CSS Grid Intermediate

Grid lays items out in two dimensions at once — rows and columns. Use it for page-level layout and card galleries; use Flexbox for one-dimensional component internals.

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  align-items: start;
  justify-items: stretch;
}Copy

Track sizing

Line-based placement

.layout{
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }Copy

Spanning and alignment

.hero{
  grid-column: 1 / -1;      /* span all columns */
  grid-row: span 2;
}
.card{ align-self: start; justify-self: center; }
.grid{ place-items: center; }          /* align + justify shorthand */
.grid{ place-content: center; }        /* for the whole grid */

/* Dense packing — fills holes left by spans */
.gallery{ grid-auto-flow: row dense; }Copy

Pattern — responsive gallery with zero media queries

.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}Copy

14 Positioning Intermediate

Relative + absolute

.card{ position: relative; }        /* becomes the containing block */
.badge{
  position: absolute;
  top: -8px; right: -8px;
  background: #e34f26;
  color: white;
  border-radius: 999px;
  padding: 2px 8px;
}Copy

Centring with absolute positioning

.overlay{
  position: absolute;
  inset: 0;                  /* top/right/bottom/left all 0 = fill parent */
  display: grid;
  place-items: center;       /* cleaner than top:50% + translate */
}Copy

Sticky navbar

header{
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(15, 23, 42, 0.85);
}Copy

Fixed toast notification

.toast{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1000;
  padding: 14px 20px;
  border-radius: 12px;
  background: #10b981;
  color: #04140d;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}Copy

15 Responsive Design Intermediate

Mobile-first is the default

Write the small-screen layout first, then progressively enhance. Your base CSS targets phones; media queries add complexity only where needed.

/* Base — mobile (no query needed) */
.cards{ display: grid; gap: 1rem; }

/* Enhance at 640px */
@media (min-width: 40rem){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}

/* Enhance at 1024px */
@media (min-width: 64rem){
  .cards{ grid-template-columns: repeat(4, 1fr); }
}Copy

Media query features

Fluid typography and spacing

h1{
  /* min | preferred | max — scales smoothly with viewport */
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.5rem);
}

.container{
  width: min(100% - 2rem, 1200px);   /* fluid with a max */
  margin-inline: auto;
}

.grid{ gap: clamp(0.75rem, 2vw, 1.5rem); }Copy

Respecting user preferences

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

16 Transitions, Transforms & Animation Advanced

Transitions — animate a change

.btn{
  background: #e34f26;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover{
  background: #1572b6;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.btn:active{ transform: translateY(0); }Copy

Keyframe animations

@keyframes fade-up{
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.card{
  opacity: 0;
  animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.card:nth-child(2){ animation-delay: 0.1s; }
.card:nth-child(3){ animation-delay: 0.2s; }

/* Infinite loading spinner */
@keyframes spin{ to{ transform: rotate(360deg); } }
.spinner{
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #e34f26;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}Copy

Scroll-triggered reveal with no JavaScript

@supports (animation-timeline: view()){
  .card{
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}Copy

Transforms cheat sheet

• translateX(20px) / translateY(-50%) — move
• scale(1.05) — zoom; add transform-origin: center to change the anchor
• rotate(45deg) — spin; rotateY(180deg) — card flip
• skewX(-10deg) — italic slant
• perspective(1000px) rotateY(25deg) — 3D depth

Timing functions

17 CSS Variables & Theming Advanced

Custom properties (--name) store values on an element and cascade exactly like normal properties. They are the foundation of every design system and the cleanest way to build dark mode.

:root{
  /* Brand palette — the only values you ever change */
  --brand: #e34f26;
  --brand-dark: #c2410c;
  --accent: #1572b6;

  /* Semantic tokens */
  --bg: #07080e;
  --surface: rgba(18, 22, 40, 0.75);
  --text: #f1f5f9;
  --text-dim: #8892b0;
  --border: rgba(227, 79, 38, 0.15);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;

  --radius: 14px;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f8fafc;
    --surface: rgba(255,255,255,0.85);
    --text: #0f172a;
    --text-dim: #475569;
  }
}

body{
  background: var(--bg);
  color: var(--text);
}
.card{
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}Copy

JavaScript-free dark mode toggle

<!-- inline in <head> — prevents white flash on load -->
<script>
  const theme = localStorage.getItem('theme')
    || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  document.documentElement.dataset.theme = theme;
</script>

:root[data-theme="light"]{
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --text-dim: #475569;
}
:root[data-theme="dark"]{
  --bg: #07080e;
  --surface: #121626;
  --text: #f1f5f9;
  --text-dim: #8892b0;
}Copy

Runtime variables from JS

// JS reads the computed value
const brand = getComputedStyle(document.documentElement)
  .getPropertyValue('--brand').trim();   /* "#e34f26" */

// JS sets a variable (e.g. reading the user's accent preference)
document.documentElement.style.setProperty('--brand', '#1572b6');Copy

18 Practice Projects Intermediate

Reading is not learning. Build these in order — each one introduces exactly one new concept.

.profile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--surface);
}
.avatar{
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.profile:hover .avatar{ transform: scale(1.05) rotate(3deg); }
.links{ display: flex; gap: 1rem; }Copy

19 Cheat Sheet & Best Practices Beginner

Reset you'll actually use

*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
body{ line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, video{ max-width: 100%; height: auto; display: block; }
input, button, textarea, select{ font: inherit; }
ul[class]{ list-style: none; }
:focus-visible{ outline: 2px solid #e34f26; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}Copy

Layout decision tree

• One direction (row or column) → Flexbox
• Rows and columns, or page layout → Grid
• Centering anything, known or unknown size → Grid with place-items: center
• Element must stay in the document flow → sticky, not fixed
• Columns that depend on available width → repeat(auto-fit, minmax(220px, 1fr))

Ten rules to remember

1. Semantic HTML first; CSS only for presentation
2. One <h1> per page, never skip heading levels
3. Always set box-sizing: border-box
4. Use gap, not margin hacks — no collapse surprises
5. min-width: 0 on flex items that contain text
6. Classes for styling, IDs for anchors and JavaScript hooks
7. Units: rem for type and spacing, %/fr for sizes
8. Mobile-first with min-width queries
9. Animate only transform and opacity
10. Test with the keyboard and in DevTools — every time

Resources worth bookmarking

• MDN Web Docs — the reference, not a tutorial site. Start here.
• CSS-Tricks — Flexbox and Grid guides by A Complete Beginner
• web.dev Learn — structured, modern courses from the Chrome team
• Flexbox Froggy / Grid by Example — learn by playing
• Can I Use — check browser support before using a feature
• WCAG Quick Reference — accessibility checklist