The Desi Kitchen | Web Design Project

Project Links:

• Live Website: https://theavsingh.github.io/The-Desi-Kitchen-WebDesign-Project/
• GitHub Repository: https://github.com/theavsingh/The-Desi-Kitchen-WebDesign-Project

Author: Aditya Vikram Singh Enrolment No.: SAU/FET/DBM(CSE)/2025/008 Programme: Dual Degree B.Tech+M.Tech (CSE) Course: CS106 - Fundamentals of Web Design University: South Asian University Project Date: March 31, 2026

1. Project Overview

"The Desi Kitchen" is a multi-page culinary platform focused on authentic Indian vegetarian cuisine. The project emphasizes high-quality user experience, featuring realistic slow-cooking times, categorized navigation, and a modern, vibrant aesthetic designed for the home cook.

2. Technical Implementation & CSS Mastery

This project demonstrates proficiency in core web design competencies through the following implementations:

• Semantic HTML5: - Uses tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to maintain high accessibility and SEO standards.
• Layout Systems:
  • CSS Grid: Implemented in the "Recipe Box" to create a responsive multi-column grid using auto-fill and minmax logic.
  • Flexbox: Utilized for the navigation menu, header structure, and form button alignment to ensure precise spacing.
• Advanced Navigation & Selectors:
  • Smooth Scrolling: Integrated via scroll-behavior: smooth for "Jump-to-Section" functionality.
  • Interactive States: Uses :hover, transition, and box-shadow to create tactile, "Neobrutalist" button effects.
  • Page Marking: Employs a .current-page-link class to provide visual feedback for active pages and categories.
• Responsive Design: - Employs custom @media queries at the 768px breakpoint to handle the transition from desktop to a single-column mobile viewport.

3. Site Architecture

1. Home (index.html): - Features a categorized biography of the site and two distinct recipe grids: desi-authentic-cuisine and dessert-delights.
2. Recipe Archive: - Includes eight detailed technical pages: Paneer Butter Masala, Dal Makhani, Chole Bhature, Rajma Chawal, Palak Paneer, Aloo Gobhi, Gulab Jamun, and Gajar Halwa.
3. Contact (contact.html): - A dedicated page providing contact data and an interactive HTML form with custom focus states and styled submit/reset inputs.

4. Submission Directory Structure

• Root: index.html, contact.html, and 8 recipe .html files.
• /css/: styles.css (Master stylesheet).
• /images/: Contains all high-resolution recipe main images and thumbnails.
• /images/footer/: Contains contact and social media icons.

5. Rules & Compliance

• No JavaScript: - This project is built 100% using only HTML and CSS[cite: 69].
• Original Code: - All code was written manually without the use of external templates[cite: 70, 72].

6. Design Philosophy

The visual identity of "The Desi Kitchen" is inspired by the Toing brand aesthetic, strategically adapted to align with a modern culinary atmosphere.

• Color Palette:
  • Primary Green (#007D32): Selected to represent health, organic freshness, and the project's "100% Pure Veg" commitment.
  • Accent Pink (#FF4CC5): Provides a vibrant, high-contrast flair that gives the UI a contemporary edge.
  • Warm Background (#fffaf0): A soft yellowish hue utilized to create a welcoming, "home-kitchen" feel.
• UI/UX Elements:
  • Border Radii: Features large 30px rounded corners on recipe cards to evoke a soft, user-friendly appearance.
  • Shadow Logic: Employs deep offset box-shadows to provide a "Neobrutalist" tactile feel, ensuring that interactive elements are visually distinct and professional.

7. License

This project is licensed under the MIT License - see the LICENSE file for details.