Chess board

Challenge Parameters	Challenge Details
Repository	grid-chessboard
Challenge type	optional challenge
Duration	1 day
Deployment method	GitHub pages
Group composition	solo

Exercise

Step 1
Make a chessboard that looks like the image below, using CSS grid. Use a repeating background image to create the tiled background. Use HTML <img> tags for all of the chess pieces.

Step 2
Add a row with letters above the chessboard, and a column with numbers next to the chessboard. Example!

Step 3
Adjust your HTML and CSS so that you can move the chess pieces to different locations by changing only the grid-area.

#white-queen {
    grid-area: D5;
}

#black-knight-1 {
    grid-area: E7;
}

Note: The chessboard should be centered on the web page!

Page link

Don't be shy click me....