Key Concepts

Use elements that carry meaning—<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. Improves accessibility, SEO, and maintenance.

<main>
  <article>
    <h2>News</h2>
    <p>...</p>
  </article>
</main>

<div id="main"><div class="article">...</div></div>

Exactly one <h1> per page; then descend logically (h2, h3 …). Give every <section> a heading for a clear, navigable outline.

• Don’t skip levels (e.g., avoid jumping from h2 to h4).
• Keep headings short, descriptive, and unique.

Write descriptive link text and keep a consistent menu on every page.

• Prefer “View syllabus” over “Click here”.
• Use a single <nav> landmark for main menus; add aria-label only if you have multiple navs.

Plan for accessible media now even if you’ll add images later:

• Alt describes the image’s purpose; decorative images use alt="".
• When you add an image, wrap it with a <figure> and a visible <figcaption>.

<!-- later -->
<figure>
  <img src="img/example.png" alt="Short purpose-driven description">
  <figcaption>Visible caption text.</figcaption>
</figure>

Native inputs + associated labels = accessible forms. Provide feedback, visible focus, and clear errors.

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

• Keyboard test: complete the form with Tab/Enter only.
• Use aria-describedby for error/help text when needed.

Arrange items in a row or column; great for navbars and toolbars.

.toolbar{ display:flex; gap:.75rem; align-items:center; }
.toolbar .spacer{ margin-left:auto; }

• Use gap for spacing instead of margins between siblings.
• Common: justify-content, align-items, flex-direction.

Lay out rows and columns together. Useful for cards, galleries, and page sections.

.grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

On dark backgrounds, increase base size and weight; ensure sufficient contrast and visible focus.

• Readable base: 18–19px; headings heavier; line-height ~1.5–1.7.
• Don’t rely on color alone to signal state—use text/icons/borders too.

• One CSS file (already done), compress images when you add them, and lazy-load noncritical media.
• Keep JS minimal and defer nonessential scripts.

<img
  src="img/card-800.jpg"
  srcset="img/card-800.jpg 800w, img/card-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 720px"
  alt="Responsive card example" loading="lazy">