Skip to content
Submitted over 1 year ago

Recipe Page using HTML and Sass focusing on a11y and BEM

accessibility, sass/scss, bem
P
Steve Xero•210
@stevexero
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm really proud of diving deeper into Sass and BEM. It (as per usual) took longer than expected but I really learned a lot!

For the next project, I would like to focus more on refactoring my Sass files to be as clean as possible. I will also continue down the WCAG path to improve my sites' accessibility.

What challenges did you encounter, and how did you overcome them?

My biggest challenge was refactoring my Sass a\to incorporate BEM standards. One of my favorite things about Sass is the ability to nest,, however, BEM doesn't want more than 1 or 2 layers of nesting. It was a good learning experience to think about BEM while writing the Sass.

What specific areas of your project would you like help with?

If anyone can look at my Sass file and offer improvements, I would greatly appreciate it!

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    BODY MEASUREMENTS 📐:

    • After inspecting your code i have found that you applied width: 100vw property for body which is not necessary. because it's a block level element which will take the full width of the page by default.
    • So feel free to remove width: 100vw style rule from body this will help you to write efficient code and makes your code more reusable.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Mirjax2000•720
    @Mirjax2000

    Hi, so you are Sass man after all. very nice structure of your _sass config. You are using maps as well.

    Html structure is also perfect. today i will do this challenge as well. Looking forward to it. Later on i will compare your code with mine. Ok i have to invent something special for you what i will use inside challenge. Some Sass trick. Lol, it is simple page, but i try.

    see ya

    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