Responsive landing page using CSS Grid Layout

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Awesome work on this challenge, Lailton! Your solution looks really good 👍

  My main piece of advice would be to avoid setting click listeners on non-interactive elements, like the div element you've used for the hamburger. These can't be accessed by anyone not using a mouse/trackpad to navigate the content, which is a bad practice. Instead, add click listeners to interactive elements like a or button. This will ensure the element is focusable and can be accessed by people not using a mouse/trackpad.

  2

  ---

  

  Lailton Batista•690

  @lailton-bPosted over 4 years ago

  @mattstuddert I didn't know about this, but it really makes sense, I'm going to change right now. Thank you very much, Matt!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @lailton-b you're welcome!

  0
• 

  Bethany•855

  @whimsicurl-creationsPosted over 4 years ago

  Wonderful job! You did a great job adding transitions and hover states (I also liked the animated arrow). The only thing I noticed was that the quotation marks icon above the testimonials is cut off a bit. I haven't attempted this challenge yet but I would like to once I finish a few more. I've bookmarked your solution in case I get stuck. Keep up the good work.

  2

  ---

  

  Lailton Batista•690

  @lailton-bPosted over 4 years ago

  @whimsicurl-creations Thanks for the answer! I'm very happy for the bookmark, thank you very much !! The icon was cut because I followed the design given in the files, it is different from what is shown here. I really didn't realize it, thanks again!

  1

  

  Lailton Batista•690

  @lailton-bPosted over 4 years ago

  @whimsicurl-creations and yeah, I really liked the animation too, thanks for noticing, it took a little work, ahahah!

  1
• 

  Vincenzo Marcovecchio•1,085

  @VincenzoMarcovecchioPosted over 4 years ago

  Hey don't forget the input must have a label :)

  2

  ---

  

  Lailton Batista•690

  @lailton-bPosted over 4 years ago

  @vinceoldmark But what should I put on the label? since the input only has placeholder? I was very confused about that. I would appreciate it very much if you can help me, and thanks for the tip!

  0

  

  Vincenzo Marcovecchio•1,085

  @VincenzoMarcovecchioPosted over 4 years ago

  @lailton-b in this case it makes the input more accessible for screen readers,when they go over to the input with the keyboard it's going to say out the label so they understand what is that input for, do it for the fellow screen reader it's good practice, also have a look at the accessibility report you don't want any issue there

  0