Project feedback - Tribute Page - Anne Frank

Code Feedback
1

Hello, I’ve completed my Tribute Page and I would like to get some feedback on it.

1 Like
2

Welcome to the forums @Nandiinii. You page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.
  • In addition to being used incorrectly in the unordered list, do not use the <br> element elsewhere in your page to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
  • Keep all your styling external. Do not use in-line styling.
  • You may want to add some additional width to the tribute-info on smaller screens. It’s very narrow and hard to read.
  • On narrow screens the quote link falls out of the container and causes a horizontal scrollbar
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    “click here” is not accessible
  • Your name in dark blue on a dark background is hard to read making for a bad UX. Use a contrast checker
3

Hello Nandiinii, I like your page, looks great on a wide screen, but as Roma stated, you should pay attention to what happens when the viewport shrinks.
I saw a lot of pixel meassurements on your CSS, try using more relative length units, like % and vw. Doing so will make your page more resposive to different screen sizes.

Appart from that, theres a particular html code element that caught my attention.
On line 3 you wrote:

<p style="margin-bottom:3rem;font-size:1.5rem;"><i>“In the long run, the sharpest weapon of all is a kind and gentle spirit.”</i></p>

You are using the <i> tag for styling, try to use CSS for that, making use of the font-style: italic; property. Another thing that’s not wrong but can be better is removing inline CSS (I mean the style attribute inside the <p> html tag). You may want to give that tag an id or class attribute and then reference it from CSS and style it from there.

4

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