Tribute Page - Asking for Review

Code Feedback
1

Hi Everyone,

I am new to web development and just finished my first project. Would love to have your feedback on this.

Thank you very much. ^-^

Challenge: Build a Tribute Page

Link to the challenge: https://codepen.io/sigpanda/pen/NWrZVep

4 Likes
2

I liked it! Amazing job

1 Like
3

Hi @sigpanda!

Welcome to the forum!

I think your project looks great.

In codepen you do not need to include the doctype, html tags and head section. Codepen has taken care of that for you. If you need to include links from the head section you can place that here.

head section
head section1566Ă—1092 113 KB

Also, you will need to verify your email so we can see the full page.

verfiy email codepen
verfiy email codepen1960Ă—864 126 KB

Keep up the good work!

1 Like
4

It looks very nice. Just a few things to consider:

  • When I narrow my browser the content gets too skinny IMHO. At narrower view ports consider reducing the amount of side margin so the content has more room.
  • Similarly, you should consider putting a max width on the content (preferably in em units) to prevent the line length from getting too long (some people have trouble reading text with very long lines).
  • You jump from an h1 to h3 heading. Generally you should avoid skipping heading levels, so all of those h3’s should be h2’s.
  • The link at the bottom isn’t very descriptive (and thus not very accessible). Try rewording the sentence so that you can link some words together that describe what the link is pointing to.

Overall, very nice job. I especially like the fonts.

1 Like
5

Hey @sigpanda!

Your page looks nice and simple.
As @bbsmooth said the content gets too narrow.

1 Like
6

Thank you very much for your tips. Will do that. ^-^

7

Hello,

Thank you very much for your feedback and will make sure to apply and keep these things in mind for future projects. :panda_face: ^-^

8

Hello,

Thank you for your feedback. I’ll make sure to change those. ^-^

9

Hello,

Thank you. ^-^

10

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

  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • Responsiveness is easily achieved on a small page like this without having to use media queries if you use relative units and percentages for things like font sizing, left and right padding / margin and widths.
  • 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 you only link to one weight so the browser, though it will try, does not have a heavier weight to work with.
    • You need to click on the customize button and choose the normal weight (in this case 300) and also the bold weight (700). Notice the link now has two styles.
    • on a side note, semantically bold and strong have different meanings though they both display the same. Ideally, for the way you’re using it you want to use bold.

If you want more eyes on your page when asking for feedback, next time a better subforum to use is “Project-Feedback”.

1 Like
11

Hello,

Thank you very much for your feedback. Will make sure to apply these and make sure to keep these in mind. ^-^