Learn › Web Development › Hello, Web! — How the Internet Works

Hello, Web! — How the Internet Works

⏱ 10 min read read

Before writing a single line of code, it helps to understand what actually happens when you visit a website.

How the Web Works:
When you type a URL like google.com into your browser, here is what happens:
1. Your browser asks a DNS server to translate "google.com" into an IP address (e.g. 142.250.80.46).
2. Your browser sends an HTTP request to that IP address.
3. Google's server receives the request and sends back an HTML file.
4. Your browser reads the HTML, finds links to CSS and JavaScript files, and downloads those too.
5. The browser renders everything into the page you see on screen.

The Three Languages of the Web:
HTML — Structure. Defines what content exists: headings, paragraphs, images, buttons.
CSS — Style. Controls how everything looks: colors, fonts, spacing, layout.
JavaScript — Behavior. Makes things interactive: respond to clicks, load data, animate elements.

Think of it this way:
HTML is the skeleton. CSS is the skin and clothes. JavaScript is the muscles that make it move.

Your First Web Page:
Every HTML page follows the same basic structure:
<!DOCTYPE html> — tells the browser this is an HTML5 document.
<html> — the root element that wraps everything.
<head> — invisible metadata: title, CSS links, character encoding.
<body> — everything the user actually sees.

How to Run It:
1. Open any text editor (VS Code is recommended — download from code.visualstudio.com).
2. Create a new file called index.html.
3. Paste the code below and save.
4. Double-click the file to open it in your browser. That's it!

No server, no setup, no installation needed for HTML and CSS.

Code Example

<!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>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .card {
      background: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      text-align: center;
    }
    h1 { color: #2d3748; }
    p  { color: #718096; }
    button {
      background: #4299e1;
      color: white;
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover { background: #3182ce; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, Web! 🌐</h1>
    <p>This is my very first web page.</p>
    <button onclick="alert('JavaScript is working!')">Click Me</button>
  </div>
</body>
</html>

← Back to Course HTML Fundamentals — Structure & Semant →