Tea House

E-commerce Website Development and Design

Overview

Tea House is a responsive website for a fictional e-commerce brand. The site utilizes a MySQL database and PHP for many features. This includes searching, filtering and sorting products, populating individual product pages and adding or deleting products in the cart. The website is live and can be accessed from the button below.


My Role

  • Development
  • Visual Design
  • Photography

Tools

  • HTML
  • CSS
  • Media Queries
  • PHP
  • MySQL
  • JQuery

Process

Development began with a sitemap, wireframes and style guide.

Sitemap

Wireframes

Style Guide

I began coding this site by creating individual components which were compiled into a style guide. The style guide aided with testing the code. Once refined, I reused the code throughout the site. This process helped to maintain a consistent design system. The style guide can be viewed by clicking on the following link.

Visual Design

The design system was developed in tandem with the coding of the site.

Features

A Responsive Layout

The layout is built with css grid, flexbox and media queries. The site adapts to desktop and mobile.

MySQL & PHP

MySQL and php work together to generate individual product pages and populate search results.