Hey Devs 👋,
I recently built a simple Recipe Listing Website as a personal learning project — and I’d love to share how I did it, what I learned, and what’s next!
Home Page Desktopview
Home Page Mobileview
📌 The Idea
I wanted to practice my HTML, CSS, and basic JavaScript skills by building something practical — so I picked a recipe website where I could:
*Show a clean grid of recipes.
*Keep it responsive and simple.
*Deploy it for free for anyone to see.
⚙️ The Tech Stack
HTML & CSS: For structure and styling.
JavaScript: Basic interactivity (optional for now).
Netlify: For free hosting with continuous deployment.
GitHub: For version control & repo hosting.
🗂️ Features
Here’s what the website does right now:
Displays recipes in a simple card layout.
Fully responsive for desktop and mobile.
Clean, minimal design.
Hosted live on Netlify — no backend needed!
🔗 Check it Out!
Live Website: https://recipe-listing-web.netlify.app/
GitHub Repo: https://github.com/karkeraprakyath/Recipe-website
✨ What I Learned
This project helped me understand:
✅ How to structure a static website.
✅ How to use CSS Grid/Flexbox for responsive cards.
✅ How to deploy easily with Netlify and connect it with GitHub.
✅ How to plan simple features for real users.
🚀 What’s Next
While the website works well as a static site, I plan to:
Add search & filter functionality.
Link each card to a single recipe detail page.
Integrate a headless CMS so I don’t have to hard-code recipes.
Maybe rebuild it with React or Next.js for dynamic rendering.
💡 Final Thoughts
If you’re learning web dev, I highly recommend building a small static site and deploying it.
It’s the best way to learn version control, hosting, and real-world structure — much more fun than just tutorials!
🙌 Feedback Welcome!
I’d love to hear your thoughts and suggestions.
👉 What would you add or build next? Drop a comment!
Thanks for reading!
Feel free to connect with me on www.linkedin.com/in/prakyathkarkera and check out my other projects.
Top comments (0)