Frontend Web DevelopmentArchived Learning Project

Q.Cafe — Coffee Shop Landing Page

A fully responsive coffee shop marketing website built using vanilla HTML, CSS, and JavaScript, focused on mastering frontend fundamentals, responsive layouts, animation systems, and modern browser APIs without relying on frameworks or build tools.

HTML5CSS3JavaScript (ES6)CSS GridCSS FlexboxCSS Custom PropertiesScrollReveal.jsSwiper.jsBoxiconsGoogle Fonts

GitHub Live Demo

Screenshots

Q.Cafe — Coffee Shop Landing Page — Home Page — Home Page

Q.Cafe — Coffee Shop Landing Page — Product Catalog — Product Catalog

Key Metrics

Marketing Landing Page

Static Frontend Website

Overview

Q.Cafe is a multi-section coffee shop landing page designed to explore core frontend development concepts including responsive layouts, design systems, browser APIs, animations, and UI composition. The project intentionally avoids frameworks to strengthen understanding of HTML, CSS, and JavaScript fundamentals.

Problem

Modern frontend development often relies heavily on frameworks, making it easy to overlook the browser primitives that power responsive layouts, animations, and interactive user experiences. Building a polished marketing website without abstractions provides a deeper understanding of these foundations.

Solution

Developed a responsive single-page marketing website using CSS Grid, Flexbox, custom design tokens, ScrollReveal animations, and Swiper-powered carousels while maintaining a lightweight architecture with no framework dependencies.

Architecture

Static frontend architecture built with semantic HTML, CSS custom properties, CSS Grid layouts, and vanilla JavaScript interactions. ScrollReveal handles viewport-based animations using IntersectionObserver, while Swiper provides touch-enabled carousel functionality. The application is optimized for static hosting environments such as Netlify, GitHub Pages, and Vercel.

Challenges

Building fluid CSS Grid layouts using auto-fit and minmax().
Creating responsive designs across multiple breakpoints.
Implementing clip-path based mobile navigation animations.
Customizing Swiper pagination components.
Managing ScrollReveal staggered animations.
Maintaining visual consistency through design tokens.
Achieving smooth animations without framework abstractions.

Lessons Learned

CSS Grid and Flexbox layout systems.
CSS custom properties as runtime design tokens.
IntersectionObserver versus scroll event listeners.
Compositor-thread animation optimization.
Responsive design architecture.
Event-driven JavaScript interactions.
Third-party library integration patterns.
Frontend performance optimization techniques.