Looking for Assessment: Typesetting a community school page

[Cecil_Mahumane]

Hello,

I’m just looking for an assessment again. One mistake I noticed I made was being inconsistent with my color coding. Any other nitpicks, whether on my formatting or efficiency are welcomed.

https://codepen.io/cecmahumane/pen/mdRNNYa?editors=1100

Thanks

[Ran]

Hi @Cecil_Mahumane,

Nice work doing this on Codepen
I found this to be one of the most time consuming tasks to carry out so also well done on doing it.

Did you also do this locally on your computer using a code editor like vscode? I m just curious if you downloaded the fonts and created a font. I had never done it myself so it was good practice to do it. You can find details in the web fonts section.

Going through the list of requirements on Typesetting a community school homepage these are my comments:

1. You can also use rem as a relative unit. From what I understand the em inherits from the parent tag while the rem in linked to the root element so you can have more predictability. This is explained really well in the CSS values and units section.
2. I coundnt see any letter-spacing and word-spacing in you body text.
3. I couldnt see any styling on the active state on your links.
4. Did you manage to do the external style link on your local version? As far as I see you have correctly followed the code for that also using the correct selector.
5. One other thing I would do is add the CSS that is the github page. It makes the page look much better
   

Thanks for sharing your solution. I enjoyed looking back at this task.

Ran

[Cecil_Mahumane]

Hello Ran,

Thanks for the feedback! Yes I try and always do these exercises on vscode so I can get the full coding experience such as downloading the fonts like you mentioned.
going over your corrections:

1. Yes you are right, I was using em’s thinking they were rem. Once I understood that working in rems was they way to go after setting your root element to 10px, I was determined to learn how to use that unit.

2. Yes. I figured line-spacing and word spacing were an aesthetic touch. Is using word spacing and letter spacing something you would always recommend?

3. I’ll repost the codepen link with the link styling below.

4. Yes I did it on my local, but I forgot codepen needs an external link.

5. I was wondering why my codepen version looked so weird. I’ve amended.
   this in the link below.

https://codepen.io/cecmahumane/pen/mdRNNYa?editors=1100

Look forward to hearing from you.

[Ran]

Hi @Cecil_Mahumane

Like you I am learning front end so in respect of answering your question on word spacing and letter spacing I m not sure I am the best person to answer that. Kevin Powell is someone I follow on CSS and HTML. He gives the following advice in his article Letter spacing do’s and dont’s

Good things to do

• add letter-spacing to all uppercase text
• sometimes letter-spacing can be useful when the font-size gets small (less than 16px)
• And letter-spacing is really important if that small text is uppercase

Things you shouldn’t do

• Add too much letter-spacing .
• Add or reduce letter-spacing to your body. It’s possible the font hasn’t been optimized, but chances are that it’s perfectly fine.
• Reduce letter-spacing without a good reason (and if you do, pick a font that it works well with)

I cant sadly find anything for word spacing but the same logic would probably follow.

The new codepen looks superb!

Nice work! keep it up. I m going to have a look at your other questions.

best
Ran