Tribute Page - Marcelo Bielsa

Project Feedback
#1

Hi,

Looking for feedback on my Tribute Page - https://codepen.io/CodeNutts/pen/mdOLzwZ

Also would appreciate somebody explaining how to make images and text look the same on different devices such as mobile. My tribute page looks fine on my desktop but all over the place on mobile. I’ve looked around but can’t find a solution.

Thanks!

#2

Your page looks good @Nuttsy. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • You’ll have an easier time with responsiveness if you use relative units rather than hardcoding pixel units.
    • If those badges had a percentage width instead of pixel they’d scale easier.
    • You call the same badge four times and style it four times. If you used a class name rather than an id you could style it one time.
#3

Thanks for the help! @Roma

I’m confused when you say if I created a class rather than an id I could style it one time. I would still need to style each image separately as they are all in different places would I not?

#4

An id must be unique for the document. You can use a class name multiple times if you want to style elements the same. You may need the id for positioning and the class for the repeated styling.
Review the lesson re: styling multiple elements with a CSS class.