🌐 Web Fundamentals

Welcome to web development! Before we start writing code, it's important to understand how the web works and what technologies power modern websites.

What is the Web?

The World Wide Web (WWW) is a system of interconnected documents and resources, linked by hyperlinks and URLs. When you visit a website, your browser requests files from a server and displays them on your screen.

📝 Note

The web is not the same as the internet. The internet is the infrastructure (cables, routers, servers), while the web is the information system that runs on top of it.

How Websites Work

The Client-Server Model

Web development follows a client-server architecture:

  • Client: Your web browser (Chrome, Firefox, Safari, etc.) that requests and displays web pages
  • Server: A computer that stores website files and sends them to clients when requested
  • HTTP/HTTPS: The protocol (language) browsers and servers use to communicate
Example: What happens when you visit a website
  1. You type www.example.com in your browser
  2. Your browser sends an HTTP request to the server
  3. The server finds the requested files (HTML, CSS, JavaScript)
  4. The server sends these files back to your browser
  5. Your browser reads and displays the files as a web page

The Three Core Technologies

Every website is built with three fundamental technologies:

Technology Purpose Analogy
HTML
(HyperText Markup Language)		 Structure and content The skeleton and organs of a body
CSS
(Cascading Style Sheets)		 Visual styling and layout The skin, hair, and clothing
JavaScript Interactivity and behavior The muscles and nervous system

HTML - The Structure

HTML defines what content appears on the page: headings, paragraphs, images, links, etc. It uses "tags" to mark up content and give it meaning.

HTML Example
<!-- This is a simple HTML structure -->
<!-- Tags are wrapped in angle brackets <> -->

<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here to visit Example</a>

CSS - The Style

CSS controls how HTML elements look: colors, fonts, spacing, layout, and animations. Without CSS, websites would be plain black text on white backgrounds.

CSS Example
/* This CSS makes headings blue and adds spacing */
/* The selector (h1) targets HTML elements */

h1 {
  color: blue;
  font-size: 32px;
  margin-bottom: 20px;
}

JavaScript - The Behavior

JavaScript makes websites interactive. It can respond to user actions (clicks, typing), update content dynamically, and communicate with servers.

JavaScript Example
// This JavaScript shows an alert when a button is clicked
// We'll learn this in detail later in the course

const button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

Web Browsers

A web browser is a program that retrieves, interprets, and displays web content. Popular browsers include:

  • Google Chrome - Most popular, built on Chromium
  • Firefox - Open-source, privacy-focused
  • Safari - Apple's browser for Mac and iOS
  • Edge - Microsoft's browser, also Chromium-based
💡 Tip

As a developer, you should test your websites in multiple browsers to ensure they work everywhere. Different browsers can render the same code slightly differently.

Developer Tools

Every modern browser has built-in Developer Tools (DevTools) that let you inspect and debug websites. This is your most important tool as a developer!

How to Open DevTools

  • Windows/Linux: Press F12 or Ctrl + Shift + I
  • Mac: Press Cmd + Option + I
  • Right-click on any element and select "Inspect"

DevTools Panels

Panel What it does
Elements View and edit HTML and CSS in real-time
Console See JavaScript errors and run code
Network Monitor files being loaded (images, scripts, etc.)
Sources Debug JavaScript code
⚠️ Important

Get comfortable with DevTools early! Professional developers use them constantly. They're essential for understanding how websites work and fixing bugs.

URLs and Paths

A URL (Uniform Resource Locator) is a web address that points to a specific resource on the internet.

URL Structure
https://www.example.com:443/products/shoes?color=blue&size=10#reviews
━━━━━  ━━━━━━━━━━━━━━━  ━━━  ━━━━━━━━━━━━━━━  ━━━━━━━━━━━━━━━━  ━━━━━━━
  ↓           ↓           ↓          ↓                 ↓             ↓
protocol    domain       port      path           query         fragment
  • Protocol: https:// - How to access the resource (HTTP or HTTPS)
  • Domain: www.example.com - The server address
  • Port: :443 - Optional, defaults to 80 (HTTP) or 443 (HTTPS)
  • Path: /products/shoes - Location of the resource on the server
  • Query: ?color=blue&size=10 - Additional parameters
  • Fragment: #reviews - Anchor to specific page section

File Paths in Web Development

When linking to files in your project (images, CSS, other pages), you use file paths. There are two types:

Relative Paths

Relative to the current file's location:

<!-- Same folder -->
<img src="logo.png">

<!-- Subfolder -->
<img src="images/logo.png">

<!-- Parent folder -->
<img src="../logo.png">

<!-- Parent's sibling folder -->
<link rel="stylesheet" href="../css/style.css">

Absolute Paths

Full path from the root or complete URL:

<!-- From domain root -->
<img src="/images/logo.png">

<!-- Complete URL -->
<img src="https://example.com/images/logo.png">
💡 Best Practice

Use relative paths for files within your project. Use absolute URLs only for external resources (like images from other websites or CDN links).

Next Steps

Now that you understand the fundamentals of how the web works, you're ready to start building! In the next lesson, we'll dive into HTML and create your first web page.

📚 What you learned
  • How the client-server model works
  • The three core web technologies (HTML, CSS, JavaScript)
  • What web browsers do and how to use DevTools
  • How URLs and file paths work
← Course Home HTML Basics →