Take the HTML5 template from the class website.
1. remove the <nav> and <ul> so only the <header> and <h1> are left.
2. Enter "CSS3 Exercise" in h1
3. Remove the <h2>, <p>, <figure> <img> and <figcaption> from the <article> tag.
4. remove the <footer> tag.
5. remove the <main> tag.
6. We will manipulate the HTML using only CSS styling.
7. Remove all the existing styles in the embedded style sheet.
8. Give the section —the holding container — 100px margins on top and left to push the content away from the ends, and position it relative, in case absolute position is used.
9. Give the header a 60 pixel margin at the bottom.
10. The article will be given the style that will change as we move the window. The default style is a 200px square with a background color and a 1px border, positioned absolutely.
11. Rename the h1 "CSS Exercise"
12. We want to annotate what we are doing and will use the pseudo element header:after to tack on the word plain and set it below the header using relative positioning.
13. header:after {content:"plain"; position: relative; top: 0px; color: hsla(0,100%,50%,.7); font-size: 1.2em;}
14. and finally, to place a number 1 in front of "CSS Exercise" header, so it becomes easy to keep track of the numbers that we complete.
15. h1:before {content:"1. ";}
16. Now comes the fun part. We are going to make this responsive, so that as we pull it past 450px, the style of the <article> element and the description in the title will change.
17. First we make the @media block set to trigger at a window with greater than 450px: @media all and (min-width: 451px) {
    }
18. Inside the @media block, we change the article using border radius to 50%. That turns a square into a circle.
19. article {border: 20px solid #666; border-radius: 50%;}
20. We want to change the description from plain to "border radius" header:after {content:"border radius";}
21. and finally, place a number 1 in front of "CSS Exercise" header to keep track of the number that we complete.
22. h1:before {content:"1. ";}
23. Go back to your document and move the page width beyond the 450px threshold, and you should see the square change.
24. You will be getting the different properties from the demonstrations on the website.
25. The procedure remains the same, with an incremental 50px jump with each new media query.
26. Notice that there is no need to repeat properties if they are already defined. There is only a need to overwrite properties that will change.
27. The next media query looks like @media (min-width: 441px) {
    }
28. article { border-radius: 0% 1000%; }
29. h1:before {content:"2. ";}
30. You can do the remainder in class, or if we do not finish, for homework.