(another) Tribute Page Feedback - Travis Rice

Hey all - just finished my tribute page would love to get some feedback on it.

The CSS ended up getting a bit wild and probably needs some work and spotted some minor alignment issues at some sizes.

Started “mobile first” with this then scaled up.

https://codepen.io/goodCatSchmoo/full/xxZZdqM

If anyone would like to see the HTML or CSS behind it let me know as I don’t think you can see it on this view (still getting used to Code Pen) .

Next steps for me would probably be clean up existing CSS, set up a proper grid layout, sort alignment and add a “light-mode” toggle against the default dark mode.

Cheers,

Chris

1 Like

great job

fyi, we still can see the code behind full view. the only pen that not provides if you make it debug view, only pro member can share it to anyone, while free can only be seen by pen author.

as you html error is that you forgot to add opening body tag, and you misplaced the closing main tag, it should come before the closing body tag.

1 Like

Awesome work dude! The color scheme is good and apt.
Some suggestions -

  • There is also a horizontal scroll available on your site, and I can scroll horizontally that shouldn’t be the case. use overflow-x: none; to solve your problem.
  • also the picture description is not visible/is of the same color as background you can fix that too.

Overall good design.

1 Like

Thanks for the reply - will look at the overflow-x. Am aware of the hiding of caption; took some liberties with it as it was ruining my design but still wanted to pass the test :smile:

Thanks for taking the time - will check the tags, could be a mistake when copying into the codepen!

Awesome work man. Keep learning!

Welcome to the forums @goodcatschmoo. Page looks good. Some things to revisit;

  • 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.
    • Mention because there’s a closing body tag but no opening one. Also, everything the browser renders would be in the body element. There’s a closing main tag outside of the closing body tag which shouldn’t be.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should address.

Thanks @Roma!

I have made some of the changes as advised already (just haven’t updated here); thanks for the note on the tag and code pen, was not aware of this.

Haven’t used W3C validator before so thanks for the recommendation, will check it out!