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

Huddle Landing Page w/ Alternating Blocks (SASS + Mobile-first + BEM)

#accessibility#sass/scss#bem

Design comparison


SolutionDesign

Solution retrospective


Hi there ๐Ÿ‘‹, Iโ€™m Melvin, and this is my solution for this challenge. ๐Ÿš€

๐Ÿ› ๏ธ Built With:

  • SASS. ๐ŸŽจ
  • BEM notation. ๐Ÿ“
  • Mobile-first approach. ๐Ÿ“ฑ

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you. ๐Ÿ˜ŠโœŒ๏ธ

Community feedback

@VCarames

Posted

Hey @MelvinAguilar. Great Job on this landing page!

  • The Picture Element is not really necessary for this challenge since you are not changing the image for a different sized one or changing the contrast/brightness when applying a dark theme.

  • This one depends on the company's/developer's preference but you can leave the Alt Tags empty for the illustrations and a aria-hidden=โ€œtrueโ€ since they are just decorative.

  • Instead of wrapping each "card feature" in an Article Element it would better to use a Div instead, since none of the cards can stand on their own. The way you can determine if something can be wrapped in an Article Element is if it can be placed on a random website or a blank one and still make sense on its own.

Keep up the good work! Happy Coding! ๐Ÿ‘ป๐ŸŽƒ

Marked as helpful

2

@MelvinAguilar

Posted

@vcarames

Hey, there! ๐Ÿ‘‹ Thank you very much for your comments and the time you spent analyzing my code! ๐Ÿ˜ I will fix that as soon as possible.

1

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