Skip to content
Submitted over 1 year ago

Intro Component with Signup Form 🎯 [ BEM - VANILLA CSS3 - JS REGEXP ]

#accessibility#bem
Abdul Khaliq 🚀•72,480
@0xabdulkhaliq
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

👾 Hello, Frontend Mentor Community,

This is my solution for the Intro Component with Signup Form.

  • I learned how to use regular expressions for form validation using JavaScript
  • The toughest part is searching for variable font of Poppins for this challenge, but there's not available. Ended up with individual font files for each font weights
  • Layout was built responsive via mobile first workflow approach
  • Had a lots of fun building this challenge !

Now for the questions :

  • Does the heading "Learn to code by watching others" can be a <h1> element or not ?, If not then please let me know why.
  • Can anyone share any best accessibility tester (especially for form) , i want to test this form for whether it's accessible or not
  • Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

.

👨‍🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Community feedback

  • Davron•160
    @dhpcodePosted over 1 year ago

    Superb!!! Very beautiful. I loved this! How can you make such a precise solution. Can you share the resources you learn from?

    1
  • Luka Glonti•3,440
    @lack21Posted over 1 year ago

    Great job 👍, but I have some recommendations!

    • Remove background-repeat: no-repeat, no-repeat from body and change background-size: cover, cover to background-size: cover, there's no need for background-repeat: no-repeat since background-size: cover takes the full space.
    • Add place-content: center to the main, so on medium size devices layout is centered.
    0
  • Seung Woo (Paul) Ji•90
    @seungwoo-jiPosted over 1 year ago

    I think using h1 tag makes senses to me as it only appears once in the page and contains an important message. As for a simple accessibility testing tool, try to use the lighthouse that is already available for you in the chrome devtool. It gives a rough estimate how accessible your app is.

    0

Please log in to post a comment

Log in with GitHub

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