Build A Piano With JavaScript - Tutorial

🚨 IMPORTANT:

Learning web development can be tough and boring, but it doesn't have to be. In this video we take a look at creating a simple JavaScript piano which can be played using the mouse or keyboard. This is a great project for anyone just getting started with JavaScript or anyone that wants to create a fun project.

📚 Materials/References:

🧠 Concepts Covered:

- How to use flexbox to center elements
- Using CSS variables to reduce redundant code
- Playing audio in the browser
- How to bind click and keypress events in JavaScript

🌎 Find Me Here:

#JavaScriptMusic #WDS #JavaScript

[ralphmartynsamaniego]

As a developer/musician, this brought me so much joy. <3

[nicholasdejong]

One of, if not the best web dev YouTubers I found. Keep up the good work! Your videos are beyond entertaining!

[tristanlanner]

You are amazing. Watching one of your videos for the first time, in less than 15 minutes I have learnt so much. Thank you so much for sharing your talent.

[nghianguyen-rron]

Great, now I can learn both HTML/CSS/JS and Piano :D

[Abbekej]

When your brain has been fried, and everybody around you tells you that you're not good enough.. and you see your classmates excel above you in every way imaginable...
Nothing, and I mean NOTHING gives me more relief than watching a smart guy, simplify a concept that has been explained to me 100 times by bad teachers. Not to mention the soft voice that gives me the feeling that everything is gonna be ok..

Thank you, subscribed.

[muhamamdjamali]

Wow by just reading the title the logic just jumped into my mind man its been a long way and I've learned a lot during it.

[knightmarerip]

This is a gem! Aside from learning how to build a piano, I found a lot of great techniques on how to do stuff that i have been struggling with! I have no plans of building a piano, but a lot of the coding techniques used here will definitely come in handy!!! thanx for sharing!!!

[brecoldyls]

I never knew about the repeat property for key press events! That could be really useful for html5 game devving

[orginy]

This blows my mind, every sentence you say I learn it’s crazy🙏🏼🙏🏼thank you so much

[GuRuGeorge]

This is the first kinda video like this where I actually knew how to do it myself without any help. feels good

[louisham]

Best HTML JS CSS tutorial I 've seen. Thank you

[chiar]

Even it is a weekend, watching you make me go back and start coding

[tolstoj]

You sir deserve a cookie! This was so awesome and easy to follow! I made myself a version stretching over couple of octaves. The only issue I found occurs when the horizontal viewport gets smaller past a point, the black keys become less and less centered and the white keys without a black key on their right hand side become too wide. I will figure that out now. With your awesome foundation it should be relatively straight forward. It probably has to do with the shared "--width"-CSS property for both types of keys.

[gabrielsoloman]

you're awesome, bro! you are able to explain lots of stuff in a really short time, great teacher, keep on!

[cristoferk]

Thanks, Web dev Simplified! I know just HTML and CSS, and now I want to learn JavaScript! And this project is very good for beginners in JavaScript!

[tracyjackson]

Thank you so much for this video! I was trying to find a way to have text play different audio files when clicked and I was able to do it thanks to your help!

[karimmirazul]

This is an awesome and clean video tutorial to understand how listener and basic .css works

[AzioraMusic]

Really playful example for training courses to beginners

[shreyabh]

Thank you so much for this, you have a fan for a lifetime

[thaanu]

Awesome.. That actually solved a problem I had for a queue system's alert sound.. Thank you