Submitted about 1 year ago

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

#accessibility#bem

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Preview site View code

This is a solution for...

Intro component with sign-up form

HTML
CSS
JS

1newbie

View challenge

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

@dhpcode

Posted about 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?

Luka Glonti• 3,420

@lack21

Posted about 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.

Seung Woo (Paul) Ji• 90

@seungwoo-ji

Posted about 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.

Please log in to post a comment

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