"Typesetting a community school home page" assessment

chrisdavidmills · August 4, 2017, 8:23am

It is slightly hard to tell from this JSFiddle, as a lot of the paths, etc. aren’t correct for this context, so things aren’t working, etc.

The finished live example is here:

https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/

The finished source code is here:

github.com/mdn/learning-area

css/styling-text/typesetting-a-homepage-finished/index.html

main

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>St Huxley's Community College</title>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>

  <header>
    <h1>St Huxley's Community College</h1>
  </header>

  <section>
      <h2>Brave new world</h2>

      <p>It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they start to move into the adult world of <a href="https://en.wikipedia.org/wiki/Examination">examinations</a>, <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>, <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and other life choices. Having the wrong mindset, becoming <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or making the wrong choices can contribute to them experiencing difficulty in taking their rightful place in today's ideal society.</p>

      <p>As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the right place.</p>

This file has been truncated. show original

The marking guide is here:

github.com/mdn/learning-area

css/styling-text/typesetting-a-homepage-finished/marking-guide.md

main

# Marking guide for "Typesetting a community school homepage"

The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Typesetting a community school homepage](https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 40. Work out their final mark, and then divide by 40 and multiply by 100 to give a percentage mark. For reference, you can find a [finished typeset homepage](index.html) that would be awarded top marks.

## Fonts

<dl>
<dt>"download a couple of free-to-use fonts" (3 marks)</dt>
<dd>the student will get one mark for the suitability of each of the two fonts (the description in the question says "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.") and one mark for the fonts being ok to use.</dd>
<dt>"Use a suitable service to generate bulletproof <code>@font-face</code> code" (2 marks)</dt>
<dd>The student will get the marks by using a service like fontsquirrel's generator to create bulletproof <code>@font-face</code> code. You can check it against the example linked above. If it is not cross-browser, or fails to apply the fonts, then they get no marks.</dd>
<dt>"Apply your body font to the whole page, and your heading font to your headings." (3 marks)</dt>
<dd>The body font should be applied to the <code>&lt;html&gt;</code> element, and the heading font should be applied only to <code>&lt;h1&gt;</code> and <code>&lt;h2&gt;</code>. One mark for each. Also, one bonus mark for providing something of a fallback for each in a font stack, and not just a single font.</dd>
</dl>

## General text styling

This file has been truncated. show original

Have a look and see how your code matches up