Typesetting a community school homepage

In this assessment we'll test your understanding of all the text styling techniques we've covered throughout this module by getting you to style the text for a community school's homepage. You might just have some fun along the way.

Prerequisites: Before attempting this assessment you should have already worked through all the articles in this module.
Objective: To test comprehension of CSS text styling techniques.

Starting point

To get this assessment started, you should:

  • Go and grab the HTML and CSS files for the exercise, and the provided external link icon.
  • Make a copy of them on your local computer.

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the background image. If the online editor you are using doesn't have a separate CSS panel, feel free to put it in a <style> element in the head of the document.

Project brief

You have been provided with some raw HTML for the homepage of an imaginary community college, plus some CSS that styles the page into a two column layout and provides some other rudimentary styling. You are to write your CSS additions below the comment the bottom of the CSS file, to make sure it is easy to mark the bits you have done. Don't worry if some of the selectors are repetitious; we'll let you off in this instance.

Fonts:

  • First of all, download a couple of free-to-use fonts. Because this is a college, the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif side-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice.
  • Use a suitable service to generate bulletproof @font-face code for these two fonts.
  • Apply your body font to the whole page, and your heading font to your headings.

General text styling:

  • Give the page a site-wide font-size of 10px.
  • Give your headings and other element types appropriate font-sizes defined using a suitable relative unit.
  • Give your body text a suitable line-height.
  • Center your top level heading on the page.
  • Give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit.
  • Give your body text some letter-spacing and word-spacing, as appropriate.
  • Give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px.

Links:

  • Give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page.
  • Make it so that links are underlined by default, but when you hover or focus them, the underline disappears.
  • Remove the default focus outline from ALL the links on the page.
  • Give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design.
  • Make it so that external links have the external link icon inserted next to them.

Lists:

  • Make sure the spacing of your lists and list items works well with the styling of the overall page. Each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs.
  • Give your list items a nice bullet, appropriate for the design of the page. It is up to you whether you choose a custom bullet image or something else.

Navigation menu:

  • Style your navigation menu so that it has an appropriate look for the look and feel for the page.

Hints and tips

  • You don't need to edit the HTML in any way for this exercise.
  • You don't necessarily have to make the nav menu look like buttons, but it needs to be a bit taller so that it doesn't look silly on the side of the page; also remember that you need to make this one a vertical nav menu.

Example

The following screenshot shows an example of what the finished design could look like:

Assessment

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the dev-mdc mailing list, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,