teaching machines

CS 347: Lab 9 – Media Queries

September 22, 2021 by . Filed under fall-2021, labs, webdev.

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:


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:

Once your solution matches the video, try removing the discontinuity in the image resizing.


The next step of your learning is to complete the following tasks:

See you next time.