Exercise Overview

Welcome to the hands-on exercises for Part 1! These exercises will help you apply the concepts you've learned about web development fundamentals, environment setup, and development tools.

What You'll Practice

  • Setting up your development environment
  • Understanding web development concepts
  • Using browser developer tools
  • Creating your first project structure
  • Exploring hosting options

Hands-On Exercises

Exercise 1: Development Environment Setup

Beginner

Set up your complete development environment to start building web applications. This exercise will walk you through installing and configuring all necessary tools.

Step-by-Step Instructions

  1. Install Visual Studio Code: Download and install VS Code from the official website
  2. Install XAMPP: Download and install XAMPP for your operating system
  3. Install a Web Browser: Install Chrome or Firefox if you don't have them
  4. Test Your Setup: Start Apache and MySQL services in XAMPP
  5. Create Project Folder: Set up your first web development project folder

Helpful Tips

  • Make sure to run XAMPP as administrator on Windows
  • Check that ports 80 and 3306 are not already in use
  • Create your project folder in the XAMPP htdocs directory
  • Test your setup by visiting http://localhost in your browser

Success Criteria

  • VS Code opens without errors
  • XAMPP Control Panel shows Apache and MySQL running (green status)
  • You can access http://localhost in your browser
  • You can access http://localhost/phpmyadmin for database management
  • Your project folder is created and accessible

Exercise 2: VS Code Configuration

Beginner

Configure Visual Studio Code with essential extensions and settings for web development. This will make your coding experience much more efficient and enjoyable.

Required Extensions

  • Live Server: For automatic browser refresh
  • PHP Intelephense: PHP language support
  • Auto Rename Tag: HTML tag management
  • Prettier: Code formatting
  • GitLens: Git integration (if using Git)

VS Code Settings

  • Enable "Format on Save"
  • Set tab size to 2 spaces
  • Enable "Word Wrap"
  • Set default language mode to HTML for .html files

Pro Tips

  • Use Ctrl+Shift+P (Cmd+Shift+P on Mac) to access the command palette
  • Learn keyboard shortcuts for common actions
  • Customize your color theme for better visibility
  • Set up a custom workspace for your web projects

Exercise 3: Browser Developer Tools Exploration

Beginner

Familiarize yourself with browser developer tools by exploring a real website. This exercise will help you understand how to inspect and debug web pages.

Exploration Tasks

  • Open Developer Tools: Right-click on any website and select "Inspect"
  • Elements Panel: Explore the HTML structure and CSS styles
  • Console Panel: Look for any JavaScript errors or logs
  • Network Panel: Monitor page loading and API calls
  • Sources Panel: Examine JavaScript files and debug code

What to Look For

  • HTML element hierarchy and nesting
  • CSS properties and their values
  • JavaScript console messages
  • Network request timing and responses
  • Page performance metrics

Learning Tips

  • Try modifying CSS values in the Elements panel to see live changes
  • Use the Console to run simple JavaScript commands
  • Check the Network tab to see what resources the page loads
  • Practice on different types of websites (blogs, e-commerce, etc.)

Exercise 4: Project Structure Creation

Beginner

Create a well-organized project structure for your web development projects. This exercise will teach you best practices for organizing your code and assets.

Create This Folder Structure

my-first-website/ ├── index.html ├── css/ │ └── styles.css ├── js/ │ └── script.js ├── images/ ├── assets/ └── README.md

Create Basic Files

  • index.html: Basic HTML5 structure with proper meta tags
  • styles.css: Empty CSS file for future styling
  • script.js: Empty JavaScript file for future functionality
  • README.md: Project description and setup instructions
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Website</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>Hello, Web Development!</h1> <p>This is my first web page.</p> <script src="js/script.js"></script> </body> </html>

Organization Tips

  • Use descriptive folder names that clearly indicate their purpose
  • Keep your root directory clean by organizing files into subdirectories
  • Use consistent naming conventions (lowercase with hyphens)
  • Include a README file to document your project
  • Consider using version control (Git) for your projects

Exercise 5: Hosting Service Research

Intermediate

Research and compare different free hosting services to understand their features, limitations, and suitability for different types of projects.

Research Tasks

  • Visit Hosting Websites: Explore the services mentioned in Part 1
  • Compare Features: Storage, bandwidth, database support, etc.
  • Check Limitations: Free tier restrictions and upgrade costs
  • Read Reviews: User experiences and community feedback
  • Test Setup Process: Try creating an account on one service

Create a Comparison Chart

  • List at least 5 hosting services
  • Compare storage limits, bandwidth, and features
  • Note setup difficulty and learning curve
  • Identify best use cases for each service
  • Include your personal recommendations

Research Tips

  • Look for recent reviews and comparisons (hosting services change frequently)
  • Check if the service supports the technologies you plan to use
  • Consider the community and support available
  • Look for tutorials and documentation quality
  • Test the service with a simple project before committing

Exercise 6: First Web Page Deployment

Advanced

Deploy your first web page to a free hosting service. This exercise will give you hands-on experience with the deployment process and help you understand hosting workflows.

Deployment Steps

  • Choose a Hosting Service: Select one from your research
  • Create an Account: Sign up and verify your email
  • Upload Your Files: Use the hosting service's file manager or FTP
  • Configure Domain: Set up your free subdomain or custom domain
  • Test Your Site: Visit your live website and verify functionality

What to Deploy

  • Your project structure from Exercise 4
  • A simple "Hello World" page or personal introduction
  • Basic CSS styling to make it look professional
  • Optional: Simple JavaScript functionality

Deployment Tips

  • Start with a simple static site before trying dynamic features
  • Test your site locally before uploading
  • Keep a backup of your files before making changes
  • Use descriptive file names and avoid spaces
  • Check that all links and resources work after deployment

Track Your Progress

Exercise Completion Checklist

Next Steps

Congratulations on completing Part 1 exercises! You now have a solid foundation in web development concepts and a working development environment.

Continue to Part 2: HTML5 & CSS Review Part 1 Content