First project (tribute page)

Code Feedback
1

Here is my first project, i gave it a go! hopefully its good enough since i am quite new to this!

please provide some feed back :slight_smile:

https://codepen.io/epicaiden28/full/mdbmxaN

2

Hi @aidenhoward420. Your page looks good but there are some things you should revisit;

  • 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.
    • you have a typo in CSS
    • in HTML you have a typo, an invalid element and you’re using id's more than once. An id can only be used one time. For something multiple use class
  • review the lesson about giving meaningful text to links
  • keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 8/10 user stories.
  • make your page responsive. You have overflows on smaller screens
3

Here is my improved version! im not too sure how to make the page responsive though.

https://codepen.io/epicaiden28/full/mdbmxaN

4

Ok…changing all the id's to a class was not a good idea. Remember I said to keep the test script? Now instead of meeting 8/10 user stories you only meet 3/10 user stories.
(Copy the script from my first post and paste it into the HTML section and leave it there)

If you’d run the validator for HTML you’d have seen the error regarding the <meta> element. That element belongs in the <head>. For codepen, anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.

6

You did a great job on the structure of you page, but it isn’t very responsive.
It is a little too monochrome for me.
Pick a better font for the questions like Share Tech Mono or Dosis which you can find at google fonts:

You used a little too many <hr> tags for my liking.
Use them to separate the top section, the middle section, and the questions maybe?
(I mean one hr for all of the questions. not one for each question)

1 Like
7

How do you like some of the improvements i made

1 Like
8

Nice!
much better, except you didn’t change the fonts I requested.
Either way, it is really good now.

1 Like
9

@aidenhoward420, it looks better. It’s responsive. A couple of things you may want to revisit;

  • Keep the test script. I can’t emphasize this enough and I’ve mentioned this a couple of times before. You’re meeting 8/10 user stories.
  • Do some research on how to link to, or import, a font. You link to a font in HTML (in codepen this is done by clicking the ‘Settings’ button and then putting it into ‘Stuff for head’). Or you can import a font in CSS. As you may have noticed, just giving the value to the property doesn’t do it.
1 Like