Chess Board Project

In this project, you'll style a Chess Board using HTML and CSS. You will create an 8x8 chessboard with alternating light and dark squares. You'll add icons for the chess pieces from the resource we provide below. Please ensure that you use only CSS Grid for this project. Avoid using CSS Flexbox. To get started, please scroll down and look at the tasks listed below.

  • 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 1

Apply the background and add the heading.

Task 2

Create the container for the Chess Board.

Task 3

Build the grid and style the squares with alternating colors.

Task 4

Position the chess pieces using Font Awesome icons.

More Projects

These are some of the other projects you can build.