< Back to My Work

Garden Spritz

Web Development

Project Overview

The goal of this artifact was to use a preexisting page that I had built for a group project and make it responsive with mobile-first in mind.

Tools

  • HTML⁄CSS
  • JavaScript
  • jQuery
Screenshot of the wireframe for the landing page and the HTML behind it

Sitemap Creation

I created the sitemap with simplicity in mind as our goal for the landing page was for it to look elegant and clean. I also kept in mind that we wanted this to also be relative to our app version of our website and to keep everything cohesive I made it really easy to follow with only the main navigation being a “Shop” button, a “Search” icon, and an “Account Login” Icon. Then there are various smaller footer navigation like FAQs and the like.

Garden Spritz Sitemap

Building HTML/CSS - Step 1

I originally started off by writing all the HTML out before styling it with CSS to match the design from my team member' (Linda H.) mockup. I also made the search, account, and arrow icons as I couldn't find any online that matched the look of the ones that were used in the mockup. I added my own styling such as making the header in a fixed position and adding a blur filter so that it would be easily viewed while scrolling over certain visual elements. I added some hovers over menu items as well.

Building HTML/CSS - Step 2

To recreate the original landing page from desktop-only to mobile-first, I needed to work backwards. I transferred the styles into a 1110px breakpoint using media queries. It started with a width of 320px as that is the most standard size for smaller devices such as cellphones. Then I used the breakpoints of 488px, 576px, 768px, 992px and the last breakpoint of 1110px so that everything grows in a relatively smooth way and can be viewed on all devices such as cellphones, iPads, tablets, laptops, and desktops.

Screenshot of the Media Queries for the viewport breakpoints

Editing jQuery Libraries

I had ran into some issues with the styling of Flickity as my carousel cells had a drop shadow on them and the viewport was being cut off from in-line styling. Once I got the styling fixed it was smooth sailing from here on out.

HTML and JavaScript Code for Flickity

Jump To Top