All projects

Coffee Shop

Online Coffee Shop

Project description

Multi-page structure: Three fully functional pages have been implemented: Home, Product Catalog, and Product Details.

The layout is optimized for four breakpoints, ensuring correct display on all devices.

Modern layout: The interface grids are built using modern Flexbox and CSS Grid standards.

Interactive elements: A drop-down mobile menu and an interactive search bar are implemented using pure JavaScript (Vanilla JS).

Style organization: Using the SASS/SCSS preprocessor for a modular style architecture.

Build automation: Resource optimization (minification, compilation) and local development are configured using Gulp.

Link to the "live" On-Line projectProject link on GitHub

Project build

The finished project is created in the - "build" folder.

  • Before building and running the project, install dependencies with the command: npm i
  • Build for development with a local server: npm start
  • Build for production with a local server: npm run prod
  • Build without a server (ready for hosting): npm run build