Please offer feedback on my Tribute Page!

Code Feedback
1

Hello,

I have recently completed the first project in Responsive Web design, and would just like to get some feedback, and suggestions on what I can improve. It’s the first thing I’ve ever built, so I’m hoping over time my coding will get better!

My tribute page is here: https://codepen.io/bryyy2104/full/ExgoaNy

Many thanks, and I hope your coding is going well! :sunglasses:

2

Hi there,

Your page looks good.

You shouldn’t use <br> for creating line breaks between links. That should be done with CSS.

In your CSS, if you click on “analyze CSS”, you will see that you have two different height rules in #image.

This is just my opinion: I like the justified text when your page is full screen, but as you narrow it, there are some odd spaces.

Overall, I think you did a great job.

1 Like
3

Congrats on your first project. Just few suggestions:

  • As @cherylm pointed out, you’ll want to get rid of all those <br>s. The reason I mentioned this again is because it is not valid HTML to have them inside of a <ul> like that. Be sure to validate your HTML and it will help you find errors like this.
  • You have the image wrapped with an <a> but the link doesn’t do anything. Definitely get rid of that <a> if it isn’t going to link anywhere.
  • Also, you’ll want to change the div#img-div to a <figure>. Using the <figcaption> without being wrapped in a <figure> is a no-no.
  • The ‘this link’ text isn’t accessible. Your links should have meaningful text, so you’ll want to rework that sentence so the link text explains what it is linking to. Google ‘meaningful link text’ for more information.
  • At narrower view port widths the list content feels very cramped, especially at larger text sizes. You have the width set at 50% so if the width of the browser is 400px the list is only 200px and you’ve get 100px of empty space on each side which could be used to give the list more horizontal breathing room. This is where responsive design comes in. Make the width of the list wider at narrower view port widths. Personally, I would use a max-width instead of a width on the list (and set it in em units).
1 Like
4

Ah great, thanks for those pointers. I’ll go back my project and have a look.
Thanks for your feedback! :smiley:

5

Thanks for this! I’ll go back and take a look at the things you mentioned. I appreciate the time you took! :smiley:

6

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