CS 347: Lab 9 – Media Queries
Dear students:
Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.
Task 1
Recreate the following page using an internal stylesheet:
Use the following text, which is a slightly modified version of a Wikipedia article:
Quokkas An estimated 4,000 quokkas occur on the mainland, with nearly all mainland populations being groups of fewer than 50, although one declining group of over 700 occurs in the southern forest between Nannup and Denmark. The quokka (/ˈkwɒkə/) (Setonix brachyurus), the only member of the genus Setonix, is a small macropod about the size of a domestic cat. Quokkas look friendly because they are. Image courtesy of Flickr user samuelwest (https://www.flickr.com/photos/samuelwest/15391963536). In 2007, the quokka population on Rottnest Island was estimated at between 8,000 and 12,000. Snakes are the quokka's only predator on the island. The population on smaller Bald Island, where the quokka has no predators, is 600–1,000. At the end of summer and into autumn, a seasonal decline of quokkas occurs on Rottnest Island, where loss of vegetation and reduction of available surface water can lead to starvation. Quokkas can also be observed at several zoos and wildlife parks around Australia, including Perth Zoo. Physical interaction is generally not permitted without explicit permission from supervising staff. Quokkas additionally must give consent. Quokkas take care of their babies better than humans do. Image courtesy of Flickr user ceetap (https://www.flickr.com/photos/ceetap/4162245881). Quokka behavior in response to human interaction has been examined in zoo environments. One brief study indicated fewer animals remained visible from the visitor paths when the enclosure was an open or walk-through environment. This may have been due to the quokkas acquiring avoidance behavior of visitors, which the authors propose has implications for stress management in their exhibition to the public. In other words, they are quokkward.
Follow these guidelines in your solution:
- The main text has a width of 800 pixels when space allows.
- When the text is at its full width, the figures have a width of 700 pixels.
- The main text and figures are centered horizontally in the page.
- The margin notes, when in the margin, have a width of 200 pixels.
- The margin notes, when in the margin, are anchored against their containing paragraphs.
- The gap between the main text and the margin notes is 10 pixels.
Once your solution matches the video, try removing the discontinuity in the image resizing.
TODO
The next step of your learning is to complete the following tasks:
- Play CSS Diner.
- Continue working on the first project.
- Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and a snippet of source code in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page. If any of the requirements is not met, you will not receive full credit.
See you next time.
Sincerely,
