☕ Responsive Coffee Shop Website

Welcome to Golden Coffee, an online coffee shop designed to provide an exceptional user experience with a clean and modern interface. This project is a personal endeavor to practice and explore the capabilities of the Tailwind CSS framework while sharpening my front-end development skills.

✨ Features

• Responsive Design: The website is fully responsive, ensuring seamless functionality across all devices, from mobile phones to desktop computers.
• Mobile-First Approach: Built with a mobile-first design philosophy to prioritize smaller screen experiences.
• Dark Theme: Includes an elegant dark theme for enhanced usability and aesthetics in low-light environments.
• Accurate and Detailed: Focused on precision in layout and design to deliver a polished and user-friendly interface.
• Tailwind CSS Framework: Built entirely using Tailwind CSS to explore its utility classes and practice implementing its features effectively.

📂 Project Overview

This project demonstrates my ability to design a professional website using HTML, CSS, JavaScript, and the Tailwind CSS framework. It serves as a practical exercise to enhance my understanding of:

• Utility-first CSS design principles.
• Creating responsive layouts with Tailwind's grid and flex utilities.
• Customizing themes and adding dark mode functionality.
• Mobile-first development strategies.

🛠️ Installation

To set up and run this project locally, follow these steps:

1. Ensure that you have Node.js and npm installed on your system.

   • Download Node.js if not already installed.

2. Install the necessary packages:
   Open your terminal, navigate to the project directory, and run:

   npm install
   

3. Build the Tailwind CSS styles: This project uses the Tailwind CSS CLI to build the styles. Run the following command to generate the CSS file:

   npm run build
   

   Or:

   npx tailwindcss -i ./src/input.css -o ./public/css/app.css --watch
   

• Replace ./src/input.css and ./dist/output.css with the actual file paths used in your project, if they differ.

4. Open the index.html file in your browser to view the website.

🪄 Made With 🤍

🎨 This project’s Figma design is sourced from "sabzLearn.ir"