Installation and Setup Fundamentals

Setting up a proper development environment is crucial for efficient web development. This lesson will guide you through installing and configuring all the essential tools you'll need throughout this course.

Development Environment Overview

Your development environment consists of several key components:

• Code Editor: Where you'll write your code
• Web Browser: For testing and debugging your applications
• Node.js & npm: JavaScript runtime and package manager
• Git: Version control system
• Terminal/Command Line: For running commands and tools

1. Code Editor: Visual Studio Code

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

Installation

1. Go to code.visualstudio.com
2. Download the version for your operating system
3. Run the installer and follow the setup wizard
4. Launch VS Code to confirm installation

Essential Extensions

Install these extensions for web development:

• Auto Rename Tag: Automatically rename paired HTML tags
• Bracket Pair Colorizer: Color-code matching brackets
• ES7+ React/Redux/React-Native snippets: Code snippets for React
• GitLens: Enhanced Git capabilities
• Live Server: Launch development server with live reload
• Prettier: Code formatter
• Thunder Client: API testing tool

Configuration

Set up VS Code preferences:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.autoSave": "afterDelay",
  "explorer.confirmDelete": false
}

2. Web Browser Setup

Primary Browser: Chrome or Firefox

Use Chrome or Firefox for development as they have excellent developer tools.

Developer Tools

Learn to access developer tools:

• Chrome: F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
• Firefox: F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)

Browser Extensions for Development

• React Developer Tools: For React debugging
• Vue.js devtools: For Vue.js debugging (if you explore Vue later)
• Lighthouse: For performance auditing

3. Node.js and npm

Node.js allows you to run JavaScript outside the browser and includes npm (Node Package Manager).

Installation

1. Go to nodejs.org
2. Download the LTS (Long Term Support) version
3. Run the installer
4. Verify installation by opening terminal/command prompt and running:

1
node --version
2
npm --version

Both commands should return version numbers.

Understanding npm

npm is a package manager that allows you to:

• Install libraries and frameworks
• Manage project dependencies
• Run build scripts and development servers

4. Git Version Control

Git tracks changes in your code and enables collaboration.

Installation

Windows: Download from git-scm.com Mac: Install via Homebrew (brew install git) or download from git-scm.com Linux: Use your package manager (sudo apt install git on Ubuntu)

Initial Configuration

Set up your identity (replace with your information):

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

GitHub Account

1. Create a free account at github.com
2. This will be essential for storing your code and collaborating

5. Terminal/Command Line

Accessing the Terminal

• Windows: Use PowerShell or install Windows Terminal from Microsoft Store
• Mac: Use Terminal app (found in Applications > Utilities)
• Linux: Use your distribution's terminal application

Basic Terminal Commands

Learn these essential commands:

1
# Navigate directories
2
cd folder-name          # Change to directory
3
cd ..                   # Go up one level
4
pwd                     # Show current directory
5

6
# File operations
7
ls                      # List files (dir on Windows)
8
mkdir folder-name       # Create directory
9
touch filename.txt      # Create file (New-Item on Windows PowerShell)
10

11
# Clear terminal
12
clear                   # Clear screen (cls on Windows)

6. Creating Your First Project

Let's test your setup by creating a simple "Hello World" webpage:

Step 1: Create Project Folder

1
mkdir my-first-website
2
cd my-first-website

Step 2: Create HTML File

Create index.html with this content:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>My First Website</title>
7
</head>
8
<body>
9
    <h1>Hello, World!</h1>
10
    <p>Welcome to web development!</p>
11
</body>
12
</html>

Step 3: Open in Browser

1. Right-click the HTML file and open with your browser, or
2. If you installed Live Server extension, right-click in VS Code and select "Open with Live Server"

Troubleshooting Common Issues

Node.js Installation Issues

• Ensure you downloaded the correct version for your operating system
• Restart your terminal after installation
• On Windows, you may need to run as administrator

Git Configuration Issues

• Double-check your email and name spelling
• Ensure you're using the same email as your GitHub account

VS Code Extension Issues

• Reload VS Code after installing extensions
• Check that extensions are enabled in the Extensions panel

Organizing Your Development Folder

Create a structured folder for all your projects:

Development/
├── Projects/
│   ├── personal/
│   ├── tutorials/
│   └── experiments/
├── Resources/
└── Notes/

Best Practices

1. Keep your tools updated: Regularly update VS Code, Node.js, and Git
2. Backup your settings: Export VS Code settings and sync them across devices
3. Use meaningful folder names: Organize projects clearly
4. Learn keyboard shortcuts: They'll make you much more efficient

Verification Checklist

Confirm your setup is complete:

• [ ] VS Code installed with essential extensions
• [ ] Chrome or Firefox with developer tools accessible
• [ ] Node.js and npm installed and working
• [ ] Git configured with your name and email
• [ ] Terminal/command line accessible
• [ ] First HTML file created and viewable in browser
• [ ] GitHub account created

Next Steps

With your development environment set up, you're ready to dive deeper into how the web works. In the next module, we'll explore the fundamental concepts of the internet and web that will inform everything you build as a developer.

Congratulations on completing your development setup! You now have the tools that professional developers use every day.