# "Typesetting a community school home page" assessment

**URL:** <https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683>\
**Category:** Learn\
**Created:** [August 3, 2017, 6:59pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683 "2017-08-03T18:59:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Air3s](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@Air3s](https://discourse.mozilla.org/u/Air3s)\
**Post date:** [August 3, 2017, 6:59pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/1 "2017-08-03T18:59:21Z")

</div>

Here is my typesetting project, how’d I do 😮

[https://jsfiddle.net/y1e1dLmg/](https://jsfiddle.net/y1e1dLmg/)

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [August 4, 2017, 8:23am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/2 "2017-08-04T08:23:59Z")

</div>

> [@Learning web development: Marking guides and questions](https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/47):
>
> Here is my typesetting project, how’d I do 😮
> 
> [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/y1e1dLmg/)

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/](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/)

The finished source code is here:

> <https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-finished/index.html>

The marking guide is here:

> <https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-finished/marking-guide.md>

Have a look and see how your code matches up 😉

---

<div class="post-metadata">

**Author:** ![Shayna\_Justus](https://avatars.discourse-cdn.com/v4/letter/s/a9a28c/32.png) [@Shayna\_Justus](https://discourse.mozilla.org/u/Shayna_Justus)\
**Post date:** [August 8, 2017, 12:51pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/3 "2017-08-08T12:51:43Z")

</div>

Hi!

I’ve been working on Typesetting a Community School Page for a few days now, and I’ve been struggling to get the navigation aligned along the top. I finally got it where I wanted it, but I feel like there may have been a better way. Here is that bit, could someone take a look?

* * *

```
    /*Navigation Styles*/
nav {
  float: right;
  margin-top: -600px;
}

nav li {
  list-style: none;
  margin-bottom: 2em;
}

nav li a {
  border: 1px solid #a66;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  font-size: 1.5em;
  line-height: 2;
}
```

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [August 24, 2017, 10:57am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/4 "2017-08-24T10:57:26Z")

</div>

> [@Learning web development: Marking guides and questions](https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/51):
>
> I’ve been working on Typesetting a Community School Page for a few days now, and I’ve been struggling to get the navigation aligned along the top. I finally got it where I wanted it, but I feel like there may have been a better way.

Hi there,

Sorry for missing your question for so long! In the final assessment answer, we align the nav menu on the right hand side; you can check the code we used here:

> <https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-finished/style.css>

You can also see the live final answer here:

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

For a good example of a top-aligned menu, see this one:

[https://mdn.github.io/learning-area/html/introduction-to-html/structuring-a-page-of-content-finished/](https://mdn.github.io/learning-area/html/introduction-to-html/structuring-a-page-of-content-finished/)

---

<div class="post-metadata">

**Author:** ![Rad\_Misc](https://avatars.discourse-cdn.com/v4/letter/r/aeb1de/32.png) [@Rad\_Misc](https://discourse.mozilla.org/u/Rad_Misc)\
**Post date:** [October 3, 2017, 1:26pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/5 "2017-10-03T13:26:22Z")

</div>

Hi, I have just finished “Typesetting a community school homepage project”. Please can you give me feedback on the work. I paste the CSS here. Many Thanks

/\* General setup \*/

- {  
box-sizing: border-box;

body {

dbackground-color: orange;

margin: 0 auto;  
min-width: 1000px;  
max-width: 1400px;  
}

/\* Layout \*/

section {  
float: left;  
width: 50%;  
}

aside {  
float: left;  
width: 30%;  
}

nav {  
float: left;  
width: 20%;  
}

footer {  
clear: both;  
}

header, section, aside, nav, footer {  
padding: 20px;  
}

/\* header and footer \*/

header, footer {  
border-top: 5px solid #a66;  
border-bottom: 5px solid #a66;  
}

/\* WRITE YOUR CODE BELOW HERE \*/  
@font-face {  
font-family: ‘abhaya\_libresemibold’;  
src: url(‘fonts/abhayalibre-semibold-webfont.woff2’) format(‘woff2’),  
url(‘fonts/abhayalibre-semibold-webfont.woff’) format(‘woff’);  
font-weight: normal;  
font-style: normal;  
}

@font-face {  
font-family: ‘candalregular’;  
src: url(‘fonts/candal-webfont.woff2’) format(‘woff2’),  
url(‘fonts/candal-webfont.woff’) format(‘woff’);  
font-weight: normal;  
font-style: normal;

}

html {  
font-size: 10px;  
}

body {  
font-family: ‘abhaya\_libresemibold’, sans-serif;  
xfont-family: sans-serif;

```
font-size: 1.5rem;

```

}

h1, h2 {  
font-family: ‘candalregular’;  
font-size: 2rem;  
letter-spacing: 1px;

```
    word-spacing: 2px;

```

}

p, ul,ol {  
letter-spacing: 1px;  
word-spacing: 2px;  
line-height: 1.5;  
}

section ul, aside ul {

list-style-type: disc;  
}

section ol {

list-style-type: decimal;  
}  
nav ul {  
list-style-type: none;  
}

h1 {  
text-align: center;  
}

section h2 + p {  
text-indent: 20px;  
}

a {  
outline: none;  
}

a:link {  
color: blue;  
}

a:visited {  
color: purple;  
}

a:focus {  
color: green;  
text-decoration: none;  
}

a:hover {  
color: red;  
text-decoration: none;  
}  
a:active {  
background: #265301;  
color: #CDFEAA;  
}

nav a {  
outline: none;  
text-decoration: none;  
display: inline-block;

width: 80%;  
margin-bottom: 7%;

text-align: center;  
line-height: 5;

border: 1px solid purple;

xcolor black;

}

a[href\*=“http”] {  
background: url(‘[https://mdn.mozillademos.org/files/12982/external-link-52.png](https://mdn.mozillademos.org/files/12982/external-link-52.png)’) no-repeat 100% 0;  
background-size: 16px 16px;  
padding-right: 19px;  
}

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [October 4, 2017, 7:30am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/6 "2017-10-04T07:30:14Z")

</div>

> [@Learning web development: Marking guides and questions](https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/109):
>
> Hi, I have just finished “Typesetting a community school homepage project”. Please can you give me feedback on the work. I paste the CSS here. Many Thanks

Hi Rad,

Your CSS looks mostly fine, although it creates a different effect to the answer; see the live version here: [St Huxley's Community College](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/)

Also have a look at the marking guide here and see if it matches up to what you’ve done: [learning-area/css/styling-text/typesetting-a-homepage-finished/marking-guide.md at main · mdn/learning-area · GitHub](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/marking-guide.md)

You can also find the source code here to check against: [learning-area/css/styling-text/typesetting-a-homepage-finished/index.html at main · mdn/learning-area · GitHub](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/index.html)

---

<div class="post-metadata">

**Author:** ![maurodibert](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/maurodibert/32/23004_2.png) [@maurodibert](https://discourse.mozilla.org/u/maurodibert)\
**Post date:** [November 13, 2017, 11:49am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/7 "2017-11-13T11:49:05Z")

</div>

Hi guys! I’ve just finished my Typesetting exercise! Any body could look at it? I **particularly have a doubt** on **“Remove the default focus outline from ALL the links on the page”**. I could do it but I don’t understand very weel how that appears and if is it well done!

Thanks!

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [November 13, 2017, 2:06pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/8 "2017-11-13T14:06:08Z")

</div>

> [@Learning web development: Marking guides and questions](https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/172):
>
> Hi guys! I’ve just finished my Typesetting exercise! Any body could look at it? I particularly have a doubt on “Remove the default focus outline from ALL the links on the page”. I could do it but I don’t understand very weel how that appears and if is it well done!

I am always happy to have a look. Do you have it available online anywhere?

You could also take a look at our finished example/marking guide:

- [St Huxley's Community College](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/)
- [learning-area/css/styling-text/typesetting-a-homepage-finished/marking-guide.md at main · mdn/learning-area · GitHub](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/marking-guide.md)
- [learning-area/css/styling-text/typesetting-a-homepage-finished/style.css at main · mdn/learning-area · GitHub](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/style.css)

---

<div class="post-metadata">

**Author:** ![maurodibert](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/maurodibert/32/23004_2.png) [@maurodibert](https://discourse.mozilla.org/u/maurodibert)\
**Post date:** [November 14, 2017, 11:27am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/9 "2017-11-14T11:27:22Z")

</div>

Thanks again @chrisdavidmills! I’m learning how to use github and have a question that couldn’t find anywhere: could I inside the platform move multiple files from one folder to another, on the same repository?

I’m trying to upload the Typesetting ex and want to move all the fonts to the /fonts folder and doing it one by one seems odd giving the circumstances! hehe.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [November 14, 2017, 11:36am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/10 "2017-11-14T11:36:07Z")

</div>

> [@Learning web development: Marking guides and questions](https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/175):
>
> Thanks again @chrismills! I’m learning how to use github and have a question that couldn’t find anywhere: could I inside the platform move multiple files from one folder to another, on the same repository?
> 
> I’m trying to upload the Typesetting ex and want to move all the fonts to the /fonts folder and doing it one by one seems odd giving the circumstances! hehe.

You should be able to just do this. If you want to commit these changes though, you might have to add the files where they are in the new location (e.g. `git add path/to/added/file`) and then remove the files from the old location (e.g. `git rm path/to/added/file`).

After you’ve moved the files, but not tried to add/commit them, you should be able to see what you’ll need to add and remove by doing `git status`

---

<div class="post-metadata">

**Author:** ![maurodibert](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/maurodibert/32/23004_2.png) [@maurodibert](https://discourse.mozilla.org/u/maurodibert)\
**Post date:** [November 18, 2017, 10:49am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/11 "2017-11-18T10:49:27Z")

</div>

@chrisdavidmills Hi! Sorry for the delay but I was learning how to use git. hehe. Here is the page: [https://maurodibert.github.io/typesetting/](https://maurodibert.github.io/typesetting/)

😉

---

<div class="post-metadata">

**Author:** ![maurodibert](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/maurodibert/32/23004_2.png) [@maurodibert](https://discourse.mozilla.org/u/maurodibert)\
**Post date:** [November 18, 2017, 10:53am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/12 "2017-11-18T10:53:56Z")

</div>

Now that I was reading and trying all week long (I’ve just had 50 min a day for studying 😢), I understand what you’re talking about! hehe. Thanks again @chrisdavidmills!

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [November 20, 2017, 6:58am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/13 "2017-11-20T06:58:44Z")

</div>

Cool Mauro, that looks pretty good. If you compare it to our finished example ([https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/)), you’ll see that it is similar. You’ve chosen different fonts, but that’s fine.

---

<div class="post-metadata">

**Author:** ![alfredgareth10](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@alfredgareth10](https://discourse.mozilla.org/u/alfredgareth10)\
**Post date:** [November 15, 2017, 6:12pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/14 "2017-11-15T18:12:49Z")

</div>

Can I get the marking guide for the screenshot image on this page: [https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling\_text/Typesetting\_a\_homepage](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) .  
Or simply the corrected html of the screenshot at the end of the page on the link above.  
Please kindly send it to [alfredgareth10@gmail.com](mailto:alfredgareth10@gmail.com)

---

<div class="post-metadata">

**Author:** ![filip.sky](https://avatars.discourse-cdn.com/v4/letter/f/c37758/32.png) [@filip.sky](https://discourse.mozilla.org/u/filip.sky)\
**Post date:** [November 20, 2017, 9:21pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/15 "2017-11-20T21:21:29Z")

</div>

Hi Chrismills  
thanks for old replies

could you give me feedback,please on this assesment for fundamental css  
i just strugled how to do not intend last paragraph in section  
here is my css code:

/\* General setup \*/  
@font-face {  
font-family:“alegreya”;  
src: url(“fonts/Alegreya-Regular.otf”);  
font-family:“arcon”;  
src: url(“fonts/Arcon-Regular.otf”);  
}

- {  
box-sizing: border-box;  
}

body {  
margin: 0 auto;  
min-width: 1000px;  
max-width: 1400px;  
font-family: alegreya;  
line-height: 1.5;  
letter-spacing: 1.5px;  
word-spacing: 2px;

}

h1, h2 {  
font-family: arcon;  
}

html {  
font-size: 10px;  
}

h1 {  
font-size: 3.2rem;  
text-align: center;  
letter-spacing: 3px;  
}

h2 {  
font-size: 2.4rem;  
}

/\* Layout \*/

section {  
float: left;  
width: 50%;  
}

aside {  
float: left;  
width: 30%;  
}

nav {  
float: left;  
width: 20%;

}

footer {  
clear: both;  
}

header, section, aside, nav, footer {  
padding: 20px;  
}

/\* header and footer \*/

header, footer {  
border-top: 5px solid #a66;  
border-bottom: 5px solid #a66;  
}

/\* WRITE YOUR CODE BELOW HERE \*/  
section p {  
text-indent: 20px;  
}

section:last-child p {  
text-indent: 0px;  
}  
li a, a {  
color: firebrick;  
}  
li {  
line-height: 1.5;  
list-style-type: circle;  
}  
a:link{}  
a:visited {

}

a:focus {  
color:blue;  
outline: none;  
text-decoration: none;  
}

a:hover {  
text-decoration: none;  
color:chartreuse;  
}

a[href\*=“http”] {  
background: url(‘img/external-link-52.png’) no-repeat 100% 0;  
background-size: 10px 12px;  
padding-right: 12px;

}

nav li {  
text-decoration: none;  
list-style-type: none;  
display: block;  
border: 1px solid firebrick;  
box-sizing: border-box;  
padding: 10px 10px;  
margin-bottom: 3px;  
text-align: center;  
font-size: 2.4rem;  
font-family: arcon;

}  
nav a{  
text-decoration: none;  
}  
nav a:hover {  
color:white;  
background-color: firebrick;  
text-decoration: none;  
}

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [November 21, 2017, 10:14am UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/16 "2017-11-21T10:14:55Z")

</div>

> [@Learning web development: Marking guides and questions](https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294/186):
>
> could you give me feedback,please on this assesment for fundamental css
> 
> i just strugled how to do not intend last paragraph in section
> 
> here is my css code:

Sorry - what assessment is this code from? Can you send me the URL of the assessment/exercise you are working on?

Thanks.

---

<div class="post-metadata">

**Author:** ![filip.sky](https://avatars.discourse-cdn.com/v4/letter/f/c37758/32.png) [@filip.sky](https://discourse.mozilla.org/u/filip.sky)\
**Post date:** [November 21, 2017, 2:53pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/17 "2017-11-21T14:53:41Z")

</div>

> **[Challenge: Typesetting a community school homepage - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage)**
>
> In this challenge, 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.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [November 22, 2017, 12:18pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/18 "2017-11-22T12:18:55Z")

</div>

OK, thanks.

So, this mostly looks OK. It looked like you understood what to do well enough.

What bits do you think are not right?

---

<div class="post-metadata">

**Author:** ![filip.sky](https://avatars.discourse-cdn.com/v4/letter/f/c37758/32.png) [@filip.sky](https://discourse.mozilla.org/u/filip.sky)\
**Post date:** [November 22, 2017, 3:29pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/19 "2017-11-22T15:29:12Z")

</div>

thanks for answer here is my bit that is wrong

```
 task from assessment:

```

Give the **first paragraph after each heading** in the a little bit of text-indentation, say 20px.

… and I stragling how to intend p element after each headings…I did indentation **for all p element in section** but indentation has also last p element before a list element that shoul not be indented, am I right?

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [November 22, 2017, 3:50pm UTC](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/20 "2017-11-22T15:50:12Z")

</div>

Ah, OK - I can help you on this one.

You need to just an “adjacent sibling” selector — the plus (+) sign, like so:

```auto
h2 + p {
    text-indent: 20px;
}

```

This selects only paragraphs that come directly after an h2 in the markup. In this example it is really simple, because there are only two paragraphs that come after headings, and the headings are both h2s. In a more complex site you’d have to be more flexible, and do something like

```auto
h2 + p, h3 + p, h4 + p {
    text-indent: 20px;
}

```

[Next page](https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683.md?page=2)