Realistic Keyboard UI Design in HTML & CSS
Categories: HTML and CSS
Modern web design is no longer limited to simple buttons and cards. Today, developers create full user interfaces directly in the browser, including dashboards, calculators, system layouts, and even realistic keyboards.
A keyboard UI project is an excellent way to improve your HTML and CSS skills. It teaches you layout control, spacing, alignment, responsiveness, and component structuring — all essential skills for frontend developers.
In this tutorial, you will learn how to build a complete keyboard interface using only HTML and CSS, understand how each section is structured, and discover how to optimize the project for real‑world usage.
Watch the Video : Keyboard UI Design in HTML & CSS
Why Build a Keyboard UI in HTML & CSS?
A keyboard layout project is not just a design experiment. It has many practical benefits:
- Improves understanding of CSS positioning and layout systems
- Strengthens knowledge of spacing, margins, and alignment
- Helps in creating pixel‑perfect UI designs
- Useful for typing tutor websites and coding practice platforms
- Adds strong visual projects to your developer portfolio
- Demonstrates real frontend skills to recruiters
Many companies value developers who can build complex layouts using pure CSS without relying heavily on frameworks.
Project Overview
This project displays:
- This project displays:
- Function keys row (F1–F12)
- Number row
- Alphabet keys
- Special keys (Shift, Enter, Backspace, Ctrl, Alt, Caps Lock)
- Arrow keys section
- Numeric keypad section
All keys are styled individually using CSS classes and layout techniques based on floats and percentage widths.
Folder Structure
Your project structure should look like this:
keyboard-ui/
│
├── index.html
├── style.cssKeeping files organized improves maintainability and helps when submitting projects or hosting online.
Understanding the HTML Structure
The HTML layout uses a container‑based structure with multiple nested div elements.
Main Sections
.wrapper– full screen background container.container– keyboard body.main-l– main keyboard section.mail-r– numeric keypad section
Each key is represented by a div with specific width and height to match real keyboard proportions.
CSS Layout Strategy
This project uses:
- Float based alignment
- Float based alignment
- Percentage widths
- Background color layers
- Utility classes for spacing
Although modern projects use Flexbox or Grid, float‑based layouts still demonstrate strong CSS fundamentals.
Keyboard Sections Explained
1. Function Keys Row
Includes Esc, F1–F12, Print Screen, Insert, Delete.
These keys are smaller in height and aligned at the top.
2. Number Row
Includes:~ 1 2 3 4 5 6 7 8 9 0 - =
Backspace is wider than normal keys.
3. Alphabet Rows
Standard QWERTY layout:
Q W E R T Y U I O P A S D F G H J K L Z X C V B N M
4. Control Keys
Includes:
- Tab
- Caps Lock
- Shift
- Ctrl
- Alt
- Windows key
- Spacebar
5. Arrow Keys
Separate cluster at bottom right
6. Numeric Keypad
Includes numbers 0–9, operators, Enter, Num Lock
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realistic Keyboard UI Design in HTML & CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="warpper fl bg">
<div class="container bg1">
<div class="main-l fl">
<div class="cunction fl bg2">
Esc</div>
<div class="cunction mfl bg2">
F1</div>
<div class="cunction mfl bg2">
F2</div>
<div class="cunction mfl bg2">
F3</div>
<div class="cunction mfl bg2">
F4</div>
<div class="cunction mfl bg2">
F5</div>
<div class="cunction mfl bg2">
F6</div>
<div class="cunction mfl bg2">
F7</div>
<div class="cunction mfl bg2">
F8</div>
<div class="cunction mfl bg2">
F9</div>
<div class="cunction mfl bg2">
F10</div>
<div class="cunction mfl bg2">
F11</div>
<div class="cunction mfl bg2">
F12</div>
<div class="cunction mfl bg2">
PrtScr</div>
<div class="cunction mfl bg2">
Insert</div>
<div class="cunction mfl bg2">
Delete</div>
<div class="number fl bg2">
~<p>
`</p>
</div>
<div class="number mfl bg2">
!<br>1</div>
<div class="number mfl bg2">
@<br>2</div>
<div class="number mfl bg2">
#<br>3</div>
<div class="number mfl bg2">
$<br>4</div>
<div class="number mfl bg2">
%<br>5</div>
<div class="number mfl bg2">
^<br>6</div>
<div class="number mfl bg2">
&<br>7</div>
<div class="number mfl bg2">
*<br>8</div>
<div class="number mfl bg2">
(<br>9</div>
<div class="number mfl bg2">
)<br>0</div>
<div class="number mfl bg2">
_<br>-</div>
<div class="number mfl bg2">
+<br>=</div>
<div class="number fr bg2 back">
<p class="eng">
Backspace</p>
</div>
<div class="number fl bg2 back">
<p class="eng tab">
Tab</p>
</div>
<div class="number mfl bg2">
<p class="eng">
Q</p>
</div>
<div class="number mfl bg2">
<p class="eng">
W</p>
</div>
<div class="number mfl bg2">
<p class="eng">
E</p>
</div>
<div class="number mfl bg2">
<p class="eng">
R</p>
</div>
<div class="number mfl bg2">
<p class="eng">
T</p>
</div>
<div class="number mfl bg2">
<p class="eng">
Y</p>
</div>
<div class="number mfl bg2">
<p class="eng">
U</p>
</div>
<div class="number mfl bg2">
<p class="eng">
I</p>
</div>
<div class="number mfl bg2">
<p class="eng">
O</p>
</div>
<div class="number mfl bg2">
<p class="eng">
P</p>
</div>
<div class="number mfl bg2">
{<br>[</div>
<div class="number mfl bg2">
}<br>]</div>
<div class="number fr bg2">
|<br>\</div>
<div class="number fl bg2 caps">
<p class="eng mrt">
Caps Lock</p>
</div>
<div class="number mfl bg2">
<p class="eng">
A</p>
</div>
<div class="number mfl bg2">
<p class="eng">
S</p>
</div>
<div class="number mfl bg2">
<p class="eng">
D</p>
</div>
<div class="number mfl bg2">
<p class="eng">
F</p>
</div>
<div class="number mfl bg2">
<p class="eng">
G</p>
</div>
<div class="number mfl bg2">
<p class="eng">
H</p>
</div>
<div class="number mfl bg2">
<p class="eng">
J</p>
</div>
<div class="number mfl bg2">
<p class="eng">
K</p>
</div>
<div class="number mfl bg2">
<p class="eng">
L</p>
</div>
<div class="number mfl bg2">
:<br>;</div>
<div class="number mfl bg2">
"<br>'</div>
<div class="number fr bg2 caps">
<p class="eng lent">
Enter</p>
</div>
<div class="number fl bg2 shift">
<p class="eng sft">
Shift</p>
</div>
<div class="number mfl bg2">
<p class="eng">
Z</p>
</div>
<div class="number mfl bg2">
<p class="eng">
X</p>
</div>
<div class="number mfl bg2">
<p class="eng">
C</p>
</div>
<div class="number mfl bg2">
<p class="eng">
V</p>
</div>
<div class="number mfl bg2">
<p class="eng">
B</p>
</div>
<div class="number mfl bg2">
<p class="eng">
N</p>
</div>
<div class="number mfl bg2">
<p class="eng">
M</p>
</div>
<div class="number mfl bg2">
<br>,
</div>
<div class="number mfl bg2">
><br>.</div>
<div class="number mfl bg2">
?<br>/</div>
<div class="number fr bg2 shift">
<p class="eng lsft">
Shift</p>
</div>
<div class="space fl bg2 ctrl">
<p class="eng mrt">
Ctrl</p>
</div>
<div class="space mfl bg2">
<p class="eng">
Fn</p>
</div>
<div class="space mfl bg2">
<p class="eng">
<i class="fab fa-windows"></i>
</p>
</div>
<div class="space mfl bg2">
<p class="eng">
Alt</p>
</div>
<div class="space mfl bg2 sp">
</div>
<div class="space mfl bg2">
<p class="eng">
Alt</p>
</div>
<div class="space mfl bg2">
<p class="eng">
Ctrl</p>
</div>
<div class="space fr aro">
<div class="arobtn fl">
<div class="arobtnsub">
</div>
<div class="arobtnsub bg2 ardwn">
←</div>
</div>
<div class="arobtn mfl2">
<div class="arobtnsub bg2">
↑</div>
<div class="arobtnsub bg2 ardwn">
↓</div>
</div>
<div class="arobtn fr">
<div class="arobtnsub">
</div>
<div class="arobtnsub bg2 ardwn">
→</div>
</div>
</div>
</div>
<!-------end--main-left-->
<div class="mail-r fr">
<div class="lnum fl">
<div class="pgup fl bg2">
PgUp</div>
<div class="pgup mfl3 bg2">
PgDn</div>
<div class="pgup fr bg2">
Home</div>
<div class="calnub fl bg2">
Num<br>Lock</div>
<div class="calnub mfl3 bg2 eng">
/</div>
<div class="calnub fr bg2 eng">
*</div>
<div class="calnub fl bg2 eng">
7</div>
<div class="calnub mfl3 bg2 eng">
8</div>
<div class="calnub fr bg2 eng">
9</div>
<div class="calnub fl bg2 eng">
4</div>
<div class="calnub mfl3 bg2 eng">
5</div>
<div class="calnub fr bg2 eng">
6</div>
<div class="calnub fl bg2 eng">
1</div>
<div class="calnub mfl3 bg2 eng">
2</div>
<div class="calnub fr bg2 eng">
3</div>
<div class="calzeo fl bg2">
<p class="eng">
0</p>
</div>
<div class="calnub fr bg2 dot">
<p class="eng">
.</p>
</div>
</div>
<div class="rsym fr">
<div class="end bg2">
End</div>
<div class="mins bg2 eng">
-</div>
<div class="plus bg2">
+</div>
<div class="enter bg2">
Enter</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.fl{float: left;}
.fr{float: right;}
.mfl{float: left; margin-left: 1%;}
.mfl2{float: left; margin-left: 6%;}
.bg{background-color: #181e25;}
.bg1{background-color: #9F9F98;}
.bg2{background-color: #000000;}
.warpper{width: 100%; height: 100vh;}
.container{height: 380px; width: 90%; margin: auto; margin-top: 150px;}
.main-l{height: 350px; width: 76%; margin: 2% 0.5%;}
.cunction{height: 30px; width: 5.31%; color: #fff; text-align: center; margin-bottom: 10px;}
.number{height: 45px; width: 6%; color: #fff; text-align: center; margin-bottom: 10px; }
.back{width: 9%;}
.eng{line-height: 45px;}
.caps{width: 11%;}
.shift{width:14.5%;}
.space{height: 55px; width: 6%; color: #fff; text-align: center; margin-bottom: 10px;}
.sp{width: 34%;}
.aro{width: 21.5%;}
.arobtn{height: 55px; width: 29%;}
.arobtnsub{height: 25px; width: 100%;}
.ardwn{margin-top: 8px;}
.mail-r{height: 350px; width: 22%; margin: 2% 0.5%;}
.lnum {width: 78%;}
.pgup{height: 30px; width: 31%; color: #fff; text-align: center; margin-bottom: 10px;}
.mfl3 {float: left; margin-left: 4%;}
.calnub{height: 45px; width: 31%; color: #fff; text-align: center; margin-bottom: 10px;}
.calzeo{height: 57px; width: 66%; color:#fff; text-align: center; margin-bottom: 10px;}
.dot{height: 57px;}
.rsym{width: 18%;}
.end{margin-bottom: 10px; height:30px; color: #fff; text-align: center;}
.mins{margin-bottom: 10px; height: 45px; color: #fff; text-align: center;}
.plus{height: 98px; margin-bottom: 10px; color: #fff; text-align: center; line-height: 98px;}
.enter{height: 112px; margin-bottom: 10px; color: #fff; text-align: center; line-height: 112px;}
.tab{margin-right: 65%;}
.mrt{margin-right: 40px;}
.sft{margin-right: 110px;}
.lent{margin-left: 70px;}
.lsft{margin-left: 110px;}
Conclusion
Building a keyboard UI using HTML and CSS is one of the best exercises to improve frontend design skills. It strengthens your layout understanding, boosts confidence, and adds a unique project to your portfolio.
Whether you are a beginner or an experienced developer, this project demonstrates practical UI building skills that employers appreciate.
Keep experimenting, keep improving, and continue building real projects.
