Chess Game
Chess is a two-player strategy board game that originated in India in the 6th century. The game is played on a checkered board with 64 squares, arranged in an 8×8 grid. Each player starts with 16 pieces: one king, one queen, two rooks, two knights, two bishops, and eight pawns. The objective of the game is to checkmate the opponent’s king, which means that the king is in a position to be captured (in check) and there is no legal move to get out of check.
Chess Board
The chess board is made up of alternating light and dark squares, traditionally white and black, but the colors may vary. The vertical columns are called files, labeled a-h, and the horizontal rows are called ranks, labeled 1-8. The chess pieces are moved in accordance with their specific rules and abilities, with the aim of gaining control of the board and placing the opponent’s king under threat.
The game of chess requires strategic planning, logical thinking, and tactical ability. It is often played competitively, but can also be enjoyed as a casual pastime or for educational purposes. Chess is recognized as a sport by the International Olympic Committee and has a large following worldwide, with many professional players and organizations dedicated to the promotion and advancement of the game.
Follow this video for complete guidance :
HTML Code
<div class="board">
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
</div>
CSS Code
body{
display: flex;
align-items: center;
justify-content: center;
}
.board {
display: inline-block;
border: 2px solid #333;
}
.row {
display: flex;
}
.square {
width: 60px;
height: 60px;
}
.white {
background-color: #fff;
}
.black {
background-color: #333;
}
Complete Source Code
<style type="text/css">
body{
display: flex;
align-items: center;
justify-content: center;
}
.board {
display: inline-block;
border: 2px solid #333;
}
.row {
display: flex;
}
.square {
width: 60px;
height: 60px;
}
.white {
background-color: #fff;
}
.black {
background-color: #333;
}
</style>
<div class="board">
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
<div class="row">
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
<div class="row">
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
</div>
</div>
