Drink2Go - Responsive E-commerce Website

Pixel-perfect responsive website for a coffee shop built with HTML5, SCSS (BEM methodology), and Vanilla JavaScript. Completed in 7 days as part of HTML Academy graduation project.

🎯 Project Overview

Drink2Go is a responsive e-commerce website for a coffee shop featuring convenient filtering by coffee origin countries and milk concentration. The project demonstrates pixel-perfect implementation, mobile-first responsive design, and modern frontend development practices.

📸 Screenshots

Responsive design across mobile (320px), tablet (768px), and desktop (1440px) breakpoints

Key Features

✅ Pixel-perfect design implementation matching Figma mockups
✅ Mobile-first responsive layout (320px → 768px → 1440px+)
✅ BEM methodology for maintainable CSS architecture
✅ Custom form controls (checkboxes, radio buttons, range slider)
✅ Vanilla JavaScript slider implementation (no libraries)
✅ SVG sprite system for optimized icons
✅ Retina-ready images with WebP format support
✅ Accessibility features (keyboard navigation, ARIA labels)

📱 Responsive Breakpoints

Mobile: 320px - 767px
Tablet: 768px - 1439px
Desktop: 1440px+

🛠️ Tech Stack

Core Technologies

HTML5 - Semantic markup
SCSS - CSS preprocessor with BEM methodology
Vanilla JavaScript (ES6+) - No frameworks
Gulp 4 - Build tool and task runner

Libraries & Tools

NoUISlider.js - Range slider for price filtering
PostCSS with Lightning CSS - CSS processing and minification
BrowserSync - Development server with live reload

Development Tools

ESLint - JavaScript linting
Stylelint - SCSS/CSS linting
HTML Validator - Markup validation
BEM Linter - BEM methodology validation
BackstopJS - Visual regression testing

📁 Project Structure

drink2go-shop/
├── source/                 # Source files
│   ├── styles/            # SCSS stylesheets
│   │   ├── common/       # Variables, fonts, global styles
│   │   ├── ui/           # Reusable UI components
│   │   └── blocks/       # BEM blocks (page sections)
│   ├── scripts/          # JavaScript modules
│   ├── images/           # Optimized images (WebP + PNG)
│   ├── icons/            # SVG icons (compiled to sprite)
│   ├── fonts/            # Web fonts (Montserrat)
│   ├── index.html        # Main page
│   └── 404.html          # Error 404 page
├── build/                # Production build (generated)
├── raw/                  # Raw assets (not committed)
└── gulpfile.js           # Gulp configuration

🚀 Getting Started

Prerequisites

Node.js v18.18+ or v20.9+ (LTS version)
npm (comes with Node.js)
Git

Installation

Clone the repository:

git clone https://github.com/OlgaGulyakevich/drink2go-shop.git
cd drink2go-shop

Install dependencies:

npm ci

Start development server:

npm start

The project will open at http://localhost:3000 with live reload enabled.

📜 Available Scripts

Development

npm start - Start development server with live reload
npm run build - Build production version
npm run preview - Build and preview production version

Code Quality

npm run lint - Run all linters
npm run lint:html - Lint HTML markup
npm run lint:styles - Lint SCSS files
npm run lint:scripts - Lint JavaScript files
npm run lint:bem - Validate BEM methodology

Optimization

npm run optimize - Optimize all images
npm run optimize:raster - Optimize raster images
npm run optimize:vector - Optimize vector graphics

Testing

npm run test-pp - Run pixel-perfect visual regression tests

🎨 Design Implementation

Design System

The project follows a comprehensive design system extracted from Figma:

Color Palette: Primary purple (#7859cf), secondary colors, text colors
Typography: Montserrat font family (Regular, Medium, SemiBold, Bold, ExtraBold)
Spacing Scale: Consistent spacing system (4px base unit)
Component Library: Buttons, inputs, cards, badges, navigation

Pixel-Perfect Approach

Exact measurements from Figma mockups
Precise color matching (hex values)
Typography matching (font sizes, line heights, letter spacing)
Spacing accuracy (±2px tolerance)
Visual regression testing with BackstopJS

🏗️ Architecture Highlights

BEM Methodology

All CSS follows BEM (Block Element Modifier) naming convention:

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

Mobile-First CSS

All styles start with mobile (320px) and progressively enhance:

// Mobile styles (base)
.component {
  padding: 20px;
}

// Tablet (768px+)
@media (min-width: 768px) {
  .component {
    padding: 30px;
  }
}

// Desktop (1440px+)
@media (min-width: 1440px) {
  .component {
    padding: 40px;
  }
}

JavaScript Modules

Modular JavaScript architecture:

menu.js - Mobile menu toggle functionality
slider.js - Custom slider implementation (no libraries)
filters.js - Form handling and NoUISlider integration
utils.js - Utility functions

📦 Key Components

Header

Responsive logo (3 versions: mobile/tablet/desktop)
Navigation menu with mobile hamburger
User and cart icons via SVG sprite

Hero Slider

Custom JavaScript slider (no libraries)
Navigation buttons with disabled states
Pagination dots for desktop
Responsive images with retina support

Catalog

Custom checkbox and radio button styles
NoUISlider price range filter
Product cards grid layout
Pagination component

Footer

Multi-column layout
Social media icons (SVG sprite)
Contact information
HTML Academy logo link

🎯 Project Achievements

✅ 100% pixel-perfect implementation verified by automated tests
✅ Mobile-first responsive design across 3 breakpoints
✅ Zero JavaScript frameworks - pure vanilla JS
✅ BEM methodology - maintainable and scalable CSS
✅ Accessibility - keyboard navigation, ARIA labels, semantic HTML
✅ Performance - Optimized images (WebP), minimal bundle size (~8KB JS, 39KB CSS)
✅ Code quality - All linters passing, clean codebase

📊 Performance Metrics

JavaScript Bundle: ~8.4KB (minified, including NoUISlider integration)
CSS Bundle: 39KB (minified, including custom components)
Total Build Size: ~13MB (optimized images with WebP format)
Image Optimization: WebP format with PNG fallback for broader compatibility
SVG Icons: Compiled to single optimized sprite file
Lighthouse Score: 95+ (Performance, Accessibility, Best Practices)

🧪 Testing

The project includes comprehensive visual regression testing:

Pixel-perfect comparison with Figma mockups
Cross-browser compatibility testing
Responsive design validation
Interactive element testing

Run tests:

npm run preview  # Start server first
npm run test-pp # In another terminal

📝 Code Standards

HTML: Semantic markup, W3C validated
SCSS: BEM methodology, mobile-first, organized structure
JavaScript: ES6+ features, modular architecture, no console.logs in production
Accessibility: WCAG AA basics, keyboard navigation, ARIA labels

💡 What I Learned

Building this project in 7 days taught me valuable skills in modern frontend development:

Technical Skills

Pixel-Perfect Implementation - Translating Figma designs to code with ±2px accuracy using automated visual regression testing
Responsive Design Mastery - Mobile-first CSS architecture across 3 breakpoints (320px, 768px, 1440px+)
CSS Architecture - Implementing scalable BEM methodology with SCSS, creating reusable component library
Vanilla JavaScript - Building custom slider and interactive components without frameworks (600+ lines of clean ES6+ code)
Build Automation - Configuring Gulp 4 pipeline for SCSS compilation, JavaScript bundling, image optimization

Development Workflow

Design Systems - Extracting and implementing comprehensive design tokens (colors, typography, spacing) from Figma
Code Quality - Maintaining 100% linter compliance (ESLint, Stylelint, HTML validation, BEM validation)
Performance Optimization - Achieving 39KB CSS and 8KB JS bundles through minification and code splitting
Version Control - Clean Git workflow with semantic commit messages and feature branches

Problem-Solving

Cross-browser Compatibility - Handling browser inconsistencies with PostCSS and Lightning CSS
Accessibility - Implementing keyboard navigation, ARIA labels, and semantic HTML for WCAG AA compliance
Image Optimization - Setting up WebP with PNG fallback, retina support, and responsive images
Custom Form Controls - Styling native checkboxes, radio buttons, and integrating NoUISlider for price range

This project solidified my understanding that pixel-perfect doesn't mean pixel-rigid - it means attention to detail while maintaining responsive, accessible, and performant code.

📄 License

This project was created as part of HTML Academy graduation requirements.

🌐 Live Demo

👉 View Live Website

The project is deployed on GitHub Pages and fully functional. You can test all features including:

Responsive design across all breakpoints
Interactive slider navigation
Form filters with custom controls
Mobile menu functionality

👤 Author

Olga Gulyakevich

Project Duration: 7 days (November 4-10, 2024) Status: ✅ Completed and tested Type: Graduation project for HTML Academy Live Demo: olgagulyakevich.github.io/drink2go-graduation

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
figma		figma
snap		snap
source		source
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.htmlvalidate.js		.htmlvalidate.js
.linthtmlrc		.linthtmlrc
.stylelintignore		.stylelintignore
.stylelintrc		.stylelintrc
README.md		README.md
gulpfile.js		gulpfile.js
package-lock.json		package-lock.json
package.json		package.json
run-test.js		run-test.js
svgo.config.js		svgo.config.js

Latest commit

History

Folders and files

Repository files navigation