Skip to content
Submitted over 3 years ago

Rechallenge/Review: Intro component with sign-up form

drunken_neoguri•290
@DrunkenNeoguri
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

This time, I tried the previous challenge again! When I tried this time, I focused a little more on Javascript.

I wanted to reduce duplication when writing scripts. Nevertheless, the amount of scripts seems to have increased compared to the last time ^^; I'm so happy that the script was written just the way I thought it would!

However, I am wondering if there is a way to reduce it even further here.

Thanks for reading. :D If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi there! 👋

    I recommend focusing on HTML and CSS first, there are some issues that you can fix.

    • Every input element needs a label so I recommend having a sr-only label or making the label a placeholder.
    • The error icon should be a background image instead of an img element. This way, when the input is invalid you can add the error icon on the input element.
    • The type of the button should be submit instead of button.
    • For the alert message, I highly suggest using p instead of div. Always use a meaningful element to wrap text content.
    • input doesn't have a closing tag.
    • The password input should have type="password" and the email input should have type="email". Using the correct type for each input helps the mobile users to get the correct keyboard layout for each type of input.
    • Use the native HTML whenever possible. In this case, it's possible to use main tag instead role="main".
    • Adjust the breakpoint of the media query. Currently on 841px to 877px the text is so narrow.
    • .container__right__form, it can't have an element nested instead an element. I recommend creating a new block element instead. BEM = block__element--modifier not BEE = block__element__element.

    I highly suggest writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

    That's it! Hope you find this useful!

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