Project
Virtual Piano
Hard
2040 completions
~ 14 hours
4.3You will learn how to write HTML documents and work with the most popular CSS properties. You will also learn how to use JavaScript to make event handlers for browser events and create and insert new elements into documents.
Provided by
JetBrains Academy
About
One of the many things that a front-end developer has to take care of is binding the functionality of a web application to the keys on the keyboard. In order to develop and strengthen the important skills of working with keyboard keys, we will make a virtual piano in this project.
Training project
This project allows you to practice and strengthen your coding skills, helping you get ready for more advanced tasks ahead.
What you'll learn
Once you choose a project, we'll provide you with a study plan that includes all the necessary topics from your course to get it built. Here’s what awaits you:
First, you need to add some elements to the body of the HTML document and learn to work with tags responsible for user input from the keyboard.
This stage is an opportunity to improve the appearance of your piano and make your application not only interesting but unique.
Learn how to create events that occur when a key is pressed on the keyboard.
Now, let's teach our musical instrument how to actually produce sound.
Finally, add the black keys to your piano and customize them. We're done!
Reviews
2 years ago
I have learned about positioning relative elements and z-index CSS property.
2 years ago
I have learned how to play on piano. :o) importing audio, playing it, styling, script eventlisteners...basic stuff
2 years ago
I have learned to work with different conceps together as audio and positioning.
4.3
Learners who completed this project within the Frontend Developer course rated it as follows: