CityBite Burgers Website

A responsive, single-page web application for a burger restaurant, showcasing a modern and user-friendly design. Built with HTML and SCSS to demonstrate a performant and visually appealing front-end architecture.

Deployed version

You can access the deployed version of the app here: CityBite Burgers

Overview

The CityBite Burgers website is designed to provide a seamless and visually appealing experience for users. From a sleek design to interactive menus, the site combines style and functionality to engage visitors.

Features

• Responsive Layout: Designed for optimal viewing on desktop, tablet, and mobile devices.
• Intuitive Navigation: A clean and accessible user interface for seamless navigation.
• Menu Display: Includes sections for burgers, sides, desserts, and beverages.
• Modular SCSS Architecture: Well-organized, reusable styles with component-based SCSS structure.
• Performance-Focused: Lightweight structure with minimal dependencies for faster load times.

Technologies Used

• HTML5: For semantic and accessible markup.
• SCSS: For structured, reusable and maintainable styling.
• Netlify: For continuous deployment and hosting.

Getting Started

Prerequisites

To work with the project locally, you’ll need basic knowledge of HTML and SCSS. Install Sass to compile SCSS into CSS.

Installation

1. Clone the repository:

   git clone https://github.com/filosoho/CityBite-Burgers.git

   cd CityBite-Burgers

2. Install Sass (if not already installed):

   npm install -g sass

3. Compile SCSS: Navigate to the project directory and run:

   sass assets/styles/main.scss assets/styles/main.css

   This will compile the SCSS into a single CSS file.

4. Open index.html in your browser to view the site locally.

Scripts

The project includes npm scripts for compiling and watching SCSS files.

• Compile SCSS: Run this command to manually compile SCSS to CSS:

  npm run compile:sass

• Watch SCSS: Use this command to automatically compile SCSS whenever changes are detected:

  npm run watch:sass

Contributing

If you would like to contribute:

1. Fork the repository.
2. Create a feature branch (feature/your-feature-name).
3. Commit your changes and push the branch.
4. Submit a Pull Request with a description of your changes.

---

CityBite Burgers demonstrates best practices in front-end development using SCSS and HTML, with an emphasis on responsiveness and user experience. Explore, enjoy, and contribute!