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

Mobile first with Flexbox and vanilla JS

Axseinga• 430

@axseinga

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


Hi everyone!

Please feel free to comment my solution and let me know if I can improve my code. Please have a look at javascript part and let me know if it can be written differently or if there is something that can be improved (really appreciated!). If anyone knows where to read more about how to enable submitting the form after user clicks submit button - at the moment I used e.preventDefault() to stop form from submitting.

Thank you!

PS. I updated accessibility issues but somehow I cannot generate new report... If someone can check if I done it correctly I would be thankful!

Community feedback

Adam• 430

@aemann2

Posted

Very nice job -- I like how you set the width for your form to a max-width so it doesn't get unnaturally large when you're scaling up to desktop size. One thing I'll suggest is that when you write your CSS, put your media queries in their own section rather than putting them in the individual classes. It's quicker to look for the screen width you want when you're changing a mobile style, rather than having to know the width in the specific class name.

You've pretty much got it with your Javascript. In my solution, I basically did what you did, but with a forEach loop because I got tired of writing everything 4 times. You can actually cut down on your Javascript some by taking the error img out of your HTML and setting a background-image on your form fields with JS. Check my solution to see what I'm talking about.

I checked your accessibility issues, and it looks like what you have should clear those. I had the same problem when I submitted mine, and I also fixed it by adding aria-label.

1

Axseinga• 430

@axseinga

Posted

@aemann2 Hi there Aemann2! Thank you for your time to write comment on my solution :) Regarding media queries I know both ways of writing it however I get completely lost if I put my media queries in one class. It might be because the teacher from the course I took wrote it this way and it is just how I took it but still writing it just below the original class it is very easy for me when I come back and want to fix something I know exactly where to look for it. It might be done to personal preference or not? Do you know any article that I can read about good practise?

I am on my way to check your solution. Thanks more time you took the time to have a look at mine! :)

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