with CSS id "instrument". This is the

that all our buttons/keys are going to be inside. Create a CSS id called "instrument". Give it a height of 116px, a width of 812 px. It should have 10px padding on the right, 50 px padding on the top, and auto margins. Make the position "absolute", and set it's location to 0, 0, 0, 0 (top: 0; left: 0; bottom: 0; right: 0;) --------------------------------- Now make boxes that will serve as buttons (or keys, if you're a piano player) to play each note: Each button is its own

, with its own CSS id. (I advise each individual note name/letter for the id names). The class can be named "box" or "button" Create a CSS class called "box" or "button", or whatever you chose. The class should have a width and height of 100px, a margin on the left and top of 10px, and should be set to float left. ################################# ***PART 3: Revenge of the Hex Colors*** --------------------------------- Make the background black. It's classy. I swear. --------------------------------- Now let's add color to each of the boxes/keys (Yes, you must use hex colors for everything in this project). Create an id for each note, and add a fill color (I recommend something colored, but dark and close to black). Add a 3px solid border to each (in a different color than the inside fill of the box/button/key) ################################# PART 4: A New (...Hover? The Star Wars theme is starting to fall apart now) --------------------------------- Now add a psuedo-class so that the fill color of one of your buttons/boxes/keys changes when you hover over it. (I recommend a solid color that's close to the dark original color you used for it- see example pic on Weebly). Let's also change the pointer arrow to a pointing finger when hovering over the button/box/key. (Add "cursor: pointer;" to the hover psuedo-class) Test it out in Preview. Does it work? --------------------------------- Now add hover psuedo-classes for the rest of the buttons/boxes/keys. Be sure to check that each of them works before moving on to the next one! ################################# PART 5: (The Empire Clicks Back...?) --------------------------------- Add a new psuedo-class so that the fill color of one of your buttons/boxes/keys changes when you click it (Hint: "active"). (I recommend a solid color that's the same as the outline color- see example pic on Weebly). Test it out in Preview. Does it work? --------------------------------- Now add hover psuedo-classes for the rest of the buttons/boxes/keys. Be sure to check that each of them works before moving on to the next one! ################################# ***PART 6: Return of the Jediscript (uh, I mean, Javascript)*** --------------------------------- Open a Then, define the variables inside the new tag. For example: var cNote = document.getElementById('cAudio'); ################################# ***PART 7: The JQuery Awakens*** --------------------------------- Add the following script in the tag of your HTML page: --------------------------------- In the audio tag for your C note in your HTML page, add the id "cAudio". Add a