An admin dashboard layout

The problem

Build the layout of a dashboard, with a sidebar, a header and a grid of cards, and an overlay that dims the page, using only HTML and CSS.

Requirements

• A page laid out with named grid areas
• A sidebar that moves above the content on small screens
• A set of stat cards in a self-adjusting grid
• A striped data table inside a horizontally scrollable wrapper
• A full-window overlay with a centred box, shown when a class is present
• BEM class names throughout, with one reset and no ids in selectors

Technologies

• HTML
• CSS
• Grid
• Flexbox

Step by step

1. Write the HTML in a sensible reading order, with landmarks.
2. Define the page grid with named areas for a phone-sized screen.
3. Add a media query that moves the sidebar next to the content on a larger screen.
4. Build the stat cards using flexbox for their insides and grid for their arrangement.
5. Build the table, then its striped rows and scrollable wrapper.
6. Build the overlay with fixed positioning, and centre its box with flexbox.
7. Review every selector, removing ids, deep chains and !important.

Expected result

A dashboard shell that holds together at every width and has a flat, predictable stylesheet.

How it is evaluated

• The grid template describes the page clearly
• The layout reorganises correctly on small screens
• Long tables scroll inside their wrapper and not the page
• Selectors are single classes wherever possible
• The overlay covers the window and keeps its box solid

Ways to improve it

• Move the third-party-style rules into a cascade layer
• Add a collapsing sidebar using a details element
• Add a loading skeleton animation