Recipe page using SCSS/BEM

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

Hello, I'm Steven and this is my solution for this challenge using SCSS and BEM!😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• BEM Notation 🅱️

Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

🥇 I'm most proud of my ability to grasp the concept of utility classes and their application in CSS. Realising that Tailwind is essentially a collection of utility classes helped me understand the power of this approach to styling. I’m also pleased with how I tackled the challenge of working with tables for the first time, especially considering their importance for accessibility. Even though it was tricky to get the table styling precise, I learned a lot about the nuances of table design and the importance of accessibility features.

⏳ Next time, I would focus on planning my styling approach more carefully, especially when dealing with complex elements like tables and lists. I would also take extra care with default styles, like the font-weight on headings, to avoid unexpected results. Additionally, I’d double-check all file paths and links from the start to avoid issues with hosting websites not finding my resources.

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

💻 One of the main challenges I encountered was styling bullet points in a way that looked clean and consistent across different browsers. Initially, I struggled with the default behavior of list markers being outside the element, but using list-style-position: inside; helped control that, although it introduced some alignment issues with numbers and text. I also had to figure out how to correctly change the color of bullet points using the &::marker pseudo-element in SCSS, which was a new concept for me.

👨🏻‍💻 Another challenge was dealing with the default styling of headings, particularly the h2 tag, which appeared too bold. After some investigation, I realized that h2 tags have a default font-weight of bold, which I needed to adjust for my design.

🌐 Finally, getting my project hosted correctly involved troubleshooting why some CSS and images weren’t loading. I discovered that I had to remove a trailing slash from the link tags to ensure the hosting service could find the files correctly.

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

ℹ️ I would appreciate help with a few specific areas, particularly around fine-tuning my table styling to make it more precise and accessible. I found it challenging to get the table design exactly right, especially when balancing aesthetics with usability and accessibility.

➕ Additionally, I’d like some guidance on best practices for handling default browser styles, such as dealing with unexpected font weights on headings or the positioning of list markers. Understanding how to manage these defaults effectively would greatly improve the consistency of my designs.

❓ Finally, I’d appreciate any tips on optimizing file paths and resource linking for web hosting, as this caused some issues during deployment. Ensuring that all resources load correctly the first time would streamline the process and prevent headaches down the line.