Build A Fluid, Accessible Sidebar With HTML, CSS, & JS

Build A Fluid, Accessible Sidebar With HTML, CSS, & JS

Created by Marisol Vega Browser workspace 45–90 minutes

The brief

In this lab you step in as the front-end engineer on a small product team whose documentation sidebar has stopped working below 900px. Design has handed over a new two-tier navigation spec, and you have until the Thursday review to make it real. You'll work with semantic HTML, CSS grid, container-aware media queries, inline SVG, and a small amount of vanilla JavaScript to ship a sidebar that collapses cleanly and stays keyboard navigable.

What you'll do

  • Lay out a two-tier sidebar with CSS grid
  • Draw an inline SVG “collapse” control that animates on state change
  • Write JavaScript to trap focus inside the mobile drawer

Before you start

  • Working knowledge of HTML, CSS, and ES6 JavaScript
  • A Chromium-based browser — nothing to install locally
  • Roughly 90 minutes of uninterrupted time