Product Landing Page Project : Looking for feedbacks:)

Code Feedback
1

hey,

Below is my

Product Landing Page

link, would appreciate anyone’s feedback.

Thank-You!

2

Hey, this looks really nice, I can tell you put a lot of work into it. I’d like to offer a few suggestions related to accessibility to make it even more effective.

  • The black text on the dark blue background does not have enough contrast to be readable. You can check your contrast levels using the WebAIM contrast checker.

  • I am seeing a horizontal scroll bar at all times. With a wider view port it barely scrolls at all (but it should not be there). At a narrower view port it scrolls quite a bit. You’ll want to get rid of that completely.

  • The two inputs need to have <label>s. Placeholder text is an extra hint only and does not replace a label. And if you really want to be accessible then you can add the autocomplete attribute to those inputs.

  • The images should have alt text which should describe what is shown in the image (as if you were describing it to a blind person).

  • Best practices dictate that your page should have one <h1> near the top and then all subheadings below that should only jump down by one level at a time. So the current <h2> should be an <h1>. Any second level headings would be <h2>s. And any third level headings under those would be <h3>s. And so on. And I’m not so sure that all of the headings you currently have on your page are actually headings. For example, “Join our mailing list” could be a heading but then the sentence directly underneath it would not be.

  • Don’t use <br> to create vertical space between elements. There are only a few proper uses for <br> and this is not one of them. Use CSS padding/margins instead.

3

Hey, thanks for your feedback! I’ll try to ,
systematize things.

@bbsmooth Also what should i use instead of <br> to create vertical space between elements??

Thank-you!!

4

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