Skip to content
Submitted 8 months ago

Recipe Page using HTML and Sass focusing on a11y and BEM

Steve Xero•210
@stevexero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 8 months ago

    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
    1
    Steve Xero•210
    @stevexeroPosted 8 months ago

    @0xabdulkhalid thank you Abdul!!

    0
  • Mirjax2000•680
    @Mirjax2000Posted 8 months ago

    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
    1
    Steve Xero•210
    @stevexeroPosted 8 months ago

    @Mirjax2000 Haha that's awesome! This was my first deep dive into Sass. Their docs are really nice, too!

    There were a few things on here that slipped me up, but it was fun!

    I'm looking forward to your solution!

    0
    Mirjax2000•680
    @Mirjax2000Posted 8 months ago

    @stevexero done: https://github.com/Mirjax2000/recipe-page-main https://mirjax2000.github.io/recipe-page-main/.

    I used resolution decider for img, and in sass i made one cyklus. If you want to see that, it is desribed in readme file, which i made by your example. And also i mentioned you in bottom of my readme file.

    Marked as helpful
    1
    Steve Xero•210
    @stevexeroPosted 8 months ago

    @Mirjax2000 Awesome!!!!!

    0

Please log in to post a comment

Log in with GitHub

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