Babatunde Sulyman

Posted on Oct 14, 2023

How to build a Piano With CSS.

#webdev #tutorial #css #programming

The tech world is swarmed with many developers ranging from different stacks with the possibility of getting jobs from companies becomes extremely thin.

To get a job, the core requirement often asked by the recruiter is a portfolio which looks something like this: a blank portfolio meets rejection or is tossed to the bin or not attended to at all.

The first step to take as a developer is to have a standard portfolio that contains a list of outstanding projects to showcase your potential to the hirer(recruiter) when hiring.

There are many web development languages to build a project, like JavaScript, Python, etc., but we will be using CSS in this tutorial as it's the simplest to use.

What's CSS

CSS (cascading style sheets) is a language that allows you to customize your HTML document. HTML document constructs your website structure, and CSS styles the interior decoration of a website as you want. With CSS, your website has the following:

● An appealing design.
● Proper layout.
● Responsiveness (a web page that looks good on mobile and desktop devices.)

In this tutorial, you will learn how to build a piano with CSS in a few steps.

Prerequisites

For you to follow along with the article, you must have:

A basic understanding of HTML as there would be a revision on some HTML elements, If not, you can check this to revise your learning.
You also need a text editor and an image for the project. You can download the image through this link.

Table of Content

Choosing a text editor.
Choosing a text editor.
Linking CSS to HTML file.
The project.
Resources.
Conclusion.

Choosing a Text Editor

First, before you start writing the code, you need to have a working text editor, i.e. a code editor. If you have installed your text editor, launch it and click the workspace navigation bar. It should show something like this:

I’m using VS code, and this is my setup page

The best way to enjoy coding is to see what you are building live. For that, You will need to install an extension called “live server” on the VS code. A live server refreshes the web page when you make changes to your HTML file/CSS file.

To add a live server, follow these steps:

Tap the icon extension on the right side of the VS code.

Search for the live server and install it.
Go back to your html file and choose “open with live server” from the menu. Or press alt+l+alt+O.

Your webpage is ready to be seen in your browser.

How to Get Started

Create a folder

As the heading implies, you need to create a unique folder where your code files will sit. The two files are HTML and CSS files for this project. With this setting, the files are separated, and you can debug your code in peace.
You can use "Piano project," as the folder name.

Inside the folder, create the two files mentioned above. If you are uncertain, type index.html (for the first file) and style.css (for the second file).
Remember to check your spelling.

You are getting closer!
Your project setup should look similar to this if you are using VS code.

Linking CSS to an HTML file

Although you may embed your CSS codes inside an HTML file (either internal or inline CSS), that invites rough work. The goal is to have clean and readable documentation. To achieve that, we will be using external CSS which allows us to make multiple changes to our HTML elements (webpages).

The external CSS has to be linked for it to work.
To do that, copy the code below, then paste it within your <head> element in your html file.

Open the index.html file and add the following code:

 <link  rel="stylesheet"  href="style.css">

_ An external CSS nested in an HTML file_

The Project

You will set the piano structure with HTML and style it with CSS. Remember that our content should be in the body element.

The Piano’s structure is in a few steps:

Step 1: Create a container for the Piano keys

How do you create a container? You can use the <div> element as a container that serves as:
● A division from other common semantic elements.
● As a parent for its child elements.
● A container.

The div element is now serving as your Piano where its keys (children) will be.

To separate the div from other elements, give it an #ID selector with the name “piano.”
Write the code below:

<div id="piano"></div>

A few things to know:

The div has the Id attribute with the name Piano.
To create an Id, type the word Id, followed by the equal sign, and quotation marks.
The ID attribute accepts a unique name.

Step 2: Add an image
Go and embed the image link provided at the beginning of this tutorial to your html image tag.
Like this:

<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freecodecamp logo" class="logo">

To add an image, you must have:

An HTML image tag that starts with an opening tag; the greater than sign(<), has an SRC attribute; defines the path of the image, an Alt Attribute; the alternative name to the image when the page is loading or the browser can't fetch the image source and no closing tag.
Note:

● Img: stands for an image
● Src: is a source for the image
● Alt: means the Alternative name of the image

Step 3: The Piano’s keys

The Piano must-have keys, without the keys, there is no Piano. After the image element, add a div with a class of keys. Within the .keys element, nest seven div elements with the class name "Key”:


<div class="keys">
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
</div>

Note:
● The div .keys is the parent.
● The keys element holds seven div elements
● The seven div elements are your piano keys.

The class attribute, unlike the #Id, accepts more values (names). Before the next step, you need to separate the black key from the white key. Add “black--key” to the second, third, fifth, sixth, and seventh “key” elements you created.

Write this code:

<div class="key "></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

Note:
● The class attribute takes many values.
● There must be a space between the first and second values.

Step 3: Copy and paste

To round off the Piano’s structure, copy and paste the seven .key elements twice into the .keys div.

The key elements must be 21.

<div class="key "></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

<div class="key "></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

Now, you have completed your piano structure. Open your CSS file and let's see the magic.

In your HTML file, you created id and class selectors for the div elements. It's time to use these selectors.

But do you know that:
Everything on the web page is a box model?

Why?
This tells the browsers to add default margin and padding values to an html element. Despite that, you can reset it to fit your Piano.

First, change the HTML (webpage) default box model with the border-box property and give it a value of box-sizing.

html{
    box-sizing: border-box;
}

The box-sizing property respects the size of an element. It also takes new width and height values to resize the element.
To learn more about the border box, click the link.

Next, write the code below,

*, ::before, ::after{
    box-sizing: inherit;
}

Note
The * is a universal selector that targets all the elements on the page.
The Before and After selectors are pseudo-elements that target an element.
The** Before** is for the first child of the selected element,
The After targets the last child of the selected element.
The *has the box-sizing property with a value of Inherit.
The * is inheriting the value of the HTML box-sizing value.

Style the Piano

Give your Piano a background and some properties to see what you have been doing.
Write the code below:

#piano{
    background-color: #00471b;
    width: 992px;
    height: 250px;
    margin: 80px auto;
    padding: 90px 20px 0 2opx;
    position: relative;
    border-radius: 10px;
}

Let's define the above code:

● Background -color: the background for the Piano.
● Width: The values for the Piano width.
● Height: the values for the Piano height.
● Margin: the values place the Piano in the center.
● Padding: The values create space inside the Piano. In other words, the space for the top, left, bottom, and right of the Piano.
● Border-radius: the four outer edges of the Piano

The Keys

You are to use the class selector with the value "keys". This will create a container for the black and white keys.
Copy the below code:

.keys{
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

In the above snippet, the .keys element has:
● A padding-left property that shifts the key element to the left side inside the Piano
● Overflow: the value Hidden means the keys and their children will not move outside the Piano.

The key

This creates white keys for the piano

Take a look at the code:


.key{
    background-color:#ffffff;
    width:41px;
    height: 175px;
    position: relative;
    margin: 2px;

}

Note:
● Background color: the value creates a white color for the keys.
● Width: these values place the white keys within the keys’ container.
● Height: the value adjusts the white keys but not above the keys’ container.
● Margin: this spread and put space between each white key you have.
● Position: the "relative" value restricts the white keys to the .keys element i.e. the white keys are within the .keys element environment.

Remember the .keys element, which you created before, is the parent of the new white keys.

The position and shape of the white keys are not good-looking. These two properties will change the position and shape of the white keys.

Add the below code to it:

Float: left;
Border-radius: 0 0 3px 3px;

Check it out!
Note:
● Float: this specifies how an element should be floated. It’s used when an element has a box but isn’t positioned.
● Border-radius: defines the outer edge of an element.

The black keys
As you have seen the white keys, let’s create a selector for the black keys. To save you time, the Pseudo selectors you prepared will create the black keys.
See the code below:


.key.black--key::After{
    Content: "";
    Background-color: #1d1d22;

How did I do that?

The pseudo selector which is set to AFTER targets what follows the .key elements and gives it a new style.
The content should be empty when you don't.
The background of the element is different from the .key elements

Let's continue. Position the .black—key as absolute and give it a negative value for the left.


Position: absolute;
Left: -18px;

The above code takes the .black—keyfrom the .key elements to the left.

Note:

The position absolute moves an element from its normal flow and places it nearest to the parent. Who is the parent? The .key selector.
A position absolute must have a parent element, or else it overlaps other elements.

Include the width and height to make the black keys distinct from the white keys. Add the code below:


width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;

The above increases the black keys height and width but the border radius is the same as the white keys.

The image of the Piano

Set the image like this:


.logo{
width: 200px;
position: absolute;
top: 23px;
}

The above sets the image with position absolute, making it a bit lower from the top. With these steps, you have built a Piano with CSS, and you will be able to use CSS for your next project.

The Piano Output

When you run this project you get this output.

Conclusion

CSS is a language that formats a webpage by giving it a dynamic style as you want. In this article, we covered some CSS properties and learned how to use them. In the end, we used CSS to build a Piano.

I hope you have gotten what you expected from this article. Please feel free to share your opinions by commenting below.

Resources

● Developer Mozilla
● FreeCodeCamp

Top comments (10)

Winning Master FBG 🏀🥂🇳🇬 • Oct 16 '23

Hi, nice job tho. But I still don't understand what's the use of the image. I thought we were to build the layout with html and then use CSS to style it.

Babatunde Sulyman • Oct 16 '23 • Edited

Oh, thanks for the response. Yes, you are right . The image is FreeCodeCamp logo. I just replicated the whole project to give credit to them.

Babatunde Sulyman • Oct 16 '23

Oh, thanks for response. Yes, you are right . The image is a FreeCodeCamp logo. I just replicated the whole project to give credit to them.

Babatunde Sulyman • Oct 16 '23

Oh, thanks for response. Yes, you are right. The Piano was a project I built through FreeCodeCamp course . The image is FreeCodeCamp logo. I just replicated the whole project to give credit to them.

Winning Master FBG 🏀🥂🇳🇬 • Oct 19 '23

Alright, Thank you

Babatunde Sulyman • Oct 16 '23

Oh, thanks for response. The Piano was a project I built through FreeCodeCamp course . The image is FreeCodeCamp logo. I just replicated the whole project to give credit to them.