[October 2021] Assessment wanted for Typesetting a community school homepage


I would like an assessment of Typesetting a community school homepage

My work on CodePen can be found here.

The biggest trouble I had was inserting an external link icon :smiley:

I also don’t really understand exactly how the CSS interacts with the HTML to create a 3 column layout. The CSS for that was already provided so it just happened magically :smiley:. I did play around with the width % to see how it changed things but haven’t really got my mind around how float/width/padding makes things work like it does.

Anyway, I am about 3 days into my coding journey, so any pointers or feedback are appreciated.


Hello @over30coder

you doing great just a little note here :

  1. you missed this point Give the page a site-wide font-size of 10px.
  2. for this point Give your headings and other element types appropriate font-sizes defined using a suitable relative unit. relative unit mean em / rem
  3. also do not use important as it bad programing style use it only when there no other way around it
  4. you missed this one also Give your body text a suitable line-height..
  5. this step Give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page.
    mean for different state you change the color but choose one that suitable and look good with the whole page color
  6. for this Make it so that links are underlined by default, but when you hover or focus them the underline disappears. the link should has underline but while focus or hover that underline disappear
  7. for this Remove the default focus outline from ALL the links on the page. it talking about https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style not the focus stat of the link
  8. for

you can use this link for the image https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png

  1. i notice you played with the pullet for the list :wink:

  2. you should not edit the html file so you should not add the button class

for the layout and width and float do not worry there lessons for that

when there task with multi steps start it one by one so you do not miss anything

hope that help and have a nice day :slight_smile:

Thanks for your feedback, much appreciated!

I have made some edits following your advice which can be found here

I removed the ‘button’ class from html and styled the nav links in CSS with same code, just changed the selector to:

nav a {

and it seemed to work fine.

I’m still getting my head around em/rem for font and element sizing. Not sure I understand it very well yet.

you very welcome @over30coder

for this

a:link { text-decoration: underline; outline-style: none } //selector can be a only 
a:visited { text-decoration: underline; } \\ that should  removed 
a:hover { text-decoration: none; } 
a:focus { text-decoration: none;}
a:active { background:#a66; }

you still missed this Give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page. add color attribute for those cases

for em and rem check this https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/ in short em the size will be related to the parent of the element (the one that contain it) but rem will be related to the root (the body)

1 Like