Tributepage feedback please

Code Feedback
1

Hello, this is my first post here. Been doing freecodecamp since 7-8 days. Today i finished my tribute page and would like to receive some feedback.

Thank you. :slight_smile:

2

Hey @metalblack123!

I think your page looks good. I ran your code through the html and css analyzers and there are some errors that need your attention.

Also you don’t need to include this in codepen.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
<title id="pagetitle">John Atanasoff Tribute Page</title>

If you want to include links in the head section you can open up settings and place them in the head section there.

head section
head section1566×1092 113 KB

Happy coding!

3

Yes, youre right. I dont need to include this in codepen. I just work in vs code and later copy and paste it in codepen. :slight_smile:
Thank you!

1 Like
4

Welcome to the forums @metalblack123. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have elements out of order. The test script is JavaScript. It will not work when place in the head element. I should be place right before the closing body tag.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • You can ignore the warning about section lacking heading.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Review the lesson about giving meaningful text to links.
    • Web Accessibility in Mind has a more thorough explanation.
      • “wikipedia” is not accessible
    • Accessibility is about being accessible to all users
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
5

Thank you for the feedback. :slight_smile:
I have cleaned most of the issues mentioned. Probably there is much more that can be done.

6

Nice job cleaning things up @metalblack123. Something to revisit;