Building a Tribute Page - Feedback Welcomed

Code Feedback
1

Hello freeCodeCamp community,

I’ve just completed (I think) my first responsive web page design project via the tribute page here.

I would really appreciate any constructive comments on how to streamline my semantic markup. Specifically, I couldn’t seem to figure out how to limit my figcaption width to always be less than or equal to the total width of my figure. I tried to use flex box to wrap the text around the figure and treated the figure as a grid and the figcaption as a caption (trying to justify it underneath and to the center) but neither worked correctly for me.

Any suggestions?

Furthermore, in the top left had corner of my web page I’ve seemed to have lost the Run test drop-down menu. Could someone help me understand how to get it back please? Fix1

2 Likes
2

Nice Tribute page, I liked learning about Saint Francis!
As for your problem, I think you didn’t include the Test Suite,
Add this into the top of your HTML:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
1 Like
3

Thank you, that worked like a charm!

1 Like
4

Nice looking page @matthewshane.rogers. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
  • Since you lost it.
  • 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>’
    • mentioned because in CSS I see you calling fonts but don’t see that you’ve ever linked to them or imported them.
  • In your tribute list between the years 1206 and 1208 there’s one that starts with ‘spring’ but it’s not between an <li> </li> tags
  • Since your dates are bold, maybe think about getting rid of the bullet points.

Edit: btw, eng here is not valid ISO language. I think you mean en
<html lang="eng">

1 Like
5

Thank you very much for the suggestions!

With respect to adding the test script I can add the line you provided into the HTML editor section and the drop down menu appears, but when I try to enter into the "stuff for " box it doesn’t appear. Can you help me understand how to properly format my codepen page?!

Fix 3
Fix 31822×787 119 KB

6

The test script is JavaScript. It would normally appear just before the closing body tag in your HTML document. It is not something that would go in the head
What I said was the link to your font would go into 'Stuff for <head>’
Being codepen, you can drop the script either at the top or the bottom of the HTML section.

1 Like
7

Thank you for the clarification.

1 Like