The Frontend Trio: HTML, CSS, and JavaScript

Table of Contents

1. Introduction 2. HTML: The Skeleton of a Webpage 2.1 What Is HTML?2.2 Common HTML Tags 2.3 Semantic HTML 3. CSS: The Skin of a Webpage 3.1 What Is CSS?3.2 Core Concepts 4. JavaScript: The Brain of a Webpage 4.1 What Is JavaScript?4.2 Core Concepts at a Glance 5. How the Three Work Together 6. Suggested Learning Path 7. Summary

1064 words

5 minutes

The Frontend Trio: HTML, CSS, and JavaScript

2026-06-17

Frontend

HTML

/

CSS

/

JavaScript

/

Frontend Fundamentals

1. Introduction#

If front-end development were compared to building a house, then:

HTML is the skeleton and structure of the house — the walls, floors, and ceiling
CSS is the decoration and finishing — paint, wallpaper, furniture placement
JavaScript is the plumbing, electrical system, and smart home features — turning lights on and off, adjusting temperature, automated curtains

Each of the three has its own role, and none can be missing. Once you understand this trio, you’ve got your ticket into the front-end world.

2. HTML: The Skeleton of a Webpage#

2.1 What Is HTML?#

HTML (HyperText Markup Language) uses tags to describe the structure and content of a page. It doesn’t care about whether things look good — only about “what’s there” and “what it is.”

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>My First Webpage</title>
6
</head>
7
<body>
8
    <header>
9
        <h1>Welcome to my website</h1>
10
        <nav>
11
            <a href="/">Home</a>
12
            <a href="/about">About</a>
13
        </nav>
14
    </header>
15
    <main>
16
        <article>
17
            <h2>Article Title</h2>
18
            <p>This is a paragraph of body text.</p>
19
        </article>
20
    </main>
21
    <footer>
22
        <p>&copy; 2026 My Website</p>
23
    </footer>
24
</body>
25
</html>

2.2 Common HTML Tags#

Category	Tags	Purpose
Structure	`<header>`, `<main>`, `<footer>`, `<nav>`, `<article>`, `<section>`	Semantic layout
Headings	`<h1>` ~ `<h6>`	Six heading levels, `h1` is the most important
Text	`<p>`, `<span>`, `<strong>`, `<em>`	Paragraphs, inline text, bold, emphasis
Links	`<a href="...">`	Hyperlinks
Media	`<img>`, `<video>`, `<audio>`	Images, video, audio
Lists	`<ul>`, `<ol>`, `<li>`	Unordered lists, ordered lists
Forms	`<form>`, `<input>`, `<button>`, `<select>`	User input
Containers	`<div>`	Generic block-level container

2.3 Semantic HTML#

Semantic HTML means using the right tags to describe the right content, rather than filling the screen with <div>:

1
<!-- ❌ Not recommended: all divs -->
2
<div class="header">
3
  <div class="title">Title</div>
4
</div>
5

6
<!-- ✅ Recommended: use semantic tags -->
7
<header>
8
  <h1>Title</h1>
9
</header>

Benefits of semantic HTML:

SEO: Search engines understand page content better
Accessibility: Screen readers can accurately convey information to visually impaired users
Maintainability: Clearer code structure makes team collaboration easier

3. CSS: The Skin of a Webpage#

3.1 What Is CSS?#

CSS (Cascading Style Sheets) handles the visual presentation of a webpage: colors, fonts, spacing, layout, animations, and more.

1
/* selector { property: value; } */
2
body {
3
    font-family: 'Inter', sans-serif;
4
    background-color: #f5f5f5;
5
    color: #333;
6
    line-height: 1.6;
7
}
8

9
h1 {
10
    font-size: 2rem;
11
    font-weight: 700;
12
    color: #1a1a2e;
13
}
14

15
.card {
16
    background: white;
17
    border-radius: 12px;
18
    padding: 24px;
19
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
20
}

3.2 Core Concepts#

Selectors#

1
/* element selector */
2
p { }
3

4
/* class selector (most commonly used) */
5
.card { }
6

7
/* ID selector */
8
#header { }
9

10
/* combinator selectors */
11
.card:hover { }
12
nav > a { }
13
input[type="text"] { }

The Box Model#

Every element is a rectangular box, and from the inside out it consists of:

Layer	Property	Description
content	`width` / `height`	Content area
padding	`padding`	Inner spacing (content to border)
border	`border`	Border
margin	`margin`	Outer spacing (element to element)

1
.box {
2
    width: 300px;
3
    padding: 20px;
4
    border: 1px solid #ddd;
5
    margin: 16px;
6
    /* actual occupied width = 300 + 20×2 + 1×2 + 16×2 = 374px */
7
}

Layout: Flexbox and Grid#

1
/* Flexbox: one-dimensional layout */
2
.container {
3
    display: flex;
4
    justify-content: space-between; /* horizontal distribution */
5
    align-items: center;            /* vertical centering */
6
    gap: 16px;                      /* spacing */
7
}
8

9
/* Grid: two-dimensional layout */
10
.grid {
11
    display: grid;
12
    grid-template-columns: repeat(3, 1fr); /* three equal-width columns */
13
    gap: 24px;
14
}

Responsive Design#

1
/* mobile-first */
2
.card {
3
    width: 100%;
4
}
5

6
/* tablet */
7
@media (min-width: 768px) {
8
    .card {
9
        width: 50%;
10
    }
11
}
12

13
/* desktop */
14
@media (min-width: 1024px) {
15
    .card {
16
        width: 33.33%;
17
    }
18
}

4. JavaScript: The Brain of a Webpage#

4.1 What Is JavaScript?#

JavaScript (JS for short) is a dynamic, weakly typed scripting language that brings webpages to life. It runs in the browser and can manipulate HTML and CSS and respond to user interactions.

1
// Click the button to toggle the theme
2
const button = document.querySelector('#theme-toggle');
3
const body = document.body;
4

5
button.addEventListener('click', () => {
6
    body.classList.toggle('dark-mode');
7
    const isDark = body.classList.contains('dark-mode');
8
    button.textContent = isDark ? '☀️ Light mode' : '🌙 Dark mode';
9
});

4.2 Core Concepts at a Glance#

Variables and Scope#

1
// let: mutable variable (block scope)
2
let count = 0;
3
count += 1;
4

5
// const: immutable constant (block scope)
6
const API_URL = 'https://api.example.com';
7

8
// var: legacy syntax, has hoisting issues, not recommended
9
var oldWay = 'Do not write it like this';

Data Types#

Type	Example	Description
Number	`42`, `3.14`, `NaN`	All numbers are floating-point
String	`'hello'`, `"世界"`, `template`	Text
Boolean	`true`, `false`	Logical values
Object	`{ name: 'Alice', age: 25 }`	Key-value pairs
Array	`[1, 2, 3]`	Ordered list
Function	`function() {}` / `() => {}`	Callable object
Undefined	`undefined`	Undefined
Null	`null`	Null value

DOM Manipulation#

1
// Query elements
2
const el = document.querySelector('.card');
3
const els = document.querySelectorAll('.card');
4

5
// Modify content
6
el.textContent = 'New text';
7
el.innerHTML = '<strong>Bold text</strong>';
8

9
// Modify styles
10
el.style.backgroundColor = '#f0f0f0';
11
el.classList.add('active');
12
el.classList.remove('hidden');
13

14
// Create and insert elements
15
const newDiv = document.createElement('div');
16
newDiv.textContent = 'I am a new element';
17
document.body.appendChild(newDiv);

Asynchronous Programming#

1
// Promise
2
fetch('https://api.example.com/data')
3
    .then(res => res.json())
4
    .then(data => console.log(data))
5
    .catch(err => console.error(err));
6

7
// Async / Await (the more recommended approach)
8
async function fetchData() {
9
    try {
10
        const res = await fetch('https://api.example.com/data');
11
        const data = await res.json();
12
        console.log(data);
13
    } catch (err) {
14
        console.error('Request failed:', err);
15
    }
16
}

5. How the Three Work Together#

A real front-end page is a collaborative work of HTML, CSS, and JavaScript:

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Trio collaboration example</title>
6
    <!-- CSS -->
7
    <style>
8
        body { font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
9
        .counter { display: flex; align-items: center; gap: 16px; }
10
        #count { font-size: 2rem; font-weight: bold; }
11
        button { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; }
12
        .plus { background: #4CAF50; color: white; }
13
        .minus { background: #f44336; color: white; }
14
    </style>
15
</head>
16
<body>
17
    <h1>Counter</h1>
18
    <!-- HTML: structure -->
19
    <div class="counter">
20
        <button class="minus" onclick="decrement()">-</button>
21
        <span id="count">0</span>
22
        <button class="plus" onclick="increment()">+</button>
23
    </div>
24

25
    <!-- JavaScript: behavior -->
26
    <script>
27
        let count = 0;
28
        const countEl = document.getElementById('count');
29

30
        function increment() {
31
            count++;
32
            countEl.textContent = count;
33
        }
34

35
        function decrement() {
36
            count--;
37
            countEl.textContent = count;
38
        }
39
    </script>
40
</body>
41
</html>

See that? HTML builds the frame, CSS paints the look, and JavaScript gives it a brain. Each of the three has its own role, and together they make up every web page you see in your browser.

6. Suggested Learning Path#

Stage	Content	Suggested Duration
Beginner	Common HTML tags + CSS selectors + JS variables and functions	2–3 weeks
Intermediate	CSS layout (Flex/Grid) + JS DOM manipulation + events	3–4 weeks
Practical	Responsive design + AJAX/Fetch + ES6 syntax	4–6 weeks
Frameworks	React or Vue (pick one to start)	8–12 weeks

Advice: Don’t try to learn everything at once. First master HTML and CSS to build static pages, then learn JavaScript to add interactivity, and only then move on to frameworks. The more solid your fundamentals, the easier frameworks will be to learn.

7. Summary#

HTML, CSS, and JavaScript—this “holy trinity”—are the cornerstones of front-end development. No matter what frameworks you use later (React, Vue, Angular) or what tools you write with (Webpack, Vite), the final output is always these three things.

Just remember this analogy: HTML is the skeleton, CSS is the skin, and JavaScript is the soul.