https://github.com/ramtinimani/goldencoffee
Responsive Coffee Website Using Tailwind CSS
https://github.com/ramtinimani/goldencoffee
coffee-shop html-css-javascript responsive-website tailwindcss
Last synced: about 1 month ago
JSON representation
Responsive Coffee Website Using Tailwind CSS
- Host: GitHub
- URL: https://github.com/ramtinimani/goldencoffee
- Owner: RamtinImani
- Created: 2024-11-19T16:52:40.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-13T17:44:01.000Z (2 months ago)
- Last Synced: 2025-02-13T18:37:32.065Z (2 months ago)
- Topics: coffee-shop, html-css-javascript, responsive-website, tailwindcss
- Language: HTML
- Homepage:
- Size: 3.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ☕ 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](https://nodejs.org) if not already installed.
2. Install the necessary packages:
Open your terminal, navigate to the project directory, and run:
```bash
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:
```bash
npm run build
```
Or:
```bash
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"