← Language & Syntax
WEB · LANGUAGE & SYNTAX

Web Overview

Understand how HTML, CSS, and JavaScript work together in a browser.

1. The Three Core Web Languages

HTML

Structure and content.

<h1>Order Details</h1>

CSS

Visual appearance and layout.

h1 {
    color: white;
}

JavaScript

Behavior and interaction.

button.addEventListener(
    "click",
    saveOrder
);

2. Simple Mental Model

HTML — What exists on the pageCSS — What it looks likeJavaScript — What happens

3. Browser Flow

URL↓Browser↓HTML↓Build DOM↓CSS↓Apply Styles↓JavaScript↓Add Behavior↓Web Page

4. Example Page

HTML:

<button id="save">
    Save Order
</button>

CSS:

#save {
    padding: 10px 16px;
}

JavaScript:

const button =
    document.querySelector("#save");

button.addEventListener(
    "click",
    () => {
        alert("Saved");
    }
);

HTML → creates the button

CSS → styles the button

JavaScript → reacts when the button is clicked

5. HTML → DOM

<body>
    <h1>Orders</h1>
    <button>Save</button>
</body>
Document
└── body
    ├── h1
    └── button

This browser representation is called the DOM. JavaScript can read and change the DOM.

6. JavaScript Changes HTML

<p id="status">
    Pending
</p>
const status =
    document.querySelector("#status");

status.textContent = "Completed";

Pending becomes: Completed

7. Frontend → Backend

User↓Browser↓HTML / CSS / JavaScript↓HTTP Request↓Backend API↓Database

Response: Database → Backend → JSON → JavaScript → Browser UI

8. Real System Example

User clicks Save↓HTML Button↓JavaScript click event↓POST /api/knowledge↓Python Backend↓SQL INSERT↓PostgreSQL↓JSON Response↓JavaScript↓“Saved” shown on page

9. Files in a Simple Website

project/
├── index.html
├── style.css
└── app.js
<link
    rel="stylesheet"
    href="style.css"
>

<script
    src="app.js"
></script>

HTML references CSS and JavaScript files.

10. What to Learn Next

HTML → Learn structure↓CSS → Learn styling & layout↓JavaScript → Learn behavior & interaction↓HTTP / API → Backend → Database
↑