Feedback on my Tribute Page?

I Built This
1

Hey y’all,

I finished my Tribute page and am pretty pleased with it overall but I’m still thinking the code might be a bit messy. Any feedback is appreciated!

https://codepen.io/deepfriedguts/pen/JjGPLvw (hopefully im linking this correctly)

Thanks very much!

2

Overall the page looks really good. Just a couple of things I noticed.

  • The title, caption under the portrait and YouTube video link don’t react well when the browser side is reduced. Although your video has a responsive class you .more iframe { selector is overriding it.

  • The lines between the images in your gallery aren’t even. (If this is a stylistic choice, ignore this). Have you thought about setting all of the images to the same size to ensure a consistent layout?

3

Ah I’ll work on that iframe issue - hadn’t noticed it before.

And I’m not too worried about the gallery lines being uneven, I kinda like it. I have thought about getting them consistent though. Any tips on how that could be done?

Thank you for the feedback!

4

I figured it was a stylistic thing since the upper left and lower right had the same dimensions and the upper right and lower left did as well.

If you want to get them to be consistent just add another class to the images and make a another CSS rule for them such like

.pic {
  height: 300px;
  width: 275px;
}
5

Awesome, thanks so much!

6

Page looks okay @deepfriedguts. 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>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’ (if you were coding the page outside of codepen, the link would be in the head element, never in the body element and the head element would not be within the body element
    • everything the browser displays would be in the body element. You’ve got a lot of elements out of whack…just scattered about willy-nilly
  • All of your styling should be external, don’t use in-line styling
  • On top of that, if you are doing external styling you wouldn’t have the style element in the stylesheet. It will cause problems with codepen. Remove it.