The Golden Rule: Ship Something
By the end of your workshop, members should have:
- ✅ A working project (even if basic)
- ✅ Something to add to their portfolio
- ✅ Confidence to extend it further
- ✅ Clear next steps
Bad Workshop: “Introduction to React Hooks” (theoretical, nothing shipped)
Good Workshop: “Build a Weather App with React Hooks” (practical, deployed app)
Example Workshop Structure (120 Minutes)
Template Structure:
0-10 mins: Setup & Goals
- What we’re building (show the end result)
- Why it matters (real-world use case)
- Tools/tech we’ll use
- What they’ll walk away with
10-90 mins: Build Together
- Code/design live (screen share)
- They follow along, building in real-time
- Pause every 15-20 mins for questions
- Share code/files in chat as you go
- Celebrate small wins (“Look, it works!”)
90-110 mins: Deploy/Finish
- Get it live (Vercel, Netlify, wherever)
- Test it together
- Quick styling/polish
- Everyone shares their deployed link
110-120 mins: Wrap & Next Steps
- Showcase standout projects
- Give extension ideas (“Try adding X feature”)
- Answer final questions
- Point to resources (code repo, docs)
- Encourage: Share on social, add to portfolio
Example Workshop Topics
Best Workshop Topics:
- “Build X in 2 Hours” – Specific, shippable project d
- Real-world applications – Things they’ll actually use
- Portfolio-worthy – Something to showcase
- Beginner to intermediate – Accessible but not trivial
- Multiple skill levels – Basic version + advanced extensions
Examples:
- “Build & Deploy a Portfolio Site”
- “Create a Task Manager with React”
- “Design a Mobile App in Figma”
- “Build a REST API with Node.js”
- “Landing Page with Tailwind”
- “Chrome Extension in 2 Hours”
Avoid:
❌ “Introduction to…” (too theoretical)
❌ “Advanced…” (too niche, scares beginners)
❌ Workshops with no tangible output
❌ Topics requiring extensive setup
Teaching Best Practices
1. Code/Build Live (Don’t Use Pre-Made)
- Start from scratch
- Show your thinking process
- Make mistakes (and fix them)
- Members see how real building works
2. Keep It Practical
- “Here’s how I use this in real projects”
- Share shortcuts, tools, tips
- Skip unnecessary theory
- Focus on doing, not explaining
3. Encourage Engagement
- “Drop your deployed link in chat”
- “Anyone stuck? Tell me where”
- “Who’s tried this before?”
- Make it conversational, not lecture
4. Celebrate Progress
- “Nice! Sarah just deployed hers”
- “Look at how creative Mark’s version is”
- “You all just built something real”
- Positive reinforcement matters
5. Provide Resources
- Code repository (GitHub)
- Links to docs, tools
- Extension ideas
- “Where to learn more”
Live Workshop Checklist
1 Week Before:
- Topic confirmed with the Learnable team
- Workshop scheduled & promoted to members
- You’ve tested the project (built it once yourself)
- Resources prepared (starter files, links, etc.)
1 Day Before:
- Tech check (mic, camera, screen share)
- Final code repo ready
- Slides/outline prepared (if using)
- Reminder sent to registered members
During Workshop:
- Record the session (we handle this)
- Share links/resources in chat as you go
- Pause for questions regularly
- Encourage members to share their progress
After Workshop:
- Share final code repo
- Post recording to library (we handle)
- Create Discord thread for questions
- Highlight standout member projects
Workshop Ideas Bank
Development:
- Todo App with Local Storage
- Weather Dashboard (API integration)
- Portfolio Site (HTML/CSS or React)
- Chrome Extension (productivity tool)
- REST API (Node.js + Express)
- Real-time Chat (Socket.io)
- Landing Page (Tailwind CSS)
Design:
- Mobile App Design (Figma)
- Design System Basics
- Landing Page Design
- Icon Set Creation
- User Flow Mapping
- Portfolio Case Study
Marketing/Growth:
- SEO Audit & Optimization
- Landing Page Copywriting
- Social Media Strategy
- Email Campaign Setup
- Content Calendar Planning
No-Code:
- Automation with Zapier
- Website with Webflow
- App with Bubble
- Dashboard with Airtable
- Landing Page with Carrd