Setting Up Your Development Environment
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
- Visit the official VS Code website
- Click the download button for your operating system (Windows, macOS, or Linux)
- Run the installer and follow the installation wizard
- 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
- Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X)
- Search for the extension name
- 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
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.csscontact_form.jshero-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