Skip to content
Submitted over 2 years ago

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

accessibility, sass/scss, bem
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

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. 😊✌️

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    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

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