Prince Tribute Page-Feedback Please

Hello everyone!

I’m a beginner on freeCodeCamp and just finished my Tribute Page project. I would like to get some feedback on the page in general, and anything I could have done better.

Also, I’m assuming that continued practice is the key to success. If any of you have feedback on good ways to practice, please let me know!

Prince Tribute Page
https://codepen.io/ashkap92/full/XWmpLJv

Thanks!
-Ashley

1 Like

Hey, good job, no major issues here. Just a few suggestions for responsiveness:

  • Narrow your browser window as far as it will go. Notice how the timeline list is very narrow and can only fit a few words on each line but yet you have a lot of side margin, so there is definitely more room to display the content. This is a perfect opportunity to use media query break points to give more horizontal room for the timeline content at narrower view port widths.
  • Same thing with the image at the top, it can be much bigger at narrower widths.
  • Now make your browser as wide as it can go. Notice that the timeline content will keep getting longer. A lot of people find long lines of text hard to read, so I would put a max width on the content.
1 Like

Nice job on your page @ashkap92. Couple of things;

1 Like

Hi!

This feedback is very much appreciated. Struggling with understanding some of the responsive CSS. I will have to mess around with it some more.

Thanks!

Hello!

Thank you for the feedback! I was actually wondering about how to remove those. I’m sure I can figure it out with a google search. I’ll review the accessibility lessons today too.

Thanks!

Hi Ashley,

Congratulations on finishing your project. One thing to consider is resetting default styling through a CSS reset stylesheet. Doing this removes the browsers default css styles for the HTML elements. For example, if you inspect your markup through your browsers developer tools, you’ll notice that each element has pre-defined margins and padding, among other styles. A good example of this is the prince picture. Notice how the bottom margin is greater that the top margin, this is why it appears uneven within the parent element. Reset aside, The CSS box model and floats are also worth considered. They will come in handy once you being defining you own layouts. Other than that, keep up the good work.

Best,

-Brandon

Edit: To remove those bullets, list-style-type: none; is what you’re looking for.