Does my tribute page pass the tests? And two other questions

Here’s the link to my Pen: https://codepen.io/LisaVen/full/oNpXovm

Here’s the link to the project requirements: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

Please confirm that my tribute page passes the project tests. (It looks to me like it does.)

I realize that it’s not a stellar page, either in terms of content or visual appeal. You’re welcome to offer comments, but my goal was more to get the HTML and CSS right than to produce a professional piece of work. (The tribute person deserves better, and at some point I may improve on it.)

Also, please provide feedback on my CSS. Could it be cleaner or more efficient? And is there a way to align the figcaption with the left edge of the image?

Thank you!

According the testing mechanism on Codepen, it passes only 6/10 .

It can be checked here:
https://codepen.io/pen?template=MJjpwO

Input your CSS and Html and click on the green tab to your left.
Scroll down to TRIBUTE PAGE
and press RUN TESTS

Your page looks good @LisaWillCode.
To answer your question, no it does not pass all user stories. Here’s how and some other suggestions.

  • 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 xx/xx 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 specific questions on what you don’t understand.
  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    "part 1 and “part 2” are not accessible
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    There’s a horizontal scrollbar on large and small screens
    (In your main selector I’m not sure why you have margin: -50px;)

If you have any Questions or Difficulties implementing the suggestions that @Roma made, the Members of the Forum are here to share Advice and Guidance.

A lot of people don’t realize that pressing that red “6/10 Passed” button will give you a readout of failed tests.

1 Like

THE RED BUTTON:
Screenshot 2022-03-24 12.27.08 PM

THE INFORMATION ABOUT WHAT WHAT PASSED AND FAILED ON THE TEST

Thank you. I had no idea that CodePen had a checker. I’ll definitely be using it!

I’m finding this forum a bit confusing to use. Not sure who I’m replying to, but this reply is meant for kevinSmith. I didn’t even make it as far as the red button. Still on my way to that, but I really appreciate the info about the readout, and I will look at it.

You can @ people to Get their Attention: like @kevinSmith

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.