Day 32 and I moved to a new section. In this section I am going to be learning responsive web design by building a piano. Responsive Design tells your webpage how it should look on different-sized screens.
- I started with basic HTML structure.
- I added 2 meta tags, one to optimize the page and the other to specify an accepted charset for the page.
- Time to start working on the piano. Created a div with an id = piano.
- Created a second div with a class= keys within the first div.
Within the second I created 7 more divs with the class key.
Remember the piano has both black and white keys. To differentiate he keys I added another class for black keys.
- Next step was to copy the 7 keys elements and paste 2 sets of it.
- I then linked the stylesheet to the css.
- Browsers can apply default margin and padding values to specific elements. To avoid that I reset the box model.
- After resetting the html box model, I did same for the elements and pseudo-elements (pseudo-elements are special keywords that follow a selector e.g. ::before, ::after) by setting the box-sizing property to inherit. This simply tells the targeted elements to use the same value as the parent element.
Please leave a comment. Thank you.