Look at that piano! I wish we could play it. Maybe we can add some JavaScript to it later! Anyway, I hope you learned something and are having a great day!

Responsive Design tells our webpage how it should look on different-sized screens.

In this video, we’ll use CSS and Responsive Design to code a piano. We’ll also learn more about media queries and pseudo selectors.

Connect on LinkedIn: https://www.linkedin.com/in/landon-schlangen-a3989a16b/

source

6 Comments

  1. <div id="piano">
    <div class="keys">
    <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>

    <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>
    </div>

Leave A Reply

Please enter your comment!
Please enter your name here