Audrey Hepburn Tribute Page Feedback

Hi everyone! I’ve just completed my first project and I was wondering if I could get some feedback. I have never done any coding before so this module and project is the first one I’ve ever done so feedback would be greatly appricated! Thank you!

https://codepen.io/Jesskahh/full/oNXYjbg

1 Like

Hi Jesskahh,
Welcome to the forum!

Congratulations on making it this far. Looks good. I like your color scale and fonts. Maybe you could try to add some media-queries for small devices. Just make the window narrower, to see where the layout could need some tweaks…

The smallest phones are 320px wide. If you use this view, codepen shows you the window width:
image

1 Like

Thank you so much! Thank you for your suggestions, I’ll definitely go back and add some media queries in :slight_smile:

1 Like

Your page looks good @Jesskahh. A couple of things to revisit;

  • Don’t use <br> to force spacing or line breaks. You could put them in an unordered list and not display the bullets.
  • Not sure if you noticed but even though you’re using the <strong> tag the text on your page doesn’t render as such. This is because when you imported your font you only selected regular. Go back to Google Fonts and when you select your font it will give you the link. All well and good so far but what you then need to do is click on the ‘customize’ link (next to ‘embed’) and there click the bold checkbox also. Click the ‘embed’ link and put the new link in your page. (Notice it now has weights for 400 & 700). Btw, I did this too with a page I was working on and asked a question about why I wasn’t seeing the font output the way I expected here in the forums and it was explained to me. Here’s the link to my post which includes a quick video the responder made showing how to do what I just explained.
  • Make your page responsive. On smaller screens your pic and the filmography and quotes fall out of their containers.
1 Like

Thank you so much for your help! I have changed the < br > to an unordered list and I have not displayed the bullet points.

I have also changed embedded the semi-bold text and I have used the < strong > tag which it now does show up as this. Yay!

I was just wondering if you would be able to give me some advice on making my page responsive. I too noticed this and I am confused on how to go about and change this. Thank you :slight_smile:

That’s looking better.

  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Since you copy/paste from codepen you can ignore the first three errors but you should clean up the others.

You’re on the right track with your media queries. There’s a lot of spacing with the line-height. Maybe on smaller screens you can dial that back a little. Also noticed that you have a mixture of px and em units. It will be easier to resize if you don’t declare actual px. Keep using em.