The Three Languages of the Web

Every website you've ever visited is built with three languages working together: HTML, CSS, and JavaScript. HTML creates the structure (what's on the page), CSS controls the presentation (how it looks), and JavaScript adds interactivity (what it does). Learning these three languages opens the door to building anything on the web.

This crash course teaches you all three languages back-to-back, with code examples you can run instantly in HCODX. No setup, no installation — just open hcodx.com/editor and follow along.

Part 1: HTML — The Structure

HTML (HyperText Markup Language) uses tags to define elements on a page. Tags look like <tagname>content</tagname>.

The HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Essential HTML Tags

  • <h1> to <h6> — headings (h1 is largest)
  • <p> — paragraph text
  • <a href="url"> — hyperlink
  • <img src="url" alt="text"> — image (self-closing)
  • <ul> / <ol> — unordered/ordered list; <li> for list items
  • <div> — generic block container
  • <span> — generic inline container
  • <button> — clickable button
  • <input type="text"> — text input field
  • <form> — form container

Semantic HTML5 Tags

<header>  — top of page / section header
<nav>     — navigation menu
<main>    — primary page content
<section> — thematic section
<article> — self-contained content
<aside>   — sidebar content
<footer>  — bottom of page / section

Using semantic tags makes your HTML more accessible, more readable, and better for SEO.

HTML Attributes

<a href="https://example.com" target="_blank" rel="noopener">
    Open in new tab
</a>

<img src="photo.jpg" alt="Description of image" width="400" height="300">

<input type="email" placeholder="Enter your email" required>

<div class="card" id="main-card" data-product-id="42">
    Content here
</div>

💡 HTML Practice Exercise

In HCODX, build a simple personal bio page: add your name as an <h1>, write a short paragraph about yourself, add an unordered list of 3 hobbies, and include a link to your favorite website. This exercises <h1>, <p>, <ul>, <li>, and <a> tags.

Part 2: CSS — The Style

CSS (Cascading Style Sheets) controls how HTML elements look. In HCODX, write CSS in the CSS panel — it applies to your HTML automatically.

CSS Syntax

selector {
    property: value;
}

Selecting and Styling Elements

/* Style all h1 elements */
h1 {
    color: #1a1a2e;
    font-size: 2.5rem;
    font-weight: 800;
}

/* Style elements with class="card" */
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Style element with id="hero" */
#hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Hover state */
.btn:hover {
    background: #4f46e5;
    transform: translateY(-2px);
}

The CSS Box Model

.box {
    width: 300px;
    height: 200px;
    padding: 20px;         /* space inside */
    border: 2px solid #ccc; /* border around */
    margin: 16px auto;     /* space outside; auto centers horizontally */
    box-sizing: border-box; /* includes padding+border in width */
}

Flexbox Layout

.navbar {
    display: flex;
    justify-content: space-between; /* items spread across */
    align-items: center;            /* vertically centered */
    gap: 16px;                      /* space between items */
    padding: 0 24px;
    height: 60px;
}

.card-row {
    display: flex;
    flex-wrap: wrap;   /* wrap to next line if needed */
    gap: 20px;
}

CSS Grid Layout

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 24px;
}

/* Responsive: 1 column on mobile, 3 on desktop */
@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr; }
}

Part 3: JavaScript — The Interactivity

JavaScript (JS) makes pages interactive. In HCODX, write JavaScript in the JS panel — it runs in the preview automatically.

Variables and Data

const name = "Alice";     // string
const age = 25;           // number
const isLoggedIn = true;  // boolean
let score = 0;            // let: can be reassigned
const items = ["a","b"]; // array
const user = { name: "Alice", age: 25 }; // object

Functions

function greet(name) {
    return "Hello, " + name + "!";
}

// Arrow function
const double = n => n * 2;

// Call them
console.log(greet("World")); // "Hello, World!"
console.log(double(5));      // 10

DOM Manipulation — Making HTML Interactive

// In HTML panel: <button id="btn">Click Me</button>
//               <p id="msg"></p>

const btn = document.getElementById("btn");
const msg = document.getElementById("msg");

btn.addEventListener("click", function() {
    msg.textContent = "Button was clicked! 🎉";
    msg.style.color = "green";
    msg.style.fontWeight = "bold";
});

Putting It All Together — A Complete Mini Project

Here's a complete counter app using all three languages:

/* HTML */
<div class="counter-app">
    <h2>Counter</h2>
    <div class="count" id="count">0</div>
    <div class="buttons">
        <button id="dec">−</button>
        <button id="reset">Reset</button>
        <button id="inc">+</button>
    </div>
</div>

/* CSS */
.counter-app { text-align: center; padding: 40px; font-family: system-ui; }
.count { font-size: 4rem; font-weight: 800; margin: 20px 0; }
.buttons { display: flex; gap: 12px; justify-content: center; }
button { padding: 12px 24px; font-size: 1.2rem; border: none;
         border-radius: 8px; cursor: pointer; background: #6366f1; color: white; }
button:hover { background: #4f46e5; }

/* JavaScript */
let count = 0;
const display = document.getElementById("count");
document.getElementById("inc").addEventListener("click", () => {
    count++; display.textContent = count;
});
document.getElementById("dec").addEventListener("click", () => {
    count--; display.textContent = count;
});
document.getElementById("reset").addEventListener("click", () => {
    count = 0; display.textContent = count;
});

What to Learn Next

  • HTML: Forms, tables, media elements, accessibility attributes
  • CSS: Animations, custom properties, CSS Grid advanced patterns, dark mode
  • JavaScript: Fetch API, async/await, ES6 modules, classes, local storage
  • Tools: Git version control, npm, webpack or Vite
  • Frameworks: React, Vue, or Svelte for building larger applications

Related Articles

Write CSS Online Guide Learn JavaScript Online HTML Editor for Beginners Build a Landing Page Build Your First Website

Conclusion

HTML, CSS, and JavaScript are the three pillars of every website. HTML provides structure, CSS adds style, and JavaScript enables interaction. You now have a working knowledge of all three — enough to build real things. The best way to solidify what you've learned is to build: a personal page, a small game, a simple app. Open HCODX, paste the counter example above, then modify it and make it your own. That's how every great web developer started.

Practice HTML, CSS & JavaScript Right Now

Open HCODX and build the counter app from this tutorial — free, instant, no signup

Start Coding →