Course Introduction

Duration: 45 minutes

Module 1: Session 1

Learning Objectives

Understand the course structure and expectations
Learn how the web works with the client-server model
Set up your development environment with VS Code and Docker
Create your first HTML page
Prepare for successful learning throughout the course

Welcome to Web Development!

Welcome to the beginning of your journey as a web developer! This course will take you from understanding the basic building blocks of the web to creating dynamic WordPress websites powered by PHP. Today, we'll cover what to expect from the course, how the web works, and set up your development environment.

What You'll Learn in This Course

Imagine building a house. You need to understand the foundation, framing, electrical systems, plumbing, and finishing touches. Web development is similar:

HTML - The structure and foundation (like the framing of a house)
CSS - The design and appearance (like paint, fixtures, and aesthetics)
JavaScript - The interactive elements (like light switches and appliances)
PHP - The backend logic (like the electrical and plumbing systems)
WordPress - A complete framework (like a pre-designed house plan with customizable features)
Docker - The environment manager (like controlling the climate and conditions)

Course Structure and Expectations

Your Learning Journey

Participation Expectations

Attendance: Come to every session prepared to learn
Active Learning: Ask questions, participate in discussions
Homework: Complete assignments on time (40% of grade)
Practice: Spend at least 1-2 hours coding outside of class daily
Collaboration: Be prepared to work with other students
Growth Mindset: Embrace challenges as learning opportunities

How the Web Works

The Client-Server Model

                        graph LR
                            A[User/Browser] -->|1. HTTP Request| B[Web Server]
                            B -->|2. Processing| C[Database]
                            C -->|3. Data Response| B
                            B -->|4. HTTP Response| A
                            
                            style A fill:#f9f9f9,stroke:#333,stroke-width:2px
                            style B fill:#dff0d8,stroke:#333,stroke-width:2px
                            style C fill:#d9edf7,stroke:#333,stroke-width:2px

Think of the web as a restaurant:

The browser (client) is like a customer who places an order (HTTP request)
The server is like the kitchen that receives the order and prepares it
The database is like the pantry and refrigerator where ingredients are stored
The response is like the meal that is delivered back to the customer

What Happens When You Visit a Website?

You type a URL (e.g., www.example.com) in your browser
The browser looks up the IP address for the domain through DNS
The browser sends an HTTP request to the server
The server processes the request (possibly querying databases)
The server sends back an HTTP response (HTML, CSS, JavaScript)
The browser renders the page for you to see and interact with

Real-World Example: Online Shopping

When you shop on Amazon:

Your browser requests the Amazon homepage
Amazon's servers process your request
Databases are queried for product information
The server builds an HTML page with products
Your browser displays the products
When you click a product, a new request begins

Setting Up Your Development Environment

Essential Tools We'll Be Using

Visual Studio Code (VS Code)

Your main code editor - think of it as your workshop where you'll build everything. Like a craftsman's workbench with all your tools organized and accessible.

Key VS Code Features:
Syntax highlighting (colorizes your code)
IntelliSense (code suggestions as you type)
Extensions (add specialized tools)
Integrated terminal (command line access)

Docker

Think of Docker as a standardized shipping container system for your code. It ensures your application works the same on any system by packaging everything it needs.

Why Docker Is Important:

Consistent environments ("works on my machine" problem solved)
Isolated applications (prevents conflicts)
Easy setup and teardown (fast to start fresh)
Industry standard for deployment

Browser Developer Tools

Like having X-ray vision for websites. These tools let you inspect and debug how a website works.

What You Can Do:

Inspect HTML elements and CSS styles
Debug JavaScript
Monitor network requests
Test responsive designs
Analyze performance

GitHub

Think of GitHub as both a backup system and a time machine for your code. It lets you save versions, collaborate with others, and recover previous states.

Key Concepts:

Repositories (projects)
Commits (save points)
Branches (parallel versions)
Pull requests (proposing changes)

Installation Guide

Together, we'll install:

VS Code - Download here
Docker Desktop - Download here
Create a GitHub account - Sign up here

Don't worry if you have trouble with installation - we'll help troubleshoot during class.

Your First HTML Page

Let's create a basic HTML page to understand structure. Think of HTML as the skeleton of a website - it provides the structure that everything else builds upon.

Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page. I'm learning HTML!</p>
    
    <h2>About Me</h2>
    <p>I'm taking a PHP WordPress Development course.</p>
    
    <h2>My Goals</h2>
    <ul>
        <li>Learn HTML</li>
        <li>Master CSS</li>
        <li>Understand JavaScript</li>
        <li>Develop with PHP</li>
        <li>Build WordPress sites</li>
    </ul>
</body>
</html>

Understanding the Parts

<!DOCTYPE html> - Tells the browser this is an HTML5 document
<html> - The root element containing all other elements
<head> - Contains meta-information about the document
<body> - Contains the visible content of the page
<h1>, <h2> - Headings (like chapter titles in a book)
<p> - Paragraphs of text
<ul> - Unordered list (bullet points)
<li> - List items

Let's Try It Together

Open VS Code
Create a new file called index.html
Copy the HTML example above
Save the file
Open it in your web browser

Congratulations! You've just created your first web page!

Homework Assignment

Tasks for Next Session

Set up your GitHub account - Create a username that you'd be comfortable sharing with future employers
Create your first repository - Name it "php-wordpress-course"
Install Docker Desktop - Follow the installation instructions for your operating system
Create an enhanced version of the HTML page we made today with:
- A brief introduction about yourself
- Why you're taking this course
- What you hope to accomplish
- Add at least one image using the <img> tag
Upload your HTML file to your GitHub repository

Additional Learning Resources

Coming Up Next Session

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

More advanced HTML elements and their purposes
Semantic HTML for better structure and accessibility
Creating forms to collect user input
Best practices for writing clean, maintainable HTML

Come prepared with questions about today's material!

Frequently Asked Questions

Do I need to know programming already?

No! This course assumes no prior programming knowledge. We'll start from the very basics.

Is this course enough to get a job as a web developer?

This course provides a solid foundation, but real-world practice and building your own projects are also essential. By the end of the course, you'll have the skills to continue learning and building your portfolio.

Why are we learning Docker?

Docker has become an industry standard for development and deployment. It ensures consistent environments and makes collaboration easier. Even if you don't use it daily, understanding containerization is a valuable skill in modern web development.

Why WordPress? Isn't it outdated?

WordPress powers approximately 43% of all websites on the internet. It remains one of the most in-demand skills for freelancers and agencies. Additionally, understanding WordPress helps you learn core web concepts that apply to many other systems.

How much practice will I need outside of class?

Plan to spend at least 1-2 hours daily practicing what you've learned. Coding is like learning a musical instrument or a language - regular practice is essential for mastery.

Course Progress