Skip to content

README.md

Latest commit

 

History

History
45 lines (36 loc) · 2.41 KB

README.md

File metadata and controls

45 lines (36 loc) · 2.41 KB
Raw

Freshies 🥬🍎

Freshies is a front-end web application for a fresh grocery and produce delivery service. This project was developed as a foundation-level web development assignment to demonstrate proficiency in building structured, responsive, and interactive websites.

📖 Project Overview

The website allows users to browse a variety of fresh produce (meats, vegetables, fruits), learn about the delivery process, and get in touch with customer support. It features a multi-page layout with a consistent theme, custom styling, and interactive JavaScript elements.

✨ Features

  • E-Commerce Interface: A dedicated products page to browse different categories of groceries.
  • Information Pages: Includes an About Us page, a detailed Delivery information page, and a Contact page for customer inquiries.
  • Consistent UI/UX: A global header and footer with navigation and social links.
  • Multimedia Elements: Features custom icons, high-quality images of produce, and integrated audio elements.

🛠️ Technologies Used

  • HTML5: Semantic markup for page structure.
  • CSS3: Custom styling spread across modular CSS files for easier maintenance (e.g., header.css, footer.css, product.css).
  • JavaScript: DOM manipulation and interactive logic for the product displays (script.js, product.js).

📁 File Structure

📦 Freshies
 ┣ 📂 audio          # Audio assets (e.g., background music/sound effects)
 ┣ 📂 icons          # UI icons (social media, UI elements)
 ┣ 📂 images         # High-resolution produce and background images
 ┣ 📂 script         # JavaScript logic (product.js, script.js)
 ┣ 📂 style          # Modular CSS stylesheets
 ┣ 📜 index.html     # Homepage
 ┣ 📜 about.html     # About Us page
 ┣ 📜 contact.html   # Contact Us form/info
 ┣ 📜 delivery.html  # Delivery logistics and info
 ┗ 📜 product.html   # Produce catalog

🚀 How to Run

  1. Clone the repository to your local machine
  2. Open the project folder
  3. Open index.html in any modern web browser to view the site, or use an extension like VS Code Live Server for a better development experience.

You can also directly click the website link under repository about section for live view.

👨‍💻 Author

  • Ting Rong You
  • Shawn Tan Yu Hang

Tunku Abdul Rahman University of Management and Technology (TARUMT) Foundation Web Development Assignment