Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sign Up form built using HTML, CSS, Javascript and Sass

@iAmZubair00

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please go through my solution and give suggestions around:

  1. any bug in the live site
  2. accessibility issues in HTML
  3. issues in the approach of writing Sass (as I have used Sass very 1st time!)
  4. and any other constructive feedback.

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks fine, the form is just little shorter than the original, site is responsive and the mobile state looks great.

Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .content-container should be using the main instead of div.
  • You don't need padding to center the content of .content-container, remove the padding and just add min-height: 100vh and let the flexbox center it properly.
  • To be honest, it would better if the error-messages are only shown when the form is submitted instead of using keyup event because you only want to show the errors if you submitted the form incorrectly , because right now, just focusing on the input then using like a backspace without text, error is already being shows.
  • Each input needs to have a label associated to it, the label would be a screen-reader only text, defining what the input needs to have.
  • Error-messages should have an id attribute since it will be referenced by the input if the input is wrong.
  • Each input should be using aria-invalid="true" if the input is wrong as well. A pseudocode looks like this:
if ( input is wrong )
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedBy", id of the error-message);
else 
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedBy");

By doing this, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy.

  • Here is a sample form snippet that I have. Lookup the markup and the js used in here, it is accessible and take note of the structure and attributes addition. You will also see a usage of aria-live in here that announces if a form is successfully submitted or if there is an error on the form.
  • button should have use type="submit" be specific on how your button will act especially when it is inside a form.
  • Adding a cursor: pointer to the button in desktop layout would be great.

Aside from those ,great work again on this one and if you have any queries just drop it here okay.

0

@Al-Baraa-Bakri

Posted

Good Job :) I think there is no need to scroll on big screens.. More Smooth without this scroll .. And You Need To Fix ACCESSIBILITY ISSUES By use Landmarks. Keep Coding :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord