Chess Board Game using HTML and CSS
Hi guys, based on the table method I taught you in HTML, we will create a beautiful chess board game.
I was really hungry to create something beautiful today using HTML and CSS and after a while, I remember Tunde and then Chessinslum. So I designed a ChessBoard game using just codes 😍
If you think it’s beautiful, kindly retweet for others to see. For my students, code below👇🏽👨🏽💻 pic.twitter.com/BTGJxVPaGc
— Àgbà Akin (@Kynsofficial) January 29, 2022
- You might want to name your CSS file chess.css
- To understand what each line of CSS code is for, delete the code and then re-add it.
Ask questions in the comment sections if you run into any issues.
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Chessboard using Pure CSS and HTML</title>
<link rel="stylesheet" href="chess.css" type="text/css">
</head>
<body>
<div class="chessboard">
<!-- 1st -->
<div class="white">♜</div>
<div class="black">♞</div>
<div class="white">♝</div>
<div class="black">♛</div>
<div class="white">♚</div>
<div class="black">♝</div>
<div class="white">♞</div>
<div class="black">♜</div>
<!-- 2nd -->
<div class="black">♝</div>
<div class="white">♝</div>
<div class="black">♝</div>
<div class="white">♝</div>
<div class="black">♝</div>
<div class="white">♝</div>
<div class="black">♝</div>
<div class="white">♝</div>
<!-- 3th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 4st -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 5th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 6th -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 7th -->
<div class="white">♙</div>
<div class="black">♙</div>
<div class="white">♙</div>
<div class="black">♙</div>
<div class="white">♙</div>
<div class="black">♙</div>
<div class="white">♙</div>
<div class="black">♙</div>
<!-- 8th -->
<div class="black">♖</div>
<div class="white">♘</div>
<div class="black">♗</div>
<div class="white">♕</div>
<div class="black">♔</div>
<div class="white">♗</div>
<div class="black">♘</div>
<div class="white">♖</div>
</div>
</body>
</html>
body {
background: #e8e7de;
font-family: 'Montserrat', sans-serif;
}
.chessboard {
width: 640px;
height: 640px;
margin: 20px;
border: 10px solid #000;
border-radius: 4px;
background: #e59110;
box-shadow: 5px 5px 8px #bebdb6,
-5px -5px 8px #ffffff;
}
.black {
float: left;
width: 80px;
height: 80px;
background-color: #e59110;
font-size:50px;
text-align:center;
display: table-cell;
vertical-align:middle;
}
.white {
float: left;
width: 80px;
height: 80px;
background-color: #ffcfb6;
font-size:50px;
text-align:center;
display: table-cell;
vertical-align:middle;
}
Please are those icons represented also with code
Hi, yes
How did you get to represent the icons with code
1. White Chess King ♔
Unicode : U+2654
HTML Code : ♔
2. Black Chess King ♚
Unicode : U+265A
HTML Code : ♚
3. White Chess Queen ♕
Unicode : U+2655
HTML Code : ♕
4. Black Chess Queen ♛
Unicode : U+265B
HTML Code : ♛
5. White Chess Rock ♖
Unicode : U+2656
HTML Code : ♖
6. Black Chess Rock ♜
Unicode : U+265C
HTML Code : ♜
7. White Chess Bishop ♗
Unicode : U+2657
HTML Code : ♗
8. Black Chess Bishop ♝
Unicode : U+265D
HTML Code : ♝
9. White Chess Knight ♘
Unicode : U+2658
HTML Code : ♘
10. Black Chess Knight ♞
Unicode : U+265E
HTML Code : ♞
11. White Chess Pawn ♙
Unicode : U+2659
HTML Code : ♙
12. Black Chess Pawn ♟
Unicode : U+265F
HTML Code : ♟
Hi sir, pls can you explain that, display: table-cell. Thank you
You’re the BOSS!!!
I’m so new to coding and I really need help from the beginning
My question isn’t pertaining to this,concerning the project/assignment you gave that you gave a layout,pls how do I add an image to the css
If you mean like a background image, you can use the
Background: URL();
However, to understand better, you can read here: https://www.w3docs.com/snippets/css/how-to-add-background-image.html
Hi, I’m Temi, I am not your student, or at least not yet, but I must commend you its a great work you are doing.
I came here from twitter.ng after your tweet about the chessboard, I’m just start this journey of tech, still in the early days of learning html and CSS and seeing what you’ve done, I can only say you are such a motivation to me.
Hence, I’m following you closely to steal from those wealth of writing codes.
Namaste.
P.s: the html and CSS aren’t linking o, but I still dey find the bug, make i follow am drag am small first
Try checking the css link reference if it’s properly linked in the HTML
Hey teacher, I have been trying to change the background colour, but I seem not to be getting it. Pls put me through.
My chessboard isn’t coming out in box pieces rather it’s coming in columns, what could be the problem?
Please how did you get the icons
Search html icon codes in Google search for clearer understanding
great work
Nice job sir, but the pawns icons on the black side are similar to the icon of the bishop, the pawns should be represented using #&9827
you can link your html and css using
http://127.0.0.1:5500/chess.html