Mobile first with Flexbox and vanilla JS

Community feedback

• 

  Adam•430

  @aemann2Posted over 3 years ago

  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

  ---

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  @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