Mobile First ReactJS WebPage using useState, Props

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in general is good and the responsiveness is great as well.

  Some suggestions would be:

  • Always have a main element on a webpage. This helps users to properly navigate your website. On this one, the .container selector could have used the main tag.
  • The svg on the website logo should have a title element inside it. This title tag describes that svg itself since it is a graphic. On your svg, add a title="Ping" inside it.
  • Always have a h1 element on a webpage. The we are launching soon could be the h1 on this. Also a reminder, when using heading tags, do not skip a level. If you have for example h4, make sure that h3, h2, h1 are present.
  • The input as well as the button should have been inside a form element, since this is data submission.
  • The input as well needs to have a label element, or an aria-label being used.
  • The button should have type="submit" since on a real component, this will submit the email form.
  • The email input as well should have a aria-invalid being triggered if the user submitted a wrong input. Addition to this, when it is invalid, you should add aria-describedBy element. The error-message should have an id attribute. This id will be used in the aria-describedBy on the input, linking those to create a more accessible feature for users. You can search about this one.
  • The alt text of the hero-image could have used a better descriptive value. Using alt="sss" doesn't make sense at all. Instead you could have used alt="ping dashboard" on it.
  • The social media links should have been using a tags because those are links. It also needs to have aria-label indicating where this link would take the user. Example, the a tag that will wrap facebook icon would have aria-label="facebook".
  • The social media links should be inside as well in ul element, since those are list of links.

  Learning a library can really help you, but, do NOT build up your fundamentals first. There are lots of things going on in here, you are not using the proper semantics. Before you go doing libraries, make sure that even html usage is proper. You don't want to use react without proper knowledge of how element should be used.

  Still, great work on this.

  0

  ---

  

  Aman Patil•885

  @Amanpatil-DevPosted about 3 years ago

  @pikamart thank you so much for your kind words I will make a note

  0