Project Overview
In this project, I created a responsive product showcase website for a bakery company. The goal was to build a clean and modern website using HTML, CSS, and Sass while applying structured front-end development techniques.
Techniques I Used
I used the BEM methodology to organize the CSS into reusable blocks, elements, and modifiers. I also worked with Stack and Cover layout patterns, responsive grids, logical properties, flexible sizing, clamp(), minmax(), and reusable components.
Sass helped me organize the styling into a more maintainable structure. I also focused on typography, spacing, colour contrast, semantic HTML, and accessibility.
What I Learned
This project helped me understand how important structure is when a website becomes larger. Using BEM made the relationship between HTML elements and CSS classes easier to understand and maintain.
I also learned how responsive layouts can be created with modern CSS techniques instead of relying heavily on media queries. Flexible units and functions such as clamp() and minmax() helped the layout adapt more naturally to different screen sizes.
Challenges
One of the challenges was keeping the layout consistent while combining sections containing different types of content. I had to pay attention to spacing, alignment, image sizes, and typography so that the website maintained a coherent visual language.
What I Would Improve
If I continued developing this project, I would improve the Sass structure further by using the Sass ampersand (&) more consistently for nested BEM selectors. I would also add more interactive states and test the design on a wider range of screen sizes.