Web + frameworks / Beginner → intermediate

HTML, CSS, and responsive web foundations

Semantic HTML, accessible forms, CSS layout, responsive design, progressive enhancement, and browser fundamentals.

htmlcssresponsiveaccessibilityfrontend

01Semantic HTML first

htmlSemantic structure

<main>
  <article>
    <header>
      <h1>Project title</h1>
      <p>Short project summary.</p>
    </header>
    <section aria-labelledby="outcome">
      <h2 id="outcome">Outcome</h2>
      <p>What changed after the build.</p>
    </section>
  </article>
</main>

02Modern CSS layout

cssResponsive grid without device-specific widths

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

03Accessibility baseline

Every form control needs a label.
Keyboard focus must remain visible.
Images need meaningful alt text when they convey information.
Color cannot be the only way to communicate state.
Heading order should reflect document structure.