1.5: Your Development Environment

1. Text Editor: Visual Studio Code

Why VS Code?

Visual Studio Code (VS Code) is the most popular code editor for web development.

Advantages:

• ✅ Free and open-source
• ✅ Lightweight but powerful
• ✅ Excellent extension ecosystem
• ✅ Built-in Git support
• ✅ IntelliSense (autocomplete)
• ✅ Integrated terminal
• ✅ Cross-platform (Windows, macOS, Linux)

Installation

Download: Visit https://code.visualstudio.com/

Installation Steps:

1. Download for your OS
2. Run the installer
3. Follow the installation wizard
4. Launch VS Code

First Launch:

• Select color theme (Dark+ recommended)
• Install recommended extensions (we'll cover this)

2. Project File Structure

Organizing Your Files

Good Project Structure:

my-website/
├── index.html
├── about.html
├── contact.html
├── css/
│   ├── style.css
│   └── responsive.css
├── js/
│   ├── main.js
│   └── utils.js
├── images/
│   ├── logo.png
│   ├── hero.jpg
│   └── icons/
│       ├── facebook.svg
│       └── twitter.svg
├── fonts/
│   └── custom-font.woff2
└── README.md

Folder Conventions:

• HTML files - Root directory
• css/ - All stylesheets
• js/ - All JavaScript files
• images/ - All images (jpg, png, svg, etc.)
• fonts/ - Custom fonts
• assets/ - Alternative to separate folders

File Naming Conventions

Best Practices:

✅ Good:
index.html
about-us.html
main.css
script.js
hero-image.jpg

❌ Bad:
Index.HTML  (inconsistent capitalization)
about us.html  (spaces)
Main CSS.css  (spaces, mixed case)
1-script.js  (starts with number)

Rules:

• Use lowercase
• Use hyphens for spaces (kebab-case)
• Be descriptive but concise
• Use appropriate file extensions

3. Local Development Server

Why Use a Development Server?

Problems without server:

❌ CORS errors when loading files
❌ Relative paths may not work
❌ Can't test AJAX requests
❌ No auto-reload on changes

With development server:

✅ Proper HTTP protocol
✅ Relative paths work correctly
✅ Can test APIs and AJAX
✅ Live reload on file changes

Option 1: VS Code Live Server (Recommended)

Setup:

1. Install "Live Server" extension
2. Open project folder in VS Code
3. Right-click index.html → "Open with Live Server"
4. Browser opens at http://localhost:5500

Features:

• Auto-refresh on save
• Works with HTML, CSS, JS
• Mobile device testing (via IP)

Option 2: Python HTTP Server

If you have Python installed:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Open: http://localhost:8000

Option 3: Node.js http-server

If you have Node.js:

# Install globally
npm install -g http-server

# Run in project directory
http-server -p 8080

Open: http://localhost:8080

5. Version Control: Git Basics

What is Git?

Git is a version control system that tracks changes to your code.

Benefits:

• 📸 Snapshots of code at different points
• 🔄 Undo changes easily
• 🌿 Branches for experimentation
• 👥 Collaboration with teams
• ☁️ Backup to GitHub/GitLab

Installing Git

Download: https://git-scm.com/

Verify Installation:

git --version

Basic Git Configuration

Set your identity:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Check configuration:

git config --list

Essential Git Commands

Initialize repository:

git init

Check status:

git status

Stage files:

git add index.html
git add .  # Add all files

Commit changes:

git commit -m "Add homepage"

View history:

git log
git log --oneline  # Compact view

Basic Git Workflow

1. Make changes to files
         ↓
2. git add .  (stage changes)
         ↓
3. git commit -m "Description"  (save snapshot)
         ↓
4. Repeat

VS Code Git Integration

Built-in Git Features:

• Source Control panel (Ctrl+Shift+G)
• Visual diff viewer
• Commit UI
• Branch management
• Merge conflict resolution

Usage:

1. Click Source Control icon
2. Stage changes (+ icon)
3. Write commit message
4. Click ✓ to commit

6. Browser Setup for Development

Recommended Browser

Chrome or Firefox (both have excellent DevTools)

Install Both:

• Chrome for primary development
• Edge for cross-browser testing

Browser Extensions

For Chrome/Edge:

1. Vue Devtools - Debug Vue apps (later in course)
2. JSON Viewer - Format JSON responses
3. ColorZilla - Pick colors from webpages
4. Wappalyzer - Detect technologies used

Browser DevTools Settings

Chrome DevTools:

1. F12 to open
2. Settings (⚙️ icon)
3. Useful settings:
   • Disable cache (while DevTools open)
   • Auto-open DevTools for popups
   • Enable source maps

7. Workspace Organization

Folder Structure

Organize by projects:

Documents/
└── web-development/
    ├── projects/
    │   ├── portfolio/
    │   ├── blog/
    │   └── e-commerce/
    ├── practice/
    │   ├── html-exercises/
    │   ├── css-layouts/
    │   └── js-challenges/
    └── resources/
        ├── cheatsheets/
        ├── templates/
        └── assets/

Productivity Tips

1. Use Workspaces in VS Code

• File → Save Workspace As
• Saves open folders and settings
• Quick switch between projects

2. Emmet Shortcuts

! → Full HTML5 template
ul>li*5 → <ul> with 5 <li> items
.container>h1+p → <div class="container"><h1></h1><p></p></div>

3. Snippets Create custom code snippets:

• File → Preferences → User Snippets

4. Multi-file Search

• Ctrl+Shift+F - Search across all files
• Useful for finding/replacing in large projects

8. Practical Exercises

Exercise 1.5.1: VS Code Setup

1. Install VS Code
2. Install these extensions:
   • Live Server
   • Prettier
   • Auto Rename Tag
   • Color Highlight
3. Configure auto-format on save
4. Test each extension

Exercise 1.5.2: Create Project Structure

Create this folder structure:

practice-website/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── (add any image)

Add content to each file and test with Live Server.

Exercise 1.5.3: Git Practice

# 1. Initialize repository
git init

# 2. Create a file
echo "<h1>My Project</h1>" > index.html

# 3. Stage and commit
git add index.html
git commit -m "Initial commit"

# 4. Make changes
echo "<p>New paragraph</p>" >> index.html

# 5. View changes
git status
git diff

# 6. Commit changes
git add index.html
git commit -m "Add paragraph"

# 7. View history
git log --oneline

Exercise 1.5.4: Development Workflow

1. Create a simple webpage
2. Open with Live Server
3. Make changes and save
4. Watch browser auto-reload
5. Commit changes with Git
6. Test in different browsers

9. Knowledge Check

Question 1: What's the keyboard shortcut to open the Command Palette in VS Code?

Question 2: Which VS Code extension provides a local development server with auto-reload?

Question 3: What Git command stages files for commit?

Question 4: What's the purpose of the .gitignore file?

Question 5: Why is it better to use a local development server instead of opening HTML files directly?

10. Troubleshooting Common Issues

VS Code Issues

Problem: Extensions not working

• Solution: Reload window (Ctrl+Shift+P → "Reload Window")
• Or restart VS Code

Problem: Terminal not opening

• Solution: Check default terminal in settings
• Try Ctrl+Shift+ ` to force open

Problem: IntelliSense not working

• Solution: Install language extensions
• Check settings: "editor.quickSuggestions": { "other": true }

Live Server Issues

Problem: Can't start Live Server

• Solution: Make sure HTML file is open
• Right-click the file, not the editor

Problem: Changes not reflecting

• Solution: Hard refresh browser (Ctrl+Shift+R)
• Check if file is saved (Ctrl+S)

Git Issues

Problem: "Git is not recognized" error

• Solution: Install Git and restart terminal
• Add Git to system PATH

Problem: Merge conflicts

• Solution: Use VS Code's visual merge conflict resolver
• Or manually edit conflict markers

11. Key Takeaways

✅ VS Code is the most popular and powerful code editor for web development ✅ Essential extensions (Live Server, Prettier, ESLint) enhance productivity ✅ Proper file structure keeps projects organized and maintainable ✅ Local development server is crucial for proper testing ✅ Git provides version control and collaboration capabilities ✅ Keyboard shortcuts significantly speed up development ✅ Browser DevTools are essential for debugging ✅ Organized workspace improves efficiency and focus

12. Further Resources

VS Code:

• Official Documentation
• Keyboard Shortcuts PDF
• Extension Marketplace

Git:

• Git Documentation
• GitHub Git Cheat Sheet
• Learn Git Branching - Interactive tutorial

Tools:

• Can I Use - Browser support tables
• MDN Web Docs - Web technology reference

Next Steps

Congratulations! Your development environment is now set up and ready to go.

In Lesson 1.6: Introduction to Web Technologies, you'll get hands-on with HTML, CSS, and JavaScript, and build your first complete webpage!