Please Provide Feedback in my Tribute Page

Code Feedback
1

Hi! I just finished my tribute page.
Can someone provide feed back, please?
Thanks!
https://codepen.io/saraiovieira/pen/JjREOXB

1 Like
2

Hi Sara. Your project looks nice. I can suggest only small appearance changes, like better margin/padding in certain areas, to separate different sections, or text from images.
You shouldnt use <br> tags to make space between html elements. This is what padding and margins are for. You could properly use br to make line breaks in a poem for example. To make space between paragraphs, you can simply use the <p> tag. One of your br's also has a closing tag, which isnt incorrect in general, but by default the tag is self closing, so thats unnecessary.
At the end of your html code there are also body and html closing tags, which you should remove. In codepen, everything written in the html area is considered part of the body element by default. You could also get the header outside the main element, similar to how you placed your footer.
Dont worry those are small punctuation mistakes everyone does in the beginning(and keeps doing :stuck_out_tongue: ) but eventually you manage to fix them :slight_smile:

1 Like
3

Welcome to the forums @saraiovieira. Your page looks good. Some things to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible
  • Not sure if you noticed but even though you have a class to make the font bold the text on your page doesn’t render as such. This is because when you imported your font you only selected one light style. The browser will try but can not make it bold.
    What you need to do is select two styles. In this case you selected “light 300” but you also need to select “bold 700”. Your link will look like
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
    and you’ll see you now have bold font where you want it.

On a side note, after doing that you may decide to get rid of the bullet points.

4

Hi, @Sylvant :slight_smile:
I made the changes you said.
Thank you for your feedback

5

Thank you @Roma . I’ll take a look at the items you mentioned.

6

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