Today’s goals:
- Review box model challenge questions from yesterday
- Apply what we now know about CSS and the box model to our HTML Championships webpage
- Learn about CSS transparency and classes
0. Today’s featured websites
- CSS Vocabulary (from yesterday)
- http://pcdoeswhat.com/ (for Curt)
1. Review of yesterday & box model challenge questions
- Challenge #1: Add a new paragraph (put your name in some p tags). What happens? Why?
- Challenge #2: Why does the link have the same properties as the paragraph? How can you fix it so the link fits inside the box?
- Challenge #3: Can you add a background image to any of these elements? How? See if you can do it by copying and pasting the background image code from your other CSS practice page into this new webpage in the right location.
2. HTML/CSS Championships- Level 1 !
- You’re going to apply the CSS you’ve learned to make this candy table page a lot more visually interesting!
- You will apply Google Fonts (remember that?) and the CSS box model. You will change the page background color, add a #wrapper/container, and will apply margin, border, and padding properties.
- We’re also going to try CSS transparency and classes in our latest championships series
- To begin:
- Download this code
- Open Notepad++ and start a new page
- Paste the code into the new page and save it as webchamp2.html
- Open this Google Doc for your instructions