I woke up one morning and felt the need to test my HTML & CSS skills without using any library or framework. This is to test how well I understand 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>
<div id="terminal">
<!-- Terminal Bar -->
<section id="terminal__bar">
<div id="bar__buttons">
<button class="bar__button" id="bar__button--exit">✕</button>
<button class="bar__button">─</button>
<button class="bar__button">◻</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 Dev for more curated tech stuff.
You can also follow my activities on Facebook, Twitter, LinkedIn, and Instagram.