Completed - Tribute Page

Hello fellow coders!! I have just completed the “Build a Tribute Page” project in the Responsive Web Design Projects section. I know I didn’t do it 100% correctly, under User-story #1 it said to wrap all elements in an id=“main”, but I placed a header and footer in the HTML. Was this wrong to do for the project? Is it wrong in real world applications? Any and all feedback to my question and project would be greatly appreciated. Thank you!!! :slight_smile:

https://codepen.io/paulEatsPizza/pen/MWbOoww?editors=1100

Hi @paulPlaysDrums !

I think your page looks good.

A few things.

Keep the test suite in the page for these projects.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
You are passing 7/10 tests.

I would review the lesson on giving links descriptive text.
Click here is not that accessible.

I think it is fine to have a header and footer.

1 Like

Actually what the user story says is My tribute page should have an element with a corresponding id="main", which contains all other elements.
That doesn’t mean a main element with an id="main". It could be a div element with an id="main". Your page is semantically correct in using header, mainandfooter` elements.

As mentioned;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 7/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • here” is not accessible

On a side note;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
1 Like

Oh wow, the test suite went right over my head before lol. Just used it now I get it. Going to solve these problems in a little bit, along with reviewing how to make links accessible. Much appreciated!!

Didn’t even realize the assumption I made about id=“main”, oops!

I don’t think I understand any of the failing message after the first line lol. But I’m going to do some googling before I ask.

I wrote the code in visual studio code and put it into Codepen afterwords. I’ll do it the correct way for the projects now on and write it directly in Codepen.

Thanks for all the feedback, it helps a lot!!

1 Like

I don’t/didn’t code in codepen either. I coded locally. So when putting it to codepen just copy what’s between the body tags and paste that into codepen’s HTML editor.
And as mentioned, anything that goes in the head element just goes into the ‘Stuff for <head>’ box in codepen.
Copy/paste the stylesheet into codepen’s CSS editor.

1 Like

Hello All,

I need some help from you guys.
I have completed the Tribute page challenge

https://codepen.io/freeCodeCamp/pen/MJjpwO

When i insert the link in the solution link then click i’ve completed this challenge, nothing happens.

What should i do ?

Thanks in advance for your answers.

The link you’ve supplied is the FCC pen that you’re supposed to fork.
What you’re trying to submit is a page that you cannot edit.

When you get to this page you should have a codepen account and you should be logged in. From this FCC page, you’ll see the “fork” in the lower right. When you fork the pen you’ll have a blank page with the FCC test suite. This will allow you to add your code and save it. This is the link that you’ll submit…also the link that you’ll use in the #project-feedback subforum if you want feedback.

You’ll notice that the link you’ve given does not have a Save button.

1 Like

Thank you so much for your reply.

Now i can move on to the next challenge.

Thank you Thank you Thank you

Ahh, gotcha!! Thanks again