Sobeys
As a front-end developer, I’ve often found myself tasked with transforming a client’s vision into a functional, visually appealing reality. One such project was the Sobeys website, where I was responsible for laying out page templates for their online store. Using a combination of HTML, CSS, and jQuery, I crafted a variety of key pages including the weekly flyer, store locations, a recipe video gallery, shopping lists, search results, and more.
The project required the use of the Bootstrap CSS framework, a popular choice that provides a solid foundation for building responsive websites. However, working with Bootstrap often involves more than just writing original CSS code. It’s about structuring the HTML in a way that leverages Bootstrap’s capabilities while ensuring the final product doesn’t look like a cookie-cutter template.
This is where the real challenge—and the real fun—comes in. Bootstrap is powerful, but if you’re not careful, your site can end up looking like it was pulled straight out of the box. My goal with Sobeys was to avoid that default template look by building on top of the Bootstrap framework with custom stylesheets and strategic overrides. These enhancements helped bring the site together, ensuring it had a unique identity that aligned with Sobeys’ brand.
From the main index page with links to various site features to the detailed layouts for recipes and shopping lists, every template was carefully designed to offer a seamless user experience. The recipe video gallery, for instance, wasn’t just about showcasing content—it was about creating an intuitive and engaging way for users to explore and interact with that content.
In working with Bootstrap, I focused on making sure the site not only met the client’s technical requirements but also stood out visually. It’s a fine balance between using the tools at your disposal and pushing beyond the boundaries of what’s expected. By layering custom styles on top of the Bootstrap foundation, I was able to deliver a site that feels tailored and cohesive, far removed from the generic look that often plagues out-of-the-box solutions.
Ultimately, my work on the Sobeys website was about more than just laying out page templates. It was about enhancing the user experience, maintaining the brand’s visual integrity, and demonstrating that even within the constraints of a framework, there’s room for creativity and originality.
