14. Styling
Tags: webdev, javascript, beginners, tutorial
Published: 2022-08-18 06:26:08

---
published: true
title: 14. Styling
tags: webdev, javascript, beginners, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--2Ycgb9E_--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7manuew9dwi5jlrf8p5.png
series: keyboard-learning-app
published_at: '2022-08-18T06:26:08Z'
---

### Width of keys

Current keyboard layout looks not realistic. E.g. `space` button is small like `alt` or `ctrl`.

How keyboard looks:

![How keyboard looks](https://raw.githubusercontent.com/ApayRus/keyboard-trainer-tutorial/master/tutorial/images/Screenshot%20from%202022-08-13%2007-22-48.png)

How keyboard should look:

![How keyboard should look](https://raw.githubusercontent.com/ApayRus/keyboard-trainer-tutorial/master/tutorial/images/Screenshot%20from%202022-08-13%2007-57-49.png)

If we look at the second image, or on a real keyboard, carefully, we'll notice that there are the primary keys: letters and numbers, and secondary keys: Tab, Backspace, Ctrl, Alt etc.

All primary keys have the same fixed width. But their number decreases from the top rows to the bottom. And the secondary buttons compensate for this decrease in number by increasing their width.

Rows 2 and 3 contain 13 primary keys and 1 secondary each. Backspace and Tab have the same width, and it is about 1.8 of primary key width. So we can say, that each row width is 14.8 units.

Row 4 contain 11 primary keys and 2 secondary. CapsLk and Enter have the same width:
(14.8 - 11)/2 = 1.9

Counting like this number of primary keys and width compensation of secondary keys in each row, and doing some approximation to achieve more realistic view, we get styling for the keyboard.

styles.css

```css
/* specified keys */

/* 1st row */

.key.Backspace {
	flex: 1.8;
}

/* 2nd row */
.key.Tab {
	flex: 1.8;
}

/* 3d row */
.key.CapsLock {
	flex: 2;
}

.key.Enter {
	flex: 2;
}

/* 4th row  */
.key.ShiftLeft {
	flex: 2.5;
}

.key.ShiftRight {
	flex: 1.5;
}

/* 5th row  */
.key.Space {
	flex: 8;
}
```

With these styles our keyboard looks realistic.

### Vertical alignment

Now the keyboard placed at the top of the screen. It's kinda asymmetric. Let's center it vertically.

Open developer tools: mouse right-click on the chrome page --> Inspect --> tab `Elements` (near the `Console`). Look at element nesting.

![](https://raw.githubusercontent.com/ApayRus/keyboard-trainer-tutorial/master/tutorial/images/Screenshot%20from%202022-08-14%2002-36-51.png)

In order to center `<div id="app">` we'll add to an element that wraps it (`body`) the style `display: flex` and other styles. We also add semantic tags: `header`, `footer` and `main` -- good attributes of an internet page.

index.html

```html
<body>
	<header>
		<h1>Keyboard Learning App</h1>
		<p>
			Read a tutorial for beginners on
			<a href="">how to code this app from the scratch</a>
		</p>
	</header>
	<main>
		<div id="app"></div>
	</main>
	<footer>
		<div class="socialLinks">
			<a href="https://github.com/apayrus/keyboard">Github</a>
			<a href="https://twitter.com/ApayRus">Twitter</a>
		</div>
	</footer>
	<script src="./index.js" type="module"></script>
</body>
```

styles.css

```css
body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 100vh;
	margin: 0; /* by default body has margin 8px, we don't need it */
	padding-left: 8px;
	padding-right: 8px;
}

header {
	text-align: center;
}

main {
	width: 100%;
}

footer {
	text-align: center;
}

a {
	text-decoration: none; /* removed underline */
}

a:visited {
	color: blue;
}

.socialLinks a {
	display: inline-block;
	margin: 0.5rem;
}
```

Result

![](images/Screenshot%20from%202022-08-18%2007-39-54.png)

[Diffs in code 14](https://github.com/ApayRus/keyboard/commit/79c4c22cb598448893efa64b042f7e0cd7ae9e2a)

[Entire code after the chapter 14](https://github.com/ApayRus/keyboard/commits/14.-Styling)

## Congratulations

Thank you my dear friend, if you followed this tutorial until now. You spent a lot of time to learn all these things (14 chapters). Honestly, me too -- to write it.

I hope this tutorial will help to newbies around the world. And the project itself will help to people to see how their languages all are fit into a single hardware keyboard with fixed number of keys. It unites us.