Feedback to Tribute page project

Code Feedback
1

Hi everyone! I’m new to web developing and this is my first project, so I will be glad to hear any feedback. Thank you!

https://codepen.io/alieninochi/pen/ExjOKdq - David Lynch’s Tribute Page

2

I would change your font color, it is very difficult to read with the white background.
Here is a useful tool to check your color contrasts!
Also verify your email address with code pen so we can see it in full page view :sunglasses:

3

Welcome to the forums @alieninochi. Your page looks good. Some minor things;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your project.
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have a closing html element but there’s no opening one. But since codepen provides the boilerplate for you it’s best to only put in what would go between the body tags.

When I saw you gave each of the years a class of year I thought it was because you were going to make them bold and then get rid of the bullet points.

4

@slamoureux, @Roma thanks for your comments! I’ve fixed everything

5

Hi @alieninochi, I see you did try and make the font-weight bold. You may have noticed that even though you’re it a value of bold the text on your page doesn’t render as such. This is because when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700).
Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.

6

A few minor things for you if you are interested.

  • Don’t put a width on the header (and you can get rid of the margin: 0 auto as well). You are centering the h1 and h2 which is enough. As it currently is, if you narrow the browser window all the way and then increase the text size, the header text does not stay centered but rather starts widening to the right, because it is trying to respect the 50% width you put on it along with side margins set to auto. Granted, this is not going to be a common occurrence, but if the goal is responsiveness then getting rid of the width will help. Besides, your header content isn’t really wide enough to need restrictions on its width in the first place.
  • I would put a max width on the #tribute-info and blockquote at the bottom. I can stretch my browser very wide and the text will keep stretching along with it. A lot of people find long lines of text hard to read.
  • The “here” link at the bottom of the page is frowned upon.
    WebAIM: Links and Hypertext - Link Text and Appearance

Overall, very nice job.

1 Like