Back to Community Projects
Course Overview
Learn to build beautiful, functional websites using AI-powered design tools and modern deployment platforms. No prior coding experience required—just bring your creativity and ideas!
Target Audience: Teens and adults, beginners to intermediate
Tools Required: Computer with internet access, email address (for accounts)
1
Welcome to Vibe Coding
What is vibe coding and setting up your creative workspace
Learning Objectives
- Understand what "vibe coding" means (AI-assisted, intuitive web development)
- Create accounts for v0.dev and Vercel
- Learn the basics of prompting AI for design
Session Outline
Introduction (20 min)
What is vibe coding? Creative expression meets AI assistance. Real-world examples of projects built with v0. Overview of the tools: v0 (design), Vercel (hosting).
What is vibe coding? Creative expression meets AI assistance. Real-world examples of projects built with v0. Overview of the tools: v0 (design), Vercel (hosting).
Hands-On Setup (40 min)
Create v0.dev and Vercel accounts. Connect to GitHub. Tour of the v0 interface. Understanding components vs. full pages.
Create v0.dev and Vercel accounts. Connect to GitHub. Tour of the v0 interface. Understanding components vs. full pages.
First Creation (45 min)
Prompt exercise: "Create a personal landing page with [your interests]". Iterate on the design with follow-up prompts.
Prompt exercise: "Create a personal landing page with [your interests]". Iterate on the design with follow-up prompts.
Wrap-Up (15 min)
Share creations. Assignment: Brainstorm 3 website ideas you'd like to build.
Share creations. Assignment: Brainstorm 3 website ideas you'd like to build.
2
Mastering the Art of Prompting
How to communicate your vision to AI
Learning Objectives
- Write effective prompts for desired outcomes
- Iterate and refine designs
- Understand basic UI/UX principles
3
Building Interactive Components
Adding functionality and user interaction
4
Deploying Your First Site
Taking your creation live on the internet
5
Advanced Vibes & Integrations
Taking it to the next level
6
Community Showcase & Next Steps
Celebration and continuing your journey
Teaching Tips
- Celebrate mistakes as learning opportunities
- Keep the energy high—this should feel like creative play
- Encourage students to think big and iterate small
- Show, don't just tell—live demo frequently
- Create a supportive community where everyone shares