Recipe Page using HTML and Sass focusing on a11y and BEM
Design comparison
Solution retrospective
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
- @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 forbody
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 frombody
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 helpful1 - @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 helpful1@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@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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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