Setup Overview

What You'll Install

Modern Code Editor (VS Code)
Web Browser with DevTools
Git for Version Control
Essential Browser Extensions

Estimated Time

Code Editor: 15-20 minutes
Browser Setup: 10-15 minutes
Git Setup: 15-20 minutes
Total: 40-55 minutes

Code Editor Setup

1

Install Visual Studio Code

VS Code is the recommended code editor for web development with excellent HTML, CSS, and JavaScript support.

Windows

Download the Windows x64 User Installer (.exe)

Download for Windows

macOS

Download the macOS Universal .zip file

Download for macOS

Linux

Download the Linux .deb or .rpm package

Download for Linux
2

Install Essential Extensions

Language Support

  • HTML CSS Support - Enhanced HTML and CSS support
  • JavaScript (ES6) code snippets - ES6 code snippets
  • Auto Rename Tag - Automatically rename paired HTML tags
  • Bracket Pair Colorizer - Colorize matching brackets

Visual Enhancements

  • Live Server - Launch a local development server
  • Prettier - Code formatter for consistent styling
  • Color Highlight - Highlight web colors in your code
  • Material Icon Theme - Beautiful file and folder icons

Development Tools

  • GitLens - Enhanced Git capabilities
  • Error Lens - Show errors inline
  • Path Intellisense - Autocomplete file paths
  • CSS Peek - Peek and go to CSS definitions

How to Install Extensions:

  1. Open VS Code
  2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS)
  3. Search for each extension by name
  4. Click "Install" for each extension
  5. Restart VS Code after installation
3

Configure VS Code Settings

Recommended Settings:

Editor Settings:
{
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.rulers": [80, 120],
    "editor.bracketPairColorization.enabled": true
}
File Settings:
{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true
}
How to Apply Settings:
  1. Press Ctrl+, (Windows/Linux) or Cmd+, (macOS)
  2. Click the "Open Settings (JSON)" icon in the top right
  3. Add the settings above to your settings.json file
  4. Save the file

Browser & Developer Tools

Google Chrome (Recommended)

Recommended

Chrome offers the most comprehensive developer tools and is widely used in web development.

Installation Steps:

  1. Download Google Chrome
  2. Run the installer and follow the setup wizard
  3. Sign in with your Google account (optional but recommended)
  4. Launch Chrome

Developer Tools Setup:

  1. Right-click on any webpage and select "Inspect"
  2. Or press F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS)
  3. Familiarize yourself with the Elements, Console, and Network tabs
  4. Learn keyboard shortcuts for faster navigation

Mozilla Firefox

Firefox offers excellent developer tools and is great for cross-browser testing.

Installation Steps:

  1. Download Firefox
  2. Run the installer and follow the setup wizard
  3. Launch Firefox

Developer Tools Setup:

  1. Right-click and select "Inspect Element"
  2. Or press F12 or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS)
  3. Explore the Inspector, Console, and Network Monitor

Essential Browser Extensions

Web Developer

Comprehensive web development toolbar with various tools for testing and debugging.

Install Extension

Responsive Viewer

Test your website's responsiveness across different device sizes.

Install Extension

ColorZilla

Advanced color picker and color analyzer tool.

Install Extension

Lighthouse

Audit your website for performance, accessibility, and SEO.

Install Extension

Version Control Setup

1

Install Git

Windows Installation

  1. Download Git for Windows
  2. Run the installer as Administrator
  3. Use default settings (recommended for beginners)
  4. Complete the installation

macOS Installation

  1. Install Xcode Command Line Tools: xcode-select --install
  2. Or download from Git website
  3. Follow the installation wizard

Linux Installation

  1. Ubuntu/Debian: sudo apt-get install git
  2. CentOS/RHEL: sudo yum install git
  3. Fedora: sudo dnf install git
2

Configure Git

Initial Setup Commands:

Set your name and email:
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
Set default branch name:
git config --global init.defaultBranch main
Verify configuration:
git config --list
3

GitHub Account Setup

Create GitHub Account:

  1. Sign up for GitHub
  2. Choose a username and verify your email
  3. Set up two-factor authentication (recommended)

Set up SSH Keys (Optional but Recommended):

Generate SSH Key:
ssh-keygen -t ed25519 -C "your.email@example.com"
Add SSH Key to SSH Agent:
ssh-add ~/.ssh/id_ed25519
Add Public Key to GitHub:
  1. Copy the public key: cat ~/.ssh/id_ed25519.pub
  2. Go to GitHub Settings ? SSH and GPG keys
  3. Click "New SSH key" and paste your key

Verification & Testing

Test VS Code Setup

Verify your code editor is working properly:

Create Test Project:

  1. Create a new folder for your project
  2. Open the folder in VS Code
  3. Create a new file: index.html
  4. Write some HTML code and save
  5. Test Live Server extension

Sample HTML to Test:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Page</title>
</head>
<body>
    <h1>Hello Web Development!</h1>
    <p>If you can see this, your setup is working!</p>
</body>
</html>

Test Browser Setup

Verify your browser and developer tools are working:

Browser Testing Steps:

  1. Open your test HTML file in the browser
  2. Right-click and select "Inspect"
  3. Navigate through different DevTools tabs
  4. Test responsive design mode
  5. Check console for any errors

Test Git Setup

Verify Git is properly configured:

Git Verification Commands:

Check Git Version:
git --version

Should show: git version 2.x.x

Check Git Configuration:
git config --list

Should show your name and email

Test Git Repository:
git init
git status
git add .
git commit -m "Initial commit"

Should create a new Git repository successfully

?? Setup Complete!

You now have a fully configured web development environment. You're ready to start building websites!