Chess Board Project

Style an 8x8 chessboard with HTML and CSS, using CSS Grid for alternating light and dark squares. Add chess piece icons from the provided resources—no Flexbox, just Grid.

  • Resources: Font Awesome Icons

  • Things you need to know: Box-shadow, creating a layout with CSS Grid, centering elements using CSS Grid

Max Chat

Task - 01

Apply the background and add the heading.

Chess Board - Task One

Task - 02

  1. Create the container for the Chess Board.

  2. Give it a white background colour.

Chess Board - Task Two

Task 3

  1. Build the grid and style the squares with alternating colors.

  2. Use white and gray colours for the alternate squares.

Chess Board - Task Three

Task - 04

  1. Use Font Awesome for the icons. The link is in the resources section.

  2. Position the icons. Make sure they are both vertically and horizontally centered in the cells.

Chess Board - Task Four

More Projects

These are some of the other projects you can build.