diff --git a/src/modules/wds/course/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/course/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md new file mode 100644 index 00000000..2ce07040 --- /dev/null +++ b/src/modules/wds/course/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md @@ -0,0 +1,268 @@ +# YouTube Show Notes: Module 02 - Installation & Setup + +**Video Link:** +[To be published] + +**Title:** +Module 02: Installation & Setup - From Zero to WDS-Ready in Under an Hour + +--- + +## Description + +"I've never used GitHub. I've never installed an IDE. I'm worried I'll mess something up." + +Sound familiar? You're not alone. Every designer was once exactly where you are now. + +In this 30-minute guided walkthrough, we take you from complete beginner to fully set up with Whiteport Design Studio - even if you've never touched GitHub, Git, or an IDE before. + +You'll learn: +✅ How to create a GitHub account and repository (it's easier than you think!) +✅ Installing your IDE workspace (Cursor or VS Code) +✅ Cloning your project to your computer +✅ Adding WDS to your workspace +✅ Meeting Mimir - your personal WDS guide + +This isn't about becoming technical. This is about getting your professional environment set up so you can focus on what matters: designing with confidence. + +**Total setup time:** 45-60 minutes +**Prerequisites:** Computer + Internet + Email +**Technical experience required:** None + +--- + +## Timestamps + +0:00 - Introduction: You Can Do This +3:00 - Lesson 01: Git Setup - GitHub Account & Repository +11:00 - Lesson 02: IDE Installation - Your Workspace +17:00 - Lesson 03: Git Repository Cloning - Getting Your Project +22:00 - Lesson 04: WDS Project Initialization - The Magic Happens +28:00 - Celebration: Look What You Just Did! + +--- + +## Key Concepts + +🔹 **GitHub** - Professional cloud storage with time machine (version history) + +🔹 **Repository (Repo)** - A tracked folder where your project lives + +🔹 **IDE (Integrated Development Environment)** - Your workspace for creating specifications + +🔹 **Git** - The sync engine (auto-installed by your IDE) + +🔹 **Cloning** - Making a local copy of your GitHub repository + +🔹 **Workspace** - Having both your project AND WDS side-by-side + +🔹 **Docs Folder** - Your 8-phase design source of truth + +🔹 **Mimir** - Your WDS orchestrator and guide (@wds-mimir anytime!) + +--- + +## The 4 Lessons + +### Lesson 01: Git Setup (15-20 min) +- Create GitHub account with professional username +- Understand repository structure +- Single repo vs separate specs repo decision +- Create your first repository +- Or join an existing project + +### Lesson 02: IDE Installation (10 min) +- Choose Cursor (recommended) or VS Code +- Download and install +- First launch setup +- Sign in with GitHub +- Verify terminal works + +### Lesson 03: Git Repository Cloning (10 min) +- Create organized Projects folder +- Get repository URL from GitHub +- Clone with simple terminal command +- Let IDE auto-install Git +- Open project in workspace + +### Lesson 04: WDS Project Initialization (15-20 min) +- Clone WDS repository +- Add WDS to workspace (dual folder setup) +- Create 8-phase docs structure +- Find and activate Mimir +- First conversation with your guide + +--- + +## Repository Structure Decision + +**Single Repository** (`my-project`) +- Specs + code together +- Use when: Small team, building yourself, simple communication + +**Separate Specifications Repository** (`my-project-specs`) +- Specs only, separate code repo +- Use when: Corporate, many developers, clear handoff needed + +**Name your repository based on your choice!** + +--- + +## The Docs Structure + +Your 8-phase WDS methodology folders: + +📁 **1-project-brief** - Vision and strategy +📁 **2-trigger-mapping** - User psychology and decisions +📁 **3-prd-platform** - Product requirements +📁 **4-ux-design** - User experience design +📁 **5-design-system** - Visual language and components +📁 **6-design-deliveries** - Handoff specifications +📁 **7-testing** - Validation and iteration +📁 **8-ongoing-development** - Evolution and support + +--- + +## Resources + +🎓 **WDS Course:** Module 02 - Installation & Setup +https://github.com/whiteport-collective/whiteport-design-studio + +📝 **Lesson 01 Checklist:** Git Setup Quick Reference +[Link to lesson-01-git-setup/01-quick-checklist.md] + +📝 **Lesson 02 Checklist:** IDE Installation Quick Reference +[Link to lesson-02-ide-installation/02-quick-checklist.md] + +📝 **Lesson 03 Checklist:** Repository Cloning Quick Reference +[Link to lesson-03-git-cloning/03-quick-checklist.md] + +📝 **Lesson 04 Checklist:** WDS Initialization Quick Reference +[Link to lesson-04-wds-initialization/04-quick-checklist.md] + +📥 **Download Cursor:** https://cursor.sh +📥 **Download VS Code:** https://code.visualstudio.com +📥 **GitHub:** https://github.com + +💬 **WDS Community:** [Discord invite link] +📖 **GitHub Discussions:** Ask questions, share your setup +https://github.com/whiteport-collective/whiteport-design-studio/discussions + +--- + +## Common Questions + +**Q: Do I need to know how to code?** +A: No! You're setting up a workspace, not learning to code. + +**Q: What if I make a mistake?** +A: GitHub is your time machine - you can always go back. And Mimir is always available to help. + +**Q: Do I need to manually install Git?** +A: Nope! Modern IDEs auto-install Git when you need it. + +**Q: Can I use VS Code instead of Cursor?** +A: Absolutely! Both work great. Cursor is optimized for AI work, but VS Code is excellent too. + +**Q: What if I get stuck?** +A: Type `@wds-mimir [your question]` in your AI chat. He's always there to help. + +**Q: Single repo or separate specs repo?** +A: Most beginners should use single repo. It's simpler and you can always split later. + +--- + +## Next Steps + +1. ✅ Complete the 4-lesson setup (follow along with this video!) +2. ✅ Activate Mimir and have your first conversation +3. ✅ Check your setup is complete +4. ✅ Start Module 03: Create Project Brief +5. ✅ Join the WDS community + +--- + +## The Power of Belief + +**"You can do this. I believe in you."** - Mimir + +This isn't empty encouragement. It's based on truth: + +- You just proved you can learn technical tools +- You just set up a professional development environment +- You just organized a complete methodology workspace +- If you can do this, you can master WDS + +**You're not a beginner anymore. You're a designer with a professional setup.** + +--- + +## About Module 02 + +**Target Audience:** Complete beginners to GitHub/Git/IDEs +**Time Required:** 45-60 minutes total +**Difficulty:** Beginner (everything explained simply) +**Format:** Dual learning paths (quick checklists + full lessons) + +**What You'll Have After:** +- ✅ GitHub account and repository +- ✅ Professional IDE installed +- ✅ Project cloned locally +- ✅ WDS integrated in workspace +- ✅ 8-phase docs structure created +- ✅ Mimir activated and ready + +--- + +## About Whiteport Design Studio (WDS) + +Whiteport Design Studio is a comprehensive methodology that transforms designers from tool users into indispensable linchpins - the person who walks into chaos and creates order. + +WDS isn't about learning new design tools. It's about becoming the strategic mind that connects business goals, user psychology, and technical constraints into coherent, implementable specifications. + +**In the AI era, this is your superpower.** + +--- + +## About Mimir + +Mimir is your WDS orchestrator - a wise advisor who: +- Assesses your skill level and adapts to you +- Checks your environment and guides setup +- Answers questions with patience and wisdom +- Connects you with specialist agents when needed +- Provides encouragement and support + +**Invoke him anytime:** `@wds-mimir [your question]` + +He's named after the Norse god of wisdom and knowledge - the advisor who sees patterns others miss. That's exactly what he does for you. + +--- + +## Credits + +**Methodology:** Whiteport Design Studio +**Training Course:** From Designer to Linchpin +**Orchestrator:** Mimir (WDS Guide) +**Community:** BMad Method + Whiteport Collective + +--- + +## Tags + +#WebDesign #DesignSystem #GitHub #GitSetup #IDESetup #Cursor #VSCode #DesignerTools #WDS #WhiteportDesignStudio #DesignMethodology #BeginnerFriendly #TutorialSeries #DesignWorkflow #ProfessionalSetup #Mimir #DesignCourse #LearnDesign #GitHubForDesigners #DesignSpecifications + +--- + +## Comments Pinned + +**First time setting up GitHub?** Drop a comment below! We're here to help. Every expert was once exactly where you are now. You've got this! 🌊 + +**Just completed setup?** Celebrate with us! What was the most surprising part? What felt easier than you expected? + +**Stuck on something?** Describe your issue and we'll help troubleshoot. Remember: `@wds-mimir` is also always available in your IDE! + +--- + +**Ready to start? Let's get you set up! Press play and follow along. ▶️** +