''First project: Tribute Page"

Code Feedback
1

My first project, tried to keep it as clean looking as possible… afraid it might be a little boring :smile: . Probably a lot to improve with the code to keep it more simple, cleaner and so on and so on. But what do you guys think?

As i really want to improve my coding i beg you all to be very critical!

https://codepen.io/shankly1892/full/RwPBXWb

Best Regards, Simon

2

A few things:

  • Use ‘em’ instead of ‘px’ to set widths/max-widths whenever possible. You have the section currently set to a max width of 500px, so as I increase the text size I get fewer words per line. If you changed that to 35em then the words per line stay consistent as the text size increases.
  • You shouldn’t jump more than one heading level, so you need to change the h3 to an h2.
  • The red link in the footer has two issues:
  • I think the image gets too small too fast as you narrow the browser window. I’ve narrowed it down to the point where I can’t even read the text in the image but yet there is a ton of room on each side of the image, so the image could definitely be bigger.
  • Also, if there is text content in the image then the alt text should describe it. So don’t just say 'his lifespan", spell out the lifespan just like the image does.
  • The img tag is missing quotes around the src and it is not closed correctly.
  • It is considered bad form to use br tags to create vertical spacing between elements. Get rid of those and use CSS instead. Also, technically those br tags aren’t even allowed in a list like you are using them.
  • You are missing the closing ul tag.
1 Like
3

Thanks alot for feedback!

I’ve corrected the issues that you mentioned, take a look at it again when you got the time :slight_smile:

4

Definitely looking better now. The link text in the footer still needs to be reworked. It is bad form (and not accessible) to have the link text set to ‘here’. One possibility is to reword that sentence to something like ‘Read more about Steve Jobs’ and make the whole thing a link.

Personally, I still think the image can better bigger at narrower browser widths. I did the following:

  • set width on img to 100%
  • set max-width on img to whatever you consider reasonable (I chose 700px)
  • on the figure tag:
    • set padding-left/right to 0
    • set margin left/right to 15px

Now even at the narrowest width my browser will allow the image is still big enough to read the text in it comfortably. I suppose it might not be big enough for some people so you could add the dates to the figcaption as well, but since you have those dates in the timeline below that might not be a necessity.

One last picky thing, a lot of people associate underlined text with links, so some would argue that you shouldn’t underline content (such as the h2) if it is not a link.

PSS The img tag is still not closed properly and the link tag in the footer has a problem as well.

1 Like
5

Hi @therainmaker, your page looks good. The only things I have to add are;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • when you submit your project the test script should be included
  • Review the lesson about giving meaningful text to links
    • The word “here” is not accessible
  • This is a nit but you asked so, as you grow with your coding and learn more about semantics, the element <strong> has a meaning to screen readers. You can get the same look on the page by using the <b> element.
1 Like