AI Studio Workshop || Build Real Projects with AI || Sundarbans House

🤖 AI Studio Workshop | Build Real Projects with AI (Hands-On Session)

Presented by Sundarbans House Technical Community

This AI Studio Workshop is a 1-hour practical, hands-on session focused on helping students build real, usable projects quickly using AI.
The goal is simple: turn ideas into working apps, websites, and portfolio-ready outputs — even if you’re a beginner.

📅 Date: 12 December (Friday)
🕗 Time: 8:00 PM – 9:00 PM

🚀 What This Session Focuses On

This workshop emphasizes practical skills over theory.
You’ll learn how to use AI effectively for coding, design, documentation, and project presentation.

🛠️ What We Did in This Workshop

✔ Generated a simple working web app using AI-generated code
✔ Learned how to run, understand, and modify AI output
✔ Created a clean one-page website using Google Sites
✔ Built diagrams, project documentation, and summaries with AI
✔ Learned shortcuts to convert ideas into polished academic & portfolio projects
✔ Understood structured prompting for consistent, high-quality results
✔ Explored project ideas students can complete in a single evening

🎯 By the End of This Session, You’ll Know How To

✅ Build small apps and websites even as a beginner
✅ Present projects professionally using Google Sites
✅ Use AI tools for coding, research, and content creation
✅ Speed up assignments, reports, and project development
✅ Build confidence in AI-assisted workflows

🧠 AI PROMPT USED IN THE WORKSHOP (For Practice)

You can reuse the exact prompt below to practice after the session:

Role:
You are an expert Frontend Web Developer and UI/UX Designer.

Task:
Write a single HTML file (containing embedded CSS and JavaScript) for a modern “Movie Recommendation Engine” website.

1️⃣ Visual Design & Theme

Color Palette: Deep Blue and White
Atmosphere: Use Bold neon lighting effects (glows) on borders and buttons
Background: Create a Subtle, smooth liquid animation (CSS keyframes or canvas blob) in the background
Typography: Use a Bold, punchy sans-serif font for headers

2️⃣ Layout & Structure

Sidebar (Left Panel – A Fixed panel containing filters for): Genre (Action, Sci-Fi, Drama, etc.)
Timeline (Decades: 2020s, 2010s, 2000s)
Rating (1–5 stars)
Language
Actor/Actress search input
Main Grid: A Responsive grid displaying movies 3 in a row

3️⃣ Movie Card Features

Each card must have a smooth entry animation (fade-in/slide-up).

Card Content: Movie Title, Poster (use a placeholder URL), small description, "Cast" list, Internet Rating, and a "View More" button.

Hover Effect: The card should glow or scale up smoothly when hovered.

4️⃣ Data & Functionality

Create a dummy JavaScript database (array of objects) with at least 15 unique movies covering different genres and decades.

Implement real-time filtering: When I change a filter in the sidebar, the movie grid should instantly update with a smooth transition.

Add a "Load More" button at the bottom that reveals more movies if available.

👥 Who Should Watch This?

Students (any discipline)
Beginners in AI, coding, or web development
IITM BS Degree learners
Anyone building projects for portfolios
Learners who want to move faster with AI

🏛 Organised By:
Sundarbans House Technical Community
IIT Madras BS Degree Program

👍 Like the video
💬 Comment your questions
🔔 Subscribe for more hands-on AI & tech workshops

🔍 SEO Optimized Tags

#aistudioworkshop, #aiforstudents, #buildprojectswithai, #aihandsonsession, #aiwebapptutorial, #frontenddevelopmentwithai, #aipromptengineering, #htmlcssjavascriptai, #aiportfolioprojects, #googlesiteswebsitetutorial, #beginneraiprojects, #generativeaiworkshop, #aitoolsforassignments, #sundarbanshousetechnicalcommunity, #iitmbs, #aicodingworkshoplive #sundarbanshouse #ai #aistudio