# Kdb13: Assessment wanted for Typesetting a community school homepage

**URL:** <https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772>\
**Category:** Learn\
**Created:** [September 11, 2021, 12:52pm UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772 "2021-09-11T12:52:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kdb13](https://avatars.discourse-cdn.com/v4/letter/k/8edcca/32.png) [@kdb13](https://discourse.mozilla.org/u/kdb13)\
**Post date:** [September 11, 2021, 12:52pm UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772/1 "2021-09-11T12:52:12Z")

</div>

[Codepen link](https://codepen.io/kdb13/pen/WNOjzGm)

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

Here’s the [Assessment page](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [September 12, 2021, 3:23am UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772/2 "2021-09-12T03:23:04Z")

</div>

Well done, @kdb13! 🎉

Some small improvement:

- Since you set the same color for `a:link` and `a:visited` you could shorten the code

```auto
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

---

<div class="post-metadata">

**Author:** ![kdb13](https://avatars.discourse-cdn.com/v4/letter/k/8edcca/32.png) [@kdb13](https://discourse.mozilla.org/u/kdb13)\
**Post date:** [September 12, 2021, 4:58am UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772/3 "2021-09-12T04:58:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kdb13](https://avatars.discourse-cdn.com/v4/letter/k/8edcca/32.png) [@kdb13](https://discourse.mozilla.org/u/kdb13)\
**Post date:** [September 12, 2021, 6:09am UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772/4 "2021-09-12T06:09:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)\
**Post date:** [September 12, 2021, 6:35am UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772/5 "2021-09-12T06:35:07Z")

</div>

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`:

```auto
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 😅  
You really did an amazing job on all the tasks I looked at today 👍

Have fun!  
Michael

---

<div class="post-metadata">

**Author:** ![kdb13](https://avatars.discourse-cdn.com/v4/letter/k/8edcca/32.png) [@kdb13](https://discourse.mozilla.org/u/kdb13)\
**Post date:** [September 12, 2021, 7:33am UTC](https://discourse.mozilla.org/t/kdb13-assessment-wanted-for-typesetting-a-community-school-homepage/85772/6 "2021-09-12T07:33:01Z")

</div>

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. 😀