TechBootcamp: CSS TechChallenge

The CSS Tech Challenge for TechBootcamp

Your mission is to create a responsive chessboard!

Goals:

1. Create the chess board grid and style the squares
2. The chessboard should be responsive
3. Change something about the chessboard when it's portrait
4. Animate one, or many, chess pieces moves in CSS.

What I've created for you:

1. Centered blank board (.grid)
2. 64 div elements for the squares (.cell)
3. 32 div elements for for each of the pieces (.piece) with added classes for color (.color) and type (.type)

Tip: Use DOM Inspector to get a better sense of the the document structure that I created for you.

Stuff to look into

• grid property
• background property
• transform property
• transition property