Assessment required for St Huxley's College

Hello fellow developers, I finished the following MDN exercise:

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

I would like someone with more experience to take a look and point out to any mistakes.

Also, I have two questions:

  1. I didn’t know how to edit the links inside the <Nav> because all those pseudo classes kept overwriting them because they had higher specificity. I used a custom class and inserted it into my html as apparent in my solution. However, you said not to do that, so my question is how?

  2. Jsfiddle seems not to respect the background-position I set on the links that have an icon. Actually, it seems only to ignore the vertical value. The very same code works perfectly fine inside of my browser. I use Edge.

Here is my fiddle:
Edit fiddle - JSFiddle - Code Playground

Here is a screenshot that shows how links with an icon behave in the browser:

Hello @Rastko_Gojgic

Well done!

Using a selector like nav li a should work.

JsFiddle does respect the background-position. You can see the difference when changing top to bottom. It’s just a very small difference. The reason why it’s much higher in your browser are the different fonts. Your font files are in the same directory as the .css file in your local environment, but JsFiddle obviously doesn’t know about these and the browser therefore falls back to the default serif and sans-serif fonts.
You would need to use an absolute URL to the font files. Sites like https://fonts.google.com make it easy by providing snippets for either HTML or CSS. You could integrate the “Abel” font from Google Fonts with either one of these techniques:

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">

CSS

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

Then, the “Abel” font can be used with font-family: 'Abel', sans-serif;

If something is unclear just ask :slightly_smiling_face:

Cheers,
Michael

Hello Michael, thank your for your time and help :slight_smile:

I tried your solution. That doesn’t seem to work. Take a look at this:

When I use nav li a I’m left with different colors, underline, and :focus color which is not a desired look for the <nav> in this task.

I understand why this happens though, it’s because various a:pseudoclass declarations have a specificity of 11. On the other hand, nav li a has a specificity of 3, so it always looses the battle.

So, how can I style the links inside of the <nav> without touching the html as you pointed out in exercise instructions?

I understand now, @font-face rule will only work when you host a website somewhere and the font files are linked to your CSS in some way. I got confused because the task says

Use a suitable service to generate bulletproof @font-face code for these two fonts.

The only way to make fontsquirrel fonts work on JSFiddle was to upload these font files somewhere and then provide a link in the CSS.

Have I got it right now?

Sorry for the long wait! :innocent:

Focus

I think I understand now. You are talking about the focus style of the nav that gets overwritten by the a:focus {} rule, right?

In this exercise it would make sense to explicitly define the focus style for the nav:

nav li a {
  ...
}

nav li a:focus, nav li a:hover {
  ...
}

In a “real” project you probably wouldn’t have an a:focus {} rule to start with, but rather an main a:focus {} rule for the “normal” part and (if desired) a nav a:focus {} for the navigation. Or you restrict the style with a class like you did.

Fonts

To be clear: You correctly used @font-face in your code. It’s a general problem of online code editors. I just mentioned is as an explanation for the different icon positions.

If Font Squirrel only allows to download the font files, that indeed would be the only possibility. That being said, it’s possible to use absolute URLs in @font-face. Coming back to my Google Fonts example: When you open the URL in your browser (https://fonts.googleapis.com/css2?family=Abel&display=swap) you will see that you get back a @font-face rule with an absolute URL. There’s also some more logic involved. For example, when opening this URL on IE11 you would get a WOFF file instead of a WOFF2 file.

/* latin */
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/abel/v12/MwQ5bhbm2POE2V9BPQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

I hope this gives you some more insight in this whole topic. :slightly_smiling_face:

All the best,
Michael

I don’t mind waiting. You are using your time to provide us with extensive material and answers. I have nothing but respect for that.

Yes, sorry if I wasn’t explicit enough in my question.

That’s what I thought initially, setting a:focus, a:hover and all other pseudo classes separately for those links that are inside of <nav> .

However, that seemed like a lot of unnecessary code, henceforth I used classes to get the desired result.

Thank you for clearing everything up, it means a lot to me.

Have a nice day :grinning:

1 Like

Thank you, that’s very kind to say and means a lot to me.

No need to be sorry. :slightly_smiling_face: I agree. Using classes would be the preferred thing in a real project.

1 Like