duplicate this 25 times

in CSS define the board
• #board {
  • margin: 0 auto;
  • width: 500px;
  • display: flex;
  • flex-wrap: wrap;
  }

in CSS define the square
• .square {
  • width: 100px;
  • height: 100px;
  • box-sizing: border-box;
  • border: 1px solid black;
  }

Because the boxes are 100x100, and the board is 500 wide, the boxes wrap to a 5x5 grid.

Next, Add the color

Black for the odd div boxes
• #board div:nth-child(odd) {
  • background-color: black
  }

RED for the even div boxes
• #board div:nth-child(even) {
  • background-color: red
  }