Bubble Bay Bakery
Mock Small Business Website
Bubble Bay Bakery is a mock seaside-themed bakery website built entirely with vanilla HTML and CSS. Created as a summer student project, it demonstrates responsive design, manual coding, and light brand development through custom graphics, color exploration, and simple merchandise mockups inspired by a playful “sweet summer” aesthetic.
Duration
July 2024
Role
Owner, Web Designer and Developer
Tools
Goal
The goal was to hand-code a fully responsive small business website without frameworks, focusing on structure, usability, and deployment. Bubble Bay Bakery served as both a coding exercise and light branding exploration.
Development
Built entirely with HTML and CSS, the site was deployed through GitHub Pages. Over several weeks, I refined responsive layouts, experimented with image placement, and structured pages to emulate a small business website.
01 Stylescape
I created a stylescape exploring bright, summery colors, seaside motifs, and childlike whimsy—capturing a “sweet summer” personality that guided the logo, patterns, and overall playful tone.
02 Wireframe
I began with hand-drawn sketches before refining them in Figma, mapping the site’s information flow—from hero section to CTAs, flavor previews, and contact details.
03 Branding & Graphic Design
Between wireframing and prototyping, I developed Bubble Bay Bakery’s visual identity—designing a simple logo, custom pattern, and playful merchandise mockups. I also experimented with AI-generated imagery to create ocean-inspired bakery visuals.
03 Prototype
The Figma prototype demonstrated navigation flow. It helped visualize content hierarchy and test interactions before translating the final design into clean, functional code.
05 GitHub Deployment
The completed site was published through GitHub Pages, showcasing my ability to manage hosting, file organization, and live deployment without relying on frameworks or CMS platforms.
