Assessment required for Typesetting a community school homepage

Just finished the typesettings test and would love an assessment! Wasn’t sure if my nav menu would be up to the mark, had some trouble figuring it out.

I used ‘border’ for the nav menu outline, would using outline be appropriate here too?

Test: Typesetting a community school homepage - Learn web development | MDN (mozilla.org)

My Work:
knight-of-crows.github.io

Source files:
Knight-of-Crows/knight-of-crows.github.io: MDN Styling Text Assessment

Hi @Assad_Newar

Your page looks really cool. Congrats! :medal_sports:

Here are my comments:

  • font-family: The generic names like sans-serif or serif should always go last. (e. g. font-family: 'cinzelregular', 'Times New Roman', serif;)
  • external link icons: They seem a bit high. Maybe use 50% instead of 0 for the “y value”.

We normally use borders for things that are “always there” like around those nav items. Outlines are mainly used for focus styles i. e. when navigating with the keyboard. They are not mandatory as long as there is some kind of indication where the user is on the page (like you did with the changed background color)

I hope this is understandable. Feel free to tell me if not. :slightly_smiling_face:

Cheers,
Michael

1 Like

Thanks for the explanation, I understand it now. Another question if you don’t mind, most of the assessments require relative units like rem/em instead of absolute units, is there any element other than html that should always have absolute units, and should I use a mixture of rem/em or choose one and go along with that for my entire website.

1 Like

As a general rule of thumb: Style font-size, margin and padding with relative units (except for the base font-size on the html element). Use absolute units for borders and the html font-size.
As when to use rem or em: It depends :slightly_smiling_face: Keep in mind that em units are relative to the parent element. For example, if elements that use 1.5em are nested, every level gets bigger and bigger. This may be desired or not depending on the situation.

I hope that helps a bit.

Cheers,
Michael

1 Like

Thanks, that clears it up!

1 Like