Feedback on Tribute page - Nikola Tesla

Code Feedback
1

Hello, everyone!

This is my tribute page project and I would appreciate if you could give me some feedback. :slight_smile:

2

Hi and welcome to the forum! :slight_smile: Your page looks good, it scales well when you resize the screen, so it’s pretty responsive. I do have a couple of suggestions though:

  • I’d put a little bit of padding to the last h2 element (the one with the link at the end), it’s way too close to the border of it’s parent element as it is. And by the way, you didn’t close that tag (I just noticed this accidentally, so maybe go over your code quickly one more time to check if there’s anything else you’ve missed).
  • There is an empty #img-caption declaration at the end of your CSS - if you’re not going to use it, delete it so that it doesn’t clutter your code.
  • If you want to make your page look even better on mobile, consider making the title smaller and the image bigger on smaller screens. This is also going to be a good exercise in using media queries.

Other than this, good job, and good luck with the other projects! :smile:

1 Like
3

Hi @Nev_Benk, your page looks good. Some things to revisit;

  • 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.
    • The link to your font would go in the box labeled ‘Stuff for <head>’ . You call the Roboto Condensed font family but don’t use it.
  • 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.
    • In HTML you have an <h2> element that you don’t close and in CSS, as was previously mentioned, you have a rule that’s empty
1 Like
4

Thank you for your answer!

I did what you suggested and the page is better. :slight_smile:

1 Like
5

Thank you for your answer!

I will look into the whole Codepen thing you told me, I tried deleting Roboot Condensed font family, and the font changed, so i guess I was using it. The only thing is it could have been done simpler, so thank you for explaining. :slight_smile:

6

The reason I mentioned the font family is because I’m seeing the fallback font sans-serif. It’s possible that you have Roboto Condensed installed on your box and that’s why you see it. For others who don’t have it installed, you’ll need to either link it or import it.