Kdb13: Assessment wanted for Typesetting a community school homepage

MDN Learn
#1

Codepen link

Note: The Google Fonts links have been added inside Stuff for <head> section within Codepen.

Here’s the Assessment page

#2

Well done, @kdb13! :tada:

Some small improvement:

  • Since you set the same color for a:link and a:visited you could shorten the code
a:link, a:visited {
  color: #a66;
}
  • When you focus the external links (for example by keyboard tabbing) they are nearly unreadable, because they are color: ghostwhite but the dark background from a:focus is overwritten by the background property of a[href*="http"]
  • Since you use border-bottom: none; on a:focus and a:hover this also affects the nav a

I hope that helps.

Cheers!
Michael

1 Like
#3

Thanks, @mikoMK. I kind of left the link markup in a hurry. Fixing it!

1 Like
#4

@mikoMK I’ve cleaned up the link code. Please let me know it it’s not clean enough or requires any other improvements. :sweat_smile:

1 Like
#5

Great work on the improvements!

The only problem i see now is that we don’t see a difference when we tab through the nav with the keyboard. (Not having a “visited” style on navs is fine though)

I think the easiest fix would be to move nav a:focus from nav a:visited to nav a:hover:

nav a:visited {
  background-color: transparent;
  color: #a66;
}

nav a:hover,
nav a:focus {
  background-color: #a66;
  color: white;
}

This would make sense as the keyboard navigation then has the same style as mouse navigation (focusing and hovering)

Now I have nothing more to nag about :sweat_smile:
You really did an amazing job on all the tasks I looked at today :+1:

Have fun!
Michael

1 Like
#6

I’ve set the same styling for :hover and :focus as you mentioned.

Thank you very much supporting me on this task and correcting my mistakes. :grinning:

1 Like