Context

The main goal of this project was to re-design an existing, small e-commerce site in order to develop skills in HTML, CSS, and visual design for web. In addition to being aesthetically pleasing, the site needed to be responsive from mobile to desktop, use semantic markup, efficient CSS, and use a grid system.

Design Process

• Choose site to re-design
• Create appropriate style tiles in Figma for site aesthetics
• Create a grid system in Figma
• Sketch wireframes for pages
• Create Figma mock-ups at 3 different screen sizes based on sketches
• Create simplest, semantic markup using HTML and CSS at mobile screen size
• Finish full build by setting media queries for different screen sizes

Check out the code here.