Assessment wanted for "Typesetting a school homepage"

Here is my code: https://codepen.io/ab2422/pen/wvJaXwj and here are the assignment instructions: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage

I cannot add extra files (I think?) to codepen, so those extra spaces after the external links are for the external image file I’m adding to indicate external links, and of course since I couldn’t upload the font files it’s using my fallback font instead.

Any comments are much appreciated, but I also have a specific question. I wanted to line up the tops of each of the three main columns (“Brave new world”, “Top course choices”, and the nav bar). I did this by using the developer tools to discover that the margin on those top h2’s was 26.56px, and then manually set that for the nav bar. But is there a more natural way to “inherit” that number directly from somewhere? Or should I have instead explicitly set those margins to be something?

Hi @abro,

Great work. Just wanted to see that @Cecil_Mahumane did the same challenge recently did the assessment on Codepen. You can see the full comments for the assessment on MDN Learn under Looking for Assessment: Typesetting a community school page.

Do want want to look at that to see how Cecil does it first then I, or someone else, can review? Will look at your question tonight.

1 Like

Ah, thanks for the reference to Cecil’s—I’ve now fixed the “external link” image based on that! Looking at this has prompted two followup questions:

  1. I notice that for the nav bar, Cecil chose to apply the main styling to the nav li elements, and I chose to apply it to the nav a:any-link (since I learned while debugging that something like a:link from higher in my CSS also has higher specificity than plain old nav a, which led to some issues with the border :slightly_smiling_face: ). But the end result looks roughly the same. Do you know if it matters whether one styles nav li vs nav a:any-link?

  2. Cecil’s spacing between the header & nav looks good (i.e. equal to spacing between header & h2 in body), but he doesn’t seem to have needed to manually adjust it like I did. Why not?

Hi @abro,

I have been a bit busy.
Question 2 I believe the reason is that you are using a font size which is a constant rather than a relative size. Change it to 1.6em or 1.6rem and you should find that the the section, aside and nav to align correctly.

With question 2 let me have a look. I have never used the psedo selector any-link.

Will get back to you
Ran