Skip to content

Latest commit

 

History

History
42 lines (23 loc) · 1.64 KB

File metadata and controls

42 lines (23 loc) · 1.64 KB

Challenge 1

Implement the layout in the image below using CSS grid.

Challenge 2

Recreate this business dashboard shown in the image below.

The pie chart can just be a circle if you're wanting to focus on implementing CSS grid only however making pie charts will soon be easier with the conic-gradient property. Give it a crack by reading the Mozilla documentation.

It's only supported by Chrome and Safari currently. This website is a great way to check what works on what browsers.

Challenge 3

Recreate the health dashboard in the image below.

Challenge 4

Create a chess board using css grid.

Look up the nth-child pseudo class to elegantly get the job done.

Challenge 5

Take a look at some of Jen Simmons work. She's one of the founders of CSS grid and has some cool stuff on her website. Try and implement your own versions of her:

Challenge 6

Recreate this design using CSS grid.