Submitted about 4 years ago

Responsive landing page using CSS Grid Layout

Lailton Batista• 690

@lailton-b

Preview site View code

This is a solution for...

Fylo dark theme landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

If you have any tips, I would like to hear!

Community feedback

Matt Studdert• 13,611

@mattstuddert

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

Lailton Batista• 690

@lailton-b

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

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

@lailton-b you're welcome!

Bethany• 855

@whimsicurl-creations

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

Lailton Batista• 690

@lailton-b

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

Lailton Batista• 690

@lailton-b

Posted about 4 years ago

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

Vincenzo Marcovecchio• 1,085

@VincenzoMarcovecchio

Posted about 4 years ago

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

Lailton Batista• 690

@lailton-b

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

Vincenzo Marcovecchio• 1,085

@VincenzoMarcovecchio

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

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