Coffee Restro Website
Welcome to our college project presentation on creating a dynamic
coffee Resturant website using only HTML, CSS, and JavaScript. This
project showcases our web development skills and passion .
SUBMITTED BY: UNDER THE SUPERVISION OF :
• PRABHUDUTTA PANIGRAHI (23MC099) Prof. Archana Swain
• RUDRA NARAYAN RANA (23MC136)
• PRITAM KUMAR MOHANTY (23MC112)
Project Introduction
1 Team Collaboration 2 Technology Stack
Our team of four students We utilized HTML5 for
combined their skills to structure, CSS3 for styling,
create a fully functional and vanilla JavaScript for
Resturant website. interactivity.
3 Learning Experience
This project allowed us to apply classroom knowledge to a real-
world web development scenario.
Project Objectives and
Scope
1 Primary Goal
Discover the rich history, ethical sourcing, and artful brewing
of our premium coffee. Explore our selection and find your
perfect cup.
2 Key Features
Implement order coffee, categorization, user reviews,
and a ordering functionality.
3 Time Frame
Complete the project within an 8-week semester,
including planning, development, and testing phases.
HTML Structure and Semantic Markup
Semantic Elements Content Organization Accessibility
We used header, nav, main, and Coffee menu were structured using ARIA labels and alt text were
footer tags for clear document article tags and descriptive class implemented to enhance screen
structure. names. reader compatibility.
CSS Styling and
Responsiveness
Flexbox Layout CSS Grid
We used flexbox for flexible, Coffe posters were arranged
responsive layouts across in a grid layout for an
different screen sizes. organized gallery view.
Media Queries CSS Variables
Breakpoints were set to We implemented CSS
ensure optimal viewing on variables for consistent
mobile, tablet, and desktop theming and easy color
devices. scheme adjustments.
JavaScript Functionality and
Interactivity
Menu Search
Implemented real-time search functionality to filter different coffees based
on user input.
Dynamic Content
Created menu cards dynamically using JavaScript to populate the page
with data.
User Interactions
Added event listeners for rating coffee item, and submitting reviews.
Local Storage
Utilized browser's local storage to save user preferences and watchlist items.
User Interface and User
Experience Design
Color Scheme Typography
We chose a dark theme with accents Sans-serif fonts were used for
to enhance the cinematic feel. readability and a modern aesthetic.
Layout Accessibility
Intuitive navigation and clear visual High contrast and keyboard
hierarchy guide users through the navigation ensure an inclusive user
site. experience.
Online Ordering and Shipping
Browse
Explore our extensive selection of single-origin and
blended coffees.
Order
Choose your preferred grind size, roast, and quantity,
then proceed to checkout.
Receive
Your order will be carefully packaged and shipped to
your doorstep within 2-3 business days.
USER
MANAGEMENT
REPORT AND GENERATE
MANAGEMENT
INTERNET SPEED
MANAGEMENT
COFFEE WEBSITE
PAYMENT MANEGMENT TIME
SLOTMANAGEMENT
HOURS MANEGMENT
ZERO LEVEL DFD DIGRAM
ID
NAME CUSTOMBER
ADRESS
PASSWORD USER
PHONE NO
GMAIL-ID
DELIVERY
PAY
PRODUCT TYPE
PAYMENT ID
DATE
Future Plans and Innovations
1 Expanded Origins 2 Sustainable
Technologies
We're continuously
exploring new coffee- Investing in cutting-edge
growing regions to offer equipment and processes
even more unique and to further reduce our
exceptional flavors. environmental footprint.
3 Customer Experience
Developing innovative ways to enhance the coffee tasting and
brewing experience for our customers.
Conclusion
The online food ordering website aims to
revolutionize the way customers discover, order, an
receive their favorite meals.
By the current system and leveraging innovative
technologies, we are confident in delivering a
delightful dining experience.
The next steps involve refining the platform
based
on user feedback, expanding the restaurant
network, and exploring integration with additional
services to create a good food ecosystem.
THANK YOU
