Day 35: Piano Building Finale

Photo by Amir Doreh on Unsplash

Day 35: Piano Building Finale

Day 35 and a good day to round up building this incredible piano and maybe play a song for you guys. Let’s get right to it.

  1. When the browser’s width is less than 768px, notice that the keys scatters. To avoid that and make the work presentable by using the overflow: hidden; property. This property will hide any element that falls outside the width.

Day 35 no1a.png

Day 35 no1b.png

  1. @media rule if the browser window is bigger than 769px but smaller than 1199px was applied.

Day 35 no 2a.png

  1. For the new media, the width of #piano and .keys were worked on.

Day 35 no 3a.png

Day 35 n0 3b.png So, after I finished building our Piano, I wanted to push it to github. Now I am used to dragging the file and commiting directly on github, but I learnt that's not ideal, hence as a programmer I decided to use VScode (thanks to Buchi), my dear people, I nearly cried. People of God, VScode humbled me, google was trying to explain it to me, I wasn't understanding. Buchi came through for me finally. (Thank you Buchi, I shall continue to disturb you). So, let me present to you all the link to the Piano: onose12.github.io/Piano Please feel free to play your favorite song on it. I love you all.