Product landing page- Feedback and suggestions

Code Feedback
1

https://codepen.io/udit-8/pen/poJZBaL

2

I love the sobriety in your page.
I love your font elections and how You use them.
I love your Images/icons: Some one is missing here.
Well Done!!

1 Like
3

It does look quite nice. A few suggestions/issues:

  • The label tag must have some content, for accessibility reasons. If you don’t want to have content in the tag then get rid of it and use aria-label on the input box:
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
  • Your boxes at the bottom are not responsive. They should move to a column as you narrow the browser window. I’m guessing you should also be able to make the embedded video shrink to fit the narrow window as well.
  • In FF, go to the View -> Zoom menu and activate ‘Zoom text only’. Then hold the Ctrl key down and scroll your middle mouse button to make the text bigger. You’ll see that the content breaks out of the boxes at the bottom rather quickly.
  • It is bad form to use the br tag to create space between elements. Use margins/padding instead.
1 Like
4

Thanks @bbsmooth that was really helpful.I am starting out web development and that really were some constructive suggestions.

5

@smashingudit4, it does look good. In addition to the feedback you’ve already received;

  • You have an id that is reused multiple times. An id should be unique in the document.
  • The frameborder attribute on the iframe element is obsolete. Use CSS
1 Like
6

Thanks @Roma I will surely keep those in mind