Bubble Bay Bakery
Mock Small Business Website
A mock seaside bakery website built entirely with vanilla HTML and CSS as a summer student project. The focus was on hand-coding a responsive small business site from scratch, with light brand development including custom graphics, color exploration, and simple merchandise mockups built around a playful sweet summer aesthetic.
The Problem & Goal
Problem
Most beginner web projects rely on frameworks to handle the heavy lifting. This project was a deliberate choice to build without them, to get a clearer understanding of how responsive layouts, page structure, and deployment actually work at the code level.
Goal
Hand-code a fully responsive small business website without frameworks or CMS platforms, combining front-end fundamentals with light branding and graphic design work.
The Process
01 — Stylescape
Explored bright summery colors, seaside motifs, and a childlike sense of whimsy to establish the personality behind the brand. The stylescape guided everything from the logo to the patterns and overall playful tone.
02 — Wireframe
Started with hand-drawn sketches before moving into Figma, mapping the site's content flow from the hero section through flavor previews, CTAs, and contact details.
03 — Branding and Graphic Design
Developed Bubble Bay Bakery's visual identity between wireframing and prototyping. This included a simple logo, a custom repeating pattern, and merchandise mockups. AI-generated imagery was used to create ocean-inspired bakery visuals as a time-efficient stand-in for photography.
04 — Prototype
Built a linked Figma prototype to test navigation flow and content hierarchy before writing any code, helping catch layout issues early and keep the build phase focused.
05 — Deployment
Published through GitHub Pages, covering hosting setup, file organization, and live deployment without relying on any frameworks or third-party platforms.
Outcome
