Inspiration
What it does
How we built it
Challenges we ran into
Accomplishments that we're proud of
What we learned
☕ Coffee Shop Website – Project Story
💡 What Inspired Me
As a passionate web developer and a coffee lover, I wanted to combine both passions into a meaningful project. Visiting aesthetic coffee shops inspired me to recreate that cozy and modern experience on the web. I aimed to design a responsive and attractive coffee shop website that could serve as an online presence for any small café business.
📚 What I Learned
While working on this project, I learned and improved:
How to structure a real-world website using HTML5 best practices.
Styling techniques using CSS Flexbox and Grid for responsive layouts.
Adding interactivity using JavaScript, such as a working navigation menu, image slider, and dynamic menu filtering.
Basics of website performance optimization and accessibility.
🛠️ How I Built the Project
The project was built in three main phases:
- Planning and Wireframing
Drafted layout on paper based on common sections in café websites (Home, About, Menu, Gallery, Contact).
Identified required assets like coffee images, icons, and fonts.
- HTML Structure
Created the page sections:
header with navigation bar
hero section with call-to-action
about section with shop story
menu section listing categories (Hot, Cold, Snacks)
gallery with featured images
contact section with form
footer
- Styling with CSS
Used CSS variables for consistent theming.
Applied Flexbox and Grid to make it responsive on mobile, tablet, and desktop.
Included hover animations, smooth scrolling, and transitions.
:root { --primary-color: #6f4e37; --accent-color: #d9b382; }
- Interactivity with JavaScript
Toggle navigation bar on small screens.
Menu category filter (e.g., filter by "Hot" or "Snacks").
Smooth scroll behavior and scroll-to-top button.
const filterMenu = (category) => { document.querySelectorAll('.menu-item').forEach(item => { item.style.display = item.dataset.category === category || category === 'all' ? 'block' : 'none'; }); };
🧗 Challenges I Faced
Making the design fully responsive on all screen sizes required several iterations and media queries.
Designing an intuitive menu filtering system in JavaScript took some time to plan and test.
Image optimization without sacrificing quality was essential for performance.
🧠 Bonus: Math of Pricing
For fun, I even explored how pricing can be adjusted dynamically with tax using JavaScript:
// Add 18% GST function calculateTotal(price) { return price + price * 0.18; } // Example: console.log(calculateTotal(200)); // ₹236
Using LaTeX for GST formula:
\text{Total Price} = P + (P \times \frac{18}{100}) = P \left(1 + \frac{18}{100}\right)
Conclusion
This coffee shop website project helped me grow as a developer by putting my design and programming skills to the test. It’s a great showcase project to demonstrate my HTML, CSS, and JavaScript capabilities to potential employers or clients.
“A cup of code with a shot of creativity!”
Log in or sign up for Devpost to join the conversation.