Suggestions - Tribute Page Project

Code Feedback
1

Hey there. I’ve been working on my Tribute Page project, it’s quite simple and I’m unsure where to go next so I could use another pair of eyes, I’m open to suggestions regarding my code, the styling and even color palettes. Thanks for reading!

https://codepen.io/myrlockx/full/qBqdrzP

2

Hi @Myrlock !

Welcome to the forum!

Congrats on finishing your first project!

I think it looks good.

Just a few things.

You do not need the style or head tags. So I would get rid of them.

<style>
  
</style>
<head> <head>

You also don’t need body tags for codepen. Just keep that in mind for future projects.

You should keep you styling out of the html and just in the css section.

style="width:100%"

<!--This is mispelled-->
heigth="30%"

Also you could cut down on repetition for the imgs. You individually applied width:100% but you could just target all of the imgs in your css and apply the width there.

img {
width:100%;
}

You have an error in your css here

#tribute-link {
  color: #acb3b6;
  align: center;
}

I think you meant text-align:center;

Hope that helps!

1 Like
3

Thank you so much for taking the time to reply! It really helped, I’ll use your advice in future projects too :grin: I need to start double checking the spelling of “th” and “ht” words, since english isn’t my primary language, I totally missed it.

4

Welcome to the forums @Myrlock. Your 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.
    • It was mentioned that you don’t need then when using codepen but I’m pointing this out because you have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s always a horizontal scrollbar
1 Like
5

Thanks @Roma . I’m checking the things you pointed out, I’m new to Codepen and coding in general so your insight it’s very helpful!

6

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