How I built a typical Ubuntu Terminal using HTML & CSS

I woke up one morning and felt the need to test my HTML & CSS skills without using any library nor framework. This is to test how well I understood HTML & CSS.

Today, many young developers don’t like taking the time to understand how HTML and CSS work under the hood before delving into front-end frameworks like React, Angular, Vue, etc. They all want to jump into using the tools and technologies to build apps. I know that feeling too. I was once at that state.

Without Further Ado, let’s get down to business.

In my project root directory, I created an index.htm file using my text editor and input the following boilerplate to start with:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ubuntu Terminal</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!-- Body Section -->
</body>
</html>

As you read through, you’ll notice I made use of 2 HTML5 semantic elements <main> and <section> introduced by W3C to clearly define elements.

You should also consider using HTML5 semantic elements in your next project.

Now, in the body section, I first inserted the main tag, giving it an id attribute of container and nest a div tag with an id attribute of terminal. I then sectioned the terminal into two (2) parts: the terminal bar and the terminal body. For the terminal bar section, I used a section tag with an id attribute of terminal__bar while the terminal body section takes a section tag with an id attribute of terminal__body.

I don’t want to go into many details so I don't bore you. You all want to see codes, not epistles.

The code snippet below shows everything you need to see. I believe even a newbie would understand what has been done there.

<main id="container">
<div id="terminal">
<!-- Terminal Bar -->
<section id="terminal__bar">
<div id="bar__buttons">
<button class="bar__button" id="bar__button--exit">&#10005;</button>
<button class="bar__button">&#9472;</button>
<button class="bar__button">&#9723;</button>
</div>
<p id="bar__user">fobabs@ubuntu: ~</p>
</section>
<!-- Terminal Body -->
<section id="terminal__body">
<div id="terminal__prompt">
<span id="terminal__prompt--user">fobabs@ubuntu:</span>
<span id="terminal__prompt--location">~</span>
<span id="terminal__prompt--bling">$</span>
<span id="terminal__prompt--cursor"></span>
</div>
</section>
</div>
</main>

The BEM methodology in naming my class and id attributes was used here

Now done with the skeletal work of the terminal, it’s time to add some beauty.

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
body {
background: linear-gradient(45deg, #57003f 0%,#f57453 100%);
font-family: Ubuntu;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#terminal {
width: 70vw;
height: 65vh;
box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
}
#terminal__bar {
display: flex;
width: 100%;
height: 30px;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: linear-gradient(#504b45 0%,#3c3b37 100%);
}
#bar__buttons {
display: flex;
align-items: center;
}
.bar__button {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin-right: 5px;
font-size: 8px;
height: 12px;
width: 12px;
box-sizing: border-box;
border: none;
border-radius: 100%;
background: linear-gradient(#7d7871 0%, #595953 100%);
text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}
.bar__button:hover {
cursor: pointer;
}
.bar__button:focus {
outline: none;
}
#bar__button--exit {
background: linear-gradient(#f37458 0%, #de4c12 100%);
background-clip: padding-box;
}
#bar__user {
color: #d5d0ce;
margin-left: 6px;
font-size: 14px;
line-height: 15px;
}
#terminal__body {
background: rgba(56, 4, 40, 0.9);
font-family: 'Ubuntu Mono';
height: calc(100% - 30px);
padding-top: 2px;
margin-top: -1px;
}
#terminal__prompt {
display: flex;
}
#terminal__prompt--user {
color: #7eda28;
}
#terminal__prompt--location {
color: #4878c0;
}
#terminal__prompt--bling {
color: #dddddd;
}
#terminal__prompt--cursor {
display: block;
height: 17px;
width: 8px;
margin-left: 9px;
animation: blink 1200ms linear infinite;
}
@keyframes blink {
0% {
background: #ffffff;
}
49% {
background: #ffffff;
}
60% {
background: transparent;
}
99% {
background: transparent;
} 100% {
background: #ffffff;
}
}
@media (max-width: 600px) {
#terminal {
max-height: 90%;
width: 90%;
}
}

Checking the CSS code above, you’ll notice I made use of ubuntu fonts to make the terminal look “Ubuntuish”. I believe it is understandable enough to comprehend.

“Et voilà!”. I believe you enjoyed me.

P.S. I hope to add some interactivity and functionalities to make it a full-fledged app in the future. If you want to contribute to the project, you can fork it on GitHub.

Don’t forget to follow me here on Medium for more curated articles and tech stuff.

You can also follow my activities on Facebook, Twitter, LinkedIn, and Instagram.

--

--

--

Developer 👨🏿‍💻

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

ImageEngine vs Cloudimage — Which is the More Powerful Image Optimizer?

ImageEngine vs Cloudimage

Java Chapter 1 : Anonymous Class, Functional Interface, and Lambda Expression

How to Build a Simple Restful API in PHP

Reduce Cost and Increase Productivity with Value Added IT Services from buzinessware — {link} -

Scylla’s Compaction Strategies Series: Write Amplification in Leveled Compaction

Rebiber: Normalizing BibTeX with Conference Information

Engineering journal

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
FOBABS

FOBABS

Developer 👨🏿‍💻

More from Medium

Creating Simple and Modern CSS Loading Indicators (aka Spinners)

Making Website Preloader Using HTML CSS JS

5 must have VS-Code Extensions for Web-Developers

Sorting/Rearranging HTML elements using jQuery UI — A Small Guide With Example

sortable / rearranged divs using jquery with placeholder