Day 1: How the Web Works & Environment Setup

Daily Objective

Understand the interaction between web clients (browsers) and web servers, set up your development environment, and write your first HTML file.

1. How the Web Works

Every time you navigate to a URL like https://example.com:

1. The Client (Your Browser): Requests files (HTML, CSS, JS, images) from a server using HTTP/HTTPS.
2. The Server: Locates the requested files and sends them back as a response.
3. The Rendering Engine: The browser parses HTML (structure), applies CSS (presentation), and executes JavaScript (interactivity) to draw the page.

Browser (Client) ---- HTTP GET Request ----> Web Server
Browser (Client) <--- HTML, CSS, Images <--- Web Server

2. Setting Up Your Tools

1. Install VS Code: Download from code.visualstudio.com.
2. Install Live Server Extension: In VS Code, open Extensions (Ctrl + Shift + X), search for Live Server by Ritwick Dey, and click Install.
3. Create a Project Folder: Create a folder named html-practice on your computer.

3. Creating Your First index.html

Open your folder in VS Code, create a file named index.html, and type:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>I am starting my journey to master HTML and CSS.</p>
  </body>
</html>

Right-click index.html in VS Code and choose Open with Live Server. Your browser will open http://127.0.0.1:5500/index.html and reload automatically on every save!

Daily Hands-on Practice (70%)

1. Change the text inside the <h1> and <p> tags. Save the file and observe the browser live reload.
2. Add a second paragraph introducing yourself.
3. Open Chrome DevTools (F12 or Ctrl + Shift + I) and locate your elements in the Elements panel.