In this exercise, you will create a web page with a simple responsive stylesheet that will look good on large- and small-screen devices.

The Page

Start by copying the provided HTML code into a .html file.

Add the viewport meta tag, so the page will render nicely on small screens:

<meta name="viewport" content="width=device-width,initial-scale=1" />

Large-Screen Style

We will focus our styling on the page's menu. On large screens we want the menu to display to the left of the main content, with the <main> having enough of a left margin to avoid it: [Screenshots scaled to 1/2 size.]

The button style used for the screenshot was adapted from CSS Button Generator. You may use this style, or create one you like better.

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  margin: 0.2em;
  padding: 0.75em 1em;
  background: #689;
  background-image: linear-gradient(to bottom, #689, #245);
  border-radius: 1.25em;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

Add CSS rules to put the menu as in the above screenshot, and make sure the main content avoids it.

Other changes: make sure the <main> has maximum width 40em so the lines aren't too long, and centre the <h1>.

Small-Screen Style

On smaller screens or window sizes, the menu-beside-content layout isn't as nice: we don't want to waste the screen real estate. In that case, we want the menu to display horizontally above the content like this:

Add a media query to give other CSS rules for small screens:

@media (max-width: 480px) { ... }

In there, you'll need to disable the floating content (float: none), make the list items appear horizontally (display: inline), and maybe change some other margins/sizing properties to make the menu look reasonable.

You can test the small-screen style by resizing your browser window, or looking at the page on a phone.

Submitting

Upload the files to the course web server, as you have before and make sure everything is working. You may want to create a folder exercise12. Submit the URL of your HTML page to the CourSys activity Exercise 12.