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. You will be building this project as part of our CSS Course.
Resources: Font Awesome Icons
Things you need to know: Box-shadow, creating a layout with CSS Grid, centering elements using CSS Grid
Task - 01
Apply the background of
#6B98E1and add the heading.Create the container for the Chess Board and give it a white background colour.
Task - 02
Build the grid and style the squares with alternating colors.
Use white and gray colours for the alternate squares.
Task - 03
Use Font Awesome for the icons. The link is in the resources section.
Position the icons. Make sure they are both vertically and horizontally centered in the cells.
More projects
These are some of the projects you'll build while learning.
