(watch this video in a new tab or window)
Here I'm going to create WebPage07. I'm going to start by duplicating my WebPage06 which on the Mac is duplicate. You can do copy/paste on Windows. Rename that to WebPage07.htm. I'll will steal the code from the responsive page after I open it with my text editor. Here's my Kirk's sample responsive design page. View the source, select all, copy. In the text editor, select all, paste for a good starting point. Soon I will get the ResponsivePage.css styling. Duplicate a page and rename it. I'll use WebPage07.css. Edit WebPage07.css with the text editor. View the ResponsivePage.css, select all, copy, go to WebPage07.css, select all, paste, save it and check it. Close ResponsivePage.css and ResponsivePage.htm in the browser. Next I'll remove unnecessary code and re-title the page. Link to WebPage07.css (or whatever you call yours). Add a header (we'll add an h1 tag later). Reload the page to see the changes.
For the assignment, apply changing background colors when the window is resized. When you change the width of the browser window, the background color will change. Change the colors to something unique in the CSS document and remove unnecessary CSS. Add a question mark followed by something unique to force a reload of the external stylesheet. Reload the page and verify that the colors are what you expect them to be.
Next we'll add 3 images named with your UniqueID underscore 04, 05, and 06 dot jpg. I have 3 images in my downloads folder. I'll use an application called Preview to edit my images. You can use whatever image editor you like. You'll need to resize the image to 1000 pixels wide, then crop it to 315 pixels tall, export it (or save it) in jpg format as your uniqueid in lower-case underscore 04, 05, or 06 dot jpg on your local machine. Then move those images to your web folder. By resizing the image to 1000x315, the new image should be well under .5MB. Next add HTML to display those images and verify that the images are displayed properly.
It's nice to present the images with a little design so I'll iterate with breaks, then move to div's, and will add some styling for all images on the page in the external stylesheet to make them responsive and add some white space using padding.
Finally, to firm up my understanding of responsive design I'll change the background color default to a blue-ish color. You can see the iteration process as I work to find my problem. Also notice that in my external stylesheet I have the body type listed twice unnecessarily. I could have just added the styling in the body type the first time it was listed.