Coffee Shop Landing Page — Maple & Bean Coffee
A modern, fully responsive café website built from scratch using HTML, CSS, and JavaScript — featuring custom branding, interactive ordering, responsive design, and performance optimization.
Built From Scratch
No templates, frameworks, or page builders used.
100% Responsive
Optimized for desktop, tablet, and mobile devices.
Interactive JavaScript
Real-time ordering experience with zero page reload.
GitHub + Netlify
Continuous deployment with automated publishing.
Gallery
Screenshots
Click any screenshot to open it full size.
Overview
Project Overview
Maple & Bean Coffee is a modern responsive landing page created to demonstrate front-end web development, responsive design, and JavaScript interactivity.
The project simulates a real café website where customers can browse menu items, place orders through an interactive modal, and receive instant order confirmation without leaving the page.
The website emphasizes clean UI design, accessibility, performance, and a seamless user experience across desktop and mobile devices.
Features
Key Features
Custom Branding
Designed a complete café-inspired identity with a custom SVG logo and elegant brown-and-cream color palette.
Interactive Ordering
Built a JavaScript-powered ordering modal that allows customers to submit orders and receive real-time confirmation without refreshing the page.
Responsive Navigation
Developed a responsive hamburger navigation with smooth scrolling and optimized mobile usability.
Performance Optimized
Implemented lazy-loaded images, lightweight assets, and smooth scroll-triggered animations for a fast browsing experience.
Continuous Deployment
Integrated GitHub version control with Netlify for automated deployments and streamlined updates.
Capability
Skills Demonstrated
The concrete technical skills applied while planning, building, and shipping this project.
Responsive Web Design
Mobile-First Development
Semantic HTML & Accessibility
Reusable CSS Architecture
DOM Manipulation
JavaScript Event Handling
Interactive UI Development
Performance Optimization
Git Version Control
Continuous Deployment
Stack
Technology Stack
Problem
Challenge
Create a modern café landing page that provides an engaging ordering experience while remaining lightweight, responsive, and free from CMS or backend dependencies.
Approach
Solution
Designed and developed the website entirely from scratch using HTML, CSS, and JavaScript. Implemented:
- Responsive layouts
- Mobile hamburger navigation
- Smooth scrolling
- Scroll-triggered animations
- Interactive order modal
- Instant order confirmation
- Lazy-loaded images
- Git version control
- Automated deployment using GitHub and Netlify
Engineering
Technical Challenges Solved
Real problems hit during the build — and how each one was diagnosed and resolved.
Problem
Building fully responsive layouts without a CSS framework.
How I solved it
Wrote a mobile-first stylesheet using CSS custom properties, Flexbox, and Grid, with a small set of breakpoints — no Bootstrap or Tailwind, so the page stays under a lightweight asset budget.
Problem
Keeping the CSS maintainable as sections grew.
How I solved it
Structured the stylesheet into design tokens, layout utilities, and component blocks with consistent naming, so new sections reuse existing rules instead of adding one-off overrides.
Problem
Letting customers order without a backend or page reload.
How I solved it
Built an order modal in vanilla JavaScript: menu buttons pass item and price data through data attributes, the form is validated on submit, and a confirmation slip is rendered directly into the DOM.
Problem
Navigation had to stay usable on small screens.
How I solved it
Implemented an accessible hamburger menu with a toggled aria-expanded state, keyboard focus handling, and smooth-scroll anchors that account for the sticky header offset.
Problem
Large café photography slowed the first load.
How I solved it
Compressed and correctly sized every image, added native lazy loading below the fold, and kept animations to transform and opacity so scrolling stays smooth on mobile.
Problem
Shipping updates safely and repeatably.
How I solved it
Used Git for version control and connected the repository to Netlify, so every push builds and publishes automatically with a rollback available.
At a glance
Project Metrics
0
Frameworks or page builders used
3
Device classes verified (desktop, tablet, mobile)
0
Page reloads in the ordering flow
Auto
GitHub → Netlify deployment
Results
Outcome
Fully responsive across desktop, tablet, and mobile
Interactive JavaScript ordering workflow
Zero page reload user experience
Optimized loading performance
Automated GitHub → Netlify deployment
Modern and professional UI
Growth
Lessons Learned
During this project I strengthened my skills in:
Highlights
Project Highlights
Built Completely From Scratch
Mobile Responsive
Interactive JavaScript
Continuous Deployment
Custom Branding
Real-Time Ordering Experience
Interested in a responsive website like this?
I build responsive websites and workflow automation solutions that help businesses improve their online presence and streamline operations.