Intermediate
A page layout with template areas
Use grid-template-areas to lay out the page:
- the header across the full width at the top;
- a 150px sidebar on the left with the main content beside it;
- the footer across the full width at the bottom.
Don't change the order of the HTML.
What Check tests
- The layout uses
grid-template-areas - The header is at the top and full width
- The sidebar is 150px wide, on the left
- Main sits beside the sidebar, in the same row
- The footer is full width, below everything
- The HTML order is unchanged
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.