CSS Grid, Flexbox, BEM, Desktop first site

Community feedback

• 

  Mohamed ELIDRISSI•150

  @MohamedElidrissiPosted almost 5 years ago

  Great job Hamza, happy to see more Morrocans here ;) Did you know you can do most of the form validation using CSS only? You can use the :invalid pseudo class in conjunction with the required attribute to trigger stylings only when an input is invalid

  2

  ---

  

  Hamza El Aissaoui•110

  @kuroyzaPosted almost 5 years ago

  @MohamedElidrissi Thanks man, i actually totally forgot it exists :p, i'll try to use it instead of JavaScript.

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  Awesome work on this challenge, Hamza! Your solution looks great and is extremely close to the design. Well done! 👍

  I've got a couple of recommendations after taking a look at your code:

  • label elements shouldn't be used as the error messages in the form. They should be paired with a form input to help users know what data they should be providing. I would recommend refactoring your code so that the labels describe the inputs and use something like a p or span for the error messages.
  • On a future project, have a go at using min-width media queries instead of max-width. It often leads to less code and also has the benefit of loading in fewer styles for mobile users.

  I hope these tips help. Keep up the great work! 🙂

  1

  ---

  

  Hamza El Aissaoui•110

  @kuroyzaPosted almost 5 years ago

  @mattstuddert Interesting! i always thought label tags are something like div tags, so you can use them as you wish, so i think i am going to change it to span. I've never used min-width before, but it make sense now, i think i'll try to practice more mobile first approach on codes.

  I really appreciate your tips, thank you so much.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @kuroyza no problem, Hamza. span is more similar to a div when it relates to content tags. It's best for some generic text that isn't a heading or a paragraph. Labels are specifically for providing a label for a form control of some sort.

  Let me know if you ever have any questions 👍

  1

  

  Hamza El Aissaoui•110

  @kuroyzaPosted almost 5 years ago

  @mattstuddert Thank you so much 👏

  0