Skip to main content

Course Progress

Loading...

Setting Up Your Development Environment

Duration: 60 minutes
Module 1: Web Development Basics

Learning Objectives

  • Master the concepts in this lesson
  • Apply knowledge through practice
  • Build practical skills
  • Prepare for next topics

Why Your Development Environment Matters

Think of your development environment as a craftsman's workshop. Just as a carpenter needs the right tools, workspace organization, and knowledge of their materials to build quality furniture, a web developer needs proper tools, file organization, and understanding of web technologies to build excellent websites.

The Components of an Effective Development Environment

Today we'll set up all the essential tools you'll need throughout this course:

  • Code Editor (VS Code) - Your primary tool for writing and editing code
  • File Structure Organization - How to organize your project files logically
  • Browser Developer Tools - Built-in tools for inspecting and debugging web pages
  • Docker - Technology for creating consistent development environments

By the end of this session, you'll have a professional-grade development environment ready for web development.

Installing and Setting Up VS Code

Why Visual Studio Code?

Visual Studio Code (VS Code) has become the industry standard for web development due to its balance of features, performance, and customizability.

The Swiss Army Knife Analogy

Think of VS Code as a Swiss Army knife for developers:

  • The basic editor is like the main blade - handles the core text editing tasks
  • Extensions are like the additional tools - add specialized functionality when needed
  • Settings and configurations let you adjust the tool perfectly to your hand (workflow)
  • It's portable and works across different operating systems

Key Features of VS Code

  • Syntax highlighting - Colors different parts of your code for readability
  • IntelliSense - Provides smart code completions based on context
  • Integrated terminal - Run commands without leaving the editor
  • Debugging tools - Find and fix code issues
  • Git integration - Version control built right in
  • Extensions - Customize with thousands of add-ons

Installing VS Code

Step-by-Step Installation Guide

  1. Visit the official VS Code website
  2. Click the download button for your operating system (Windows, macOS, or Linux)
  3. Run the installer and follow the installation wizard
  4. Launch VS Code after installation
Platform-Specific Notes:
Windows
  • Select "Add to PATH" during installation to use VS Code from the command line
  • Consider checking "Add 'Open with Code' action" for right-click context menu integration
macOS
  • After downloading, drag VS Code to your Applications folder
  • To add the 'code' command to your terminal, open VS Code, press Cmd+Shift+P, type "shell command" and select "Install 'code' command in PATH"
Linux
  • Follow the package manager instructions for your distribution
  • The 'code' command should be automatically added to your PATH

Must-Have Extensions for Web Development

Let's enhance VS Code with some essential extensions for our course:

HTML & CSS Support

  • HTML CSS Support - Provides CSS class name completion
  • HTML Snippets - Shorthand for common HTML patterns
  • Live Server - Launch a local development server with live reload

JavaScript Support

  • JavaScript (ES6) code snippets - Shortcuts for common JS patterns
  • ESLint - Identifies and fixes problems in your JavaScript code

PHP Support

  • PHP Intelephense - Intelligent PHP code completion and error checking
  • PHP Debug - Debugging support for PHP

Git & GitHub

  • GitLens - Enhances Git capabilities in VS Code
  • GitHub Pull Requests - Review and manage pull requests

Docker

  • Docker - Adds support for Dockerfiles and Docker Compose

How to Install Extensions

  1. Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X)
  2. Search for the extension name
  3. Click the "Install" button

We'll install these together during class to ensure everyone has a consistent setup.

A Tour of VS Code's Interface

Files Search Git Debug Ext EXPLORER index.html styles.css script.js index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Website</title> </head> <body> <h1>Hello, World!</h1> </body> </html> $ cd my-project $ ls index.html styles.css script.js HTML UTF-8 LF Ln 9, Col 12 Activity Bar Side Bar Editor Area Status Bar Terminal Panel

Main Interface Components

  • Activity Bar: Icons for different views (Explorer, Search, Git, etc.)
  • Side Bar: Context-dependent panel (file explorer, search results, etc.)
  • Editor Area: Where you write and edit code
  • Terminal Panel: Integrated command-line interface
  • Status Bar: Information about the current file and editor state

Essential Keyboard Shortcuts

Action Windows/Linux macOS
Open Command Palette Ctrl+Shift+P Cmd+Shift+P
Quick Open File Ctrl+P Cmd+P
Save File Ctrl+S Cmd+S
Toggle Terminal Ctrl+` Ctrl+`
Multi-cursor Selection Alt+Click Opt+Click

Understanding File Structures

Why File Organization Matters

Proper file organization is crucial for any web project, regardless of size. It's like organizing a kitchen - when everything has its place, cooking becomes more efficient and enjoyable.

The Restaurant Kitchen Analogy

Think of your project's file structure as a professional kitchen setup:

  • HTML files are like the plates - they present the final product
  • CSS files are like the presentation elements - the garnish and plating style
  • JavaScript files are like the cooking techniques - they transform ingredients and add complexity
  • Assets (images, fonts) are like the raw ingredients - essential components that need proper storage
  • Backend files (PHP) are like the kitchen staff - working behind the scenes to prepare everything

Basic Web Project Structure

graph TD
    A[project-root/] --> B[index.html]
    A --> C[css/]
    A --> D[js/]
    A --> E[images/]
    A --> F[assets/]
    C --> G[styles.css]
    D --> H[script.js]
    E --> I[logo.png]
    E --> J[hero.jpg]
    F --> K[fonts/]
    F --> L[documents/]
    style A fill:#f8f9fa,stroke:#343a40
    style B fill:#e9ecef,stroke:#343a40
    style C fill:#e9ecef,stroke:#343a40
    style D fill:#e9ecef,stroke:#343a40
    style E fill:#e9ecef,stroke:#343a40
    style F fill:#e9ecef,stroke:#343a40
    style G fill:#dee2e6,stroke:#343a40
    style H fill:#dee2e6,stroke:#343a40
    style I fill:#dee2e6,stroke:#343a40
    style J fill:#dee2e6,stroke:#343a40
    style K fill:#dee2e6,stroke:#343a40
    style L fill:#dee2e6,stroke:#343a40
                    

Key Components of a Well-Organized Project

  • Root directory: Contains HTML files and subdirectories
  • CSS directory: All stylesheets
  • JS directory: All JavaScript files
  • Images directory: All image assets
  • Assets directory: Other assets like fonts, documents, etc.

File Naming Conventions

  • Use lowercase for all filenames
  • Avoid spaces (use hyphens or underscores instead)
  • Be descriptive but concise
  • Use consistent naming patterns
Good Examples:
  • main-styles.css
  • contact_form.js
  • hero-image-large.jpg
Poor Examples:
  • My Styles.css (contains spaces)
  • Script1.js (not descriptive)
  • IMG2345.jpg (not descriptive)

More Advanced Project Structures

As projects grow in complexity, you might use more sophisticated structures:

WordPress Theme Structure

graph TD
    A[theme-name/] --> B[style.css]
    A --> C[index.php]
    A --> D[functions.php]
    A --> E[header.php]
    A --> F[footer.php]
    A --> G[page.php]
    A --> H[single.php]
    A --> I[assets/]
    I --> J[css/]
    I --> K[js/]
    I --> L[images/]
    style A fill:#f8f9fa,stroke:#343a40
    style B fill:#e9ecef,stroke:#343a40
    style C fill:#e9ecef,stroke:#343a40
    style D fill:#e9ecef,stroke:#343a40
    style E fill:#e9ecef,stroke:#343a40
    style F fill:#e9ecef,stroke:#343a40
    style G fill:#e9ecef,stroke:#343a40
    style H fill:#e9ecef,stroke:#343a40
    style I fill:#e9ecef,stroke:#343a40
    style J fill:#dee2e6,stroke:#343a40
    style K fill:#dee2e6,stroke:#343a40
    style L fill:#dee2e6,stroke:#343a40
                        

Component-Based Structure

graph TD
    A[project-root/] --> B[index.html]
    A --> C[components/]
    A --> D[assets/]
    C --> E[header/]
    C --> F[navigation/]
    C --> G[footer/]
    E --> H[header.html]
    E --> I[header.css]
    E --> J[header.js]
    style A fill:#f8f9fa,stroke:#343a40
    style B fill:#e9ecef,stroke:#343a40
    style C fill:#e9ecef,stroke:#343a40
    style D fill:#e9ecef,stroke:#343a40
    style E fill:#e9ecef,stroke:#343a40
    style F fill:#e9ecef,stroke:#343a40
    style G fill:#e9ecef,stroke:#343a40
    style H fill:#dee2e6,stroke:#343a40
    style I fill:#dee2e6,stroke:#343a40
    style J fill:#dee2e6,stroke:#343a40
                        

Let's Practice Together

Let's create a basic project structure for a personal portfolio website:

  1. Open VS Code
  2. Create a new folder called "portfolio-site"
  3. Inside, create:
    • index.html file
    • css folder with styles.css inside
    • js folder with script.js inside
    • images folder
  4. Add a basic HTML structure to index.html that links to your CSS and JS files

This will be the foundation for our future projects!

Browser Developer Tools

The Secret Superpower of Web Developers

Browser Developer Tools are built-in utilities that let you inspect, debug, and modify web pages in real-time. Think of them as X-ray glasses that let you see beneath the surface of websites.

The Mechanic's Diagnostic Tools Analogy

If a website were a car:

  • Developer Tools are like a mechanic's diagnostic equipment
  • The Elements panel is like looking under the hood
  • The Console is like the onboard computer showing error messages
  • The Network panel is like monitoring fuel efficiency and performance
  • The Application panel is like checking the car's storage compartments

How to Access Developer Tools

Browser Keyboard Shortcut Menu Access
Chrome F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) Menu > More Tools > Developer Tools
Firefox F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) Menu > Web Developer > Toggle Tools
Edge F12 or Ctrl+Shift+I Menu > More Tools > Developer Tools
Safari Option+Cmd+I Preferences > Advanced > Show Develop menu > Develop > Show Web Inspector

Key Developer Tools Panels

Elements Panel

The Elements panel shows the HTML structure of the current page and lets you manipulate it in real-time.

What You Can Do:
  • Inspect HTML elements
  • View and modify CSS styles
  • See box model dimensions
  • Delete, edit, or add HTML elements
  • View event listeners
Real-World Example:

You can use the Elements panel to experiment with CSS changes (like colors, spacing, font sizes) in real-time before implementing them in your code.

Console Panel

The Console panel shows JavaScript errors, warnings, and logs, and lets you execute JavaScript commands.

What You Can Do:
  • View error messages and debug information
  • Run JavaScript commands directly
  • Log information from your scripts
  • Test JavaScript functions and expressions
Real-World Example:

When your JavaScript isn't working as expected, you can add console.log() statements in your code to track variable values and execution flow.

Network Panel

The Network panel shows all network requests made by the page, including HTML, CSS, JavaScript, images, and API calls.

What You Can Do:
  • Monitor all network requests
  • See request/response headers and content
  • Analyze loading performance
  • Simulate different network conditions
Real-World Example:

You can use the Network panel to debug API requests, check if files are loading correctly, and identify performance bottlenecks.

Sources Panel

The Sources panel shows all the files loaded by the page and provides debugging tools for JavaScript.

What You Can Do:
  • View source code files
  • Set breakpoints in JavaScript
  • Step through code execution
  • Watch variables and expressions
Real-World Example:

When debugging complex JavaScript, you can set breakpoints to pause execution at specific lines and examine variable values at that point.

Application Panel

The Application panel shows storage information like cookies, localStorage, IndexedDB, and more.

What You Can Do:
  • View and modify cookies
  • Inspect localStorage and sessionStorage
  • Manage IndexedDB databases
  • Clear browser data
Real-World Example:

You can use the Application panel to debug user authentication issues by examining cookies and localStorage values.

Hands-on Exercise: Exploring a Website

Let's practice using Developer Tools together:

  1. Open your favorite browser
  2. Navigate to a website you frequently visit
  3. Open Developer Tools
  4. Use the Elements panel to:
    • Inspect the navigation menu
    • Temporarily change the background color of a section
    • Modify some text on the page
  5. Use the Console to:
    • Type document.title and press Enter to see the page title
    • Try document.querySelectorAll('img').length to count images
  6. Use the Network panel to reload the page and observe all resources being loaded

Introduction to Containerization with Docker

What is Docker and Why Should You Care?

Docker is a platform that uses containerization technology to package applications and their dependencies together. This ensures that your application works the same way regardless of where it's deployed.

The Shipping Container Analogy

Before standardized shipping containers, loading cargo onto ships was a chaotic process - different sized boxes, crates, and goods all had to be manually arranged.

Docker containers are like standardized shipping containers for software:

  • Everything the application needs is packed inside
  • Containers have a standard interface, regardless of contents
  • They can be efficiently moved between environments
  • They don't interfere with other containers
  • They can be stacked and managed together
Traditional Deployment Server App 1 PHP 7.2 App 2 PHP 8.0 App 3 MySQL 5.7 App 4 MySQL 8.0 Docker Deployment Docker Engine Container 1 App 1 PHP 7.2 Container 2 App 2 PHP 8.0 Container 3 App 3 MySQL 5.7 Container 4 App 4 MySQL 8.0

Why Docker is Essential for Modern Web Development

  • Consistency: "Works on my machine" problems disappear
  • Isolation: Applications don't interfere with each other
  • Version Management: Run different versions of PHP, MySQL, etc. side by side
  • Simplified Setup: One command to set up an entire development environment
  • Production Parity: Development environment matches production
  • Team Collaboration: Everyone uses the exact same environment

Real-World Scenario: The WordPress Version Dilemma

Imagine you're working on two different WordPress projects:

  • Project A: Requires PHP 7.2 and an older WordPress plugin that breaks on newer PHP versions
  • Project B: Uses PHP 8.1 features and the latest WordPress

Without Docker, you'd need to constantly switch PHP versions or maintain multiple local setups.

With Docker, you simply create two different containers, each with its own PHP version and WordPress setup. You can work on both projects simultaneously without any conflicts.

Key Docker Concepts

Docker Images

A Docker image is a blueprint or template for a container. Think of it like a class in object-oriented programming or a recipe in cooking.

  • Images are read-only templates
  • They contain the application code, libraries, dependencies, tools, and other files
  • Images can be shared via Docker Hub (a public registry) or private registries
  • Common images include: nginx, php, mysql, wordpress

Docker Containers

A container is a running instance of an image. Think of it as an object instantiated from a class or a dish made from a recipe.

  • Containers are isolated but can communicate with each other
  • They are lightweight and start quickly
  • Each container runs as a separate process
  • Changes inside a container don't affect the image

Dockerfile

A Dockerfile is a text file with instructions for building a Docker image.

# Simple PHP Dockerfile example
FROM php:8.1-apache
COPY src/ /var/www/html/
RUN docker-php-ext-install mysqli pdo pdo_mysql
EXPOSE 80
CMD ["apache2-foreground"]

Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications.

# docker-compose.yml example
version: '3'
services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp-content:/var/www/html/wp-content
  
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:

Installing Docker Desktop

System Requirements

Windows Requirements

  • Windows 10 64-bit: Pro, Enterprise, or Education (Build 18362 or later)
  • WSL 2 feature enabled
  • Hardware virtualization enabled in BIOS
  • 4GB system RAM minimum

macOS Requirements

  • macOS 10.15 or newer
  • Apple Silicon (M1/M2) or Intel chip
  • 4GB system RAM minimum

Linux Requirements

  • 64-bit Linux distribution
  • Kernel version 3.10 or higher
  • 4GB system RAM minimum

Installation Guide

Windows Installation

  1. Download Docker Desktop for Windows from the official website
  2. Double-click the installer to run it
  3. Follow the installation wizard
    • Enable WSL 2 integration if prompted
    • Add a shortcut to the desktop if desired
  4. Click "Close and log out" after installation
  5. Log back in to complete the setup
  6. Launch Docker Desktop
  7. Accept the terms and conditions
  8. Sign up for a Docker ID (optional but recommended)

macOS Installation

  1. Download Docker Desktop for Mac from the official website
  2. Double-click the .dmg file
  3. Drag the Docker icon to the Applications folder
  4. Open Docker from the Applications folder
  5. Authorize the installation with your password
  6. Accept the terms and conditions
  7. Sign up for a Docker ID (optional but recommended)

Linux Installation

For Linux, it's recommended to install Docker Engine directly and then Docker Compose separately. Follow the official Docker documentation for your specific distribution.

Verifying Your Installation

Let's make sure Docker is installed correctly:

  1. Open a terminal or command prompt
  2. Run the command: docker --version
    • You should see something like: Docker version 25.0.3, build 4debf41
  3. Run the command: docker-compose --version
    • You should see something like: Docker Compose version v2.22.0-desktop.2
  4. Run a test container with: docker run hello-world
    • This will download a test image and run it
    • If everything is working, you'll see a success message

Your First WordPress Container

Let's set up a simple WordPress environment using Docker:

  1. Create a new folder for your project
  2. Inside that folder, create a file named docker-compose.yml
  3. Copy the Docker Compose example from earlier into this file
  4. Open a terminal in that folder
  5. Run: docker-compose up -d
  6. Wait for the containers to start
  7. Open your browser and go to: http://localhost:8080
  8. You should see the WordPress installation page!

This is just a small preview of what we'll be doing with Docker throughout the course. We'll explore this in much more detail in future sessions.

Homework and What's Next

Your Tasks Before Next Session

  1. Complete your installations:
    • Make sure VS Code is installed and set up with the recommended extensions
    • Install Docker Desktop and verify it's working
    • Create a GitHub account if you don't have one
  2. Create a project folder structure:
    • Make a folder called "php-wordpress-course"
    • Inside, create a basic structure with html, css, js, and images folders
    • Add a simple index.html file with proper HTML structure
  3. Experiment with Developer Tools:
    • Visit 3 different websites
    • Use the Elements panel to inspect their structure
    • Take note of anything interesting you discover
  4. Run the WordPress Docker example:
    • Create the docker-compose.yml file as shown
    • Start the containers and verify WordPress loads

Coming Up Next Session

In our next session, we'll dive deeper into HTML fundamentals:

  • Essential HTML tags and their purposes
  • Document structure and organization
  • Semantic HTML for better accessibility
  • Forms and input elements
  • HTML validation and best practices

Come prepared with questions about today's material and ready to build a more complete HTML page!

Additional Resources