First Lesson: Development Environment Setup 📋 Today's Session Plan We're doing this TOGETHER in our first lesson:
Install Visual Studio Code - Your coding workspace
Setup Git & GitHub - Your developer portfolio
Get Chrome & Developer Tools - Web development essentials
Download Course Materials - Our learning content
Test Everything Works - Ready to start coding!
🛠️ Step 1: Install Visual Studio Code (Right Now) Let's Download Together: Go to code.visualstudio.com
Click "Download for Windows" (or Mac if you have Mac)
Run the installer when it downloads
We'll select these options together:
✅ "Add to PATH" (important!)
✅ "Register as supported file types"
✅ "Add to context menu"
✅ "Create Desktop icon"
Essential Extensions (We'll Install These Now): Open VS Code (freshly installed)
Click the Extensions icon (4 squares) on left sidebar
We'll search and install these together:
Live Server (by Ritwick Dey) - Live website preview
Prettier (by Prettier) - Auto-format code
Auto Rename Tag (by Jun Han) - HTML helper
GitLens (by GitKraken) - See code history
🌐 Step 2: Setup Chrome & Developer Tools Install Chrome (If Needed): Go to google.com/chrome
Download and install
We'll test Developer Tools together:
Right-click → "Inspect"
Press F12 to see magic!
📚 Step 3: Create Your GitHub Account Let's Sign Up Together: Visit github.com/signup
We'll choose your developer identity:
Professional username
Your main email
Free plan (perfect for learning)
Install Git on Your Machine: Windows Users:
Go to git-scm.com
Download and run installer
We'll use default settings together
Mac Users:
bash xcode-select --install We'll run this command together
Configure Git (One-Time Setup): We'll open Git Bash (Windows) or Terminal (Mac) and run:
bash git config --global user.name "Your Real Name" git config --global user.email "your-email@example.com" 📥 Step 4: Get Our Course Materials We'll Download Together: Go to: https://github.com/Jojobeans1981/Web-Dev-Intro
Click green "Code" button
Select "Download ZIP"
We'll extract to your Desktop together
OR We Can Clone (If You're Feeling Brave):
bash cd Desktop git clone https://github.com/Jojobeans1981/Web-Dev-Intro.git I'll guide you through this
🎯 Step 5: Test Everything Together Test 1: VS Code & Live Server We'll open VS Code together
Open the Web-Dev-Intro folder
Find lesson-guides/week1-html-foundations.html
Right-click → "Open with Live Server"
Watch your first webpage come alive!
Test 2: Git Verification We'll open Git Bash/Terminal together
Run: git status
Celebrate when it works! 🎉
⚡ Essential Shortcuts We'll Practice VS Code (We'll Try These): Ctrl + S / Cmd + S - Save file
Ctrl + / / Cmd + / - Comment code
F12 - Open browser developer tools
🆘 Common Issues We'll Solve Together If anything fails - NO WORRIES! This is normal:
Git not installing? We'll troubleshoot
VS Code extensions not working? We'll fix it
Files not opening? We'll solve it together
Confused by terminals? I'll guide you
🎉 What Happens When We're Set Up Immediate Win: We'll build your first website TODAY!
Create a simple "Hello World" page
See it live in your browser
Make real-time changes
Experience the developer workflow
Today's Goal: Leave this session with:
✅ Professional development environment
✅ GitHub portfolio started
✅ First webpage built
✅ Confidence to practice between sessions
📝 What We're Building Today Before we finish this lesson, you'll have:
A functioning development environment
Your first HTML file created
Live Server running your website
Basic understanding of the workflow
Excitement for next session!