GUIDES / DEVELOPMENT

HTML, CSS and JavaScript: the in-depth guide

← All guides
Development Beginner 4 Jun 2026 12 min read by Les Techniciens du Net

HTML, CSS and JavaScript: the in-depth guide

The web's core trio, in depth: structure with HTML, style with CSS (box model, Flexbox, Grid), make it interactive with JavaScript (DOM, events, fetch). From beginner to intermediate, with examples.

#developpement#html#css#javascript

In brief

Every website rests on the same core trio: HTML structures the content, CSS styles it, JavaScript makes it interactive. The overview of web languages introduces them; this guide goes further, from beginner to intermediate, with concrete examples. It is the foundation that every framework builds on underneath.

HTML — structuring the content

HTML describes what each piece of content is using tags. An element often has an opening tag, some content, a closing tag, and sometimes attributes.

<a href="https://example.com" title="Visit">My link</a>

Here <a> is the element (a link), href and title are attributes, and “My link” is the content.

The structure of a page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>My first paragraph.</p>
  </body>
</html>

The <head> contains the information (title, encoding, links to the CSS); the <body> contains the visible content.

Semantic tags (intermediate level)

Rather than stacking generic <div> elements, you use tags that carry meaning: <header>, <nav>, <main>, <article>, <section>, <footer>. This improves accessibility (screen readers) and SEO (engines understand the page better).

  • Links and images: <a href="...">, <img src="..." alt="description">. The alt attribute is essential (accessibility + SEO).
  • Lists: <ul> (bulleted), <ol> (numbered), with <li> items.
  • Forms: <form>, <label>, <input> (with types: text, email, tel, checkbox…), <button>. Associating a <label> with its field is a good accessibility practice.

CSS — styling

CSS applies style rules to elements chosen by a selector.

p { color: #333; font-size: 16px; }       /* all paragraphs */
.intro { font-weight: bold; }              /* elements with the "intro" class */
#menu { background: #f5f5f5; }             /* the element with id "menu" */

When several rules apply, specificity decides (an #id wins over a .class, which wins over a tag).

The box model

Every element is a box made up, from the inside out, of: content → padding (inner spacing) → border → margin (outer spacing). Understanding it solves 80% of layout problems.

Units and colours

  • px (pixels, fixed), % (relative to the parent), em/rem (relative to font size).
  • Colours: #0B66FF, rgb(11,102,255), or a name (red).

Flexbox and Grid (intermediate level)

Two modern layout systems:

  • Flexbox — to align elements along one dimension (a row or a column). Perfect for a navigation bar.
  • Grid — for layouts in two dimensions (rows and columns). Perfect for a grid of cards.
.bar { display: flex; gap: 16px; justify-content: space-between; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

Responsive and variables

  • Responsive (mobile adaptation) with media queries, starting from mobile (mobile-first):
@media (min-width: 768px) { .grid { grid-template-columns: repeat(4, 1fr); } }
  • CSS variables (custom properties) to centralise reused values:
:root { --blue: #0B66FF; }
a { color: var(--blue); }

JavaScript — making it interactive

JavaScript adds the behaviour: reacting to clicks, modifying the page, exchanging data with a server.

Variables, types, functions

const name = "Marie";       // will not be reassigned
let counter = 0;            // can change
counter = counter + 1;

function greet(firstName) {
  return "Hello " + firstName;
}

Common types: text (string), number, boolean (true/false), array ([]), object ({}).

The DOM: reading and modifying the page

The DOM is the representation of the page that JavaScript can manipulate.

const title = document.querySelector("h1");
title.textContent = "Modified title";

Events

const button = document.querySelector("#submit");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

Retrieving data: fetch and async (intermediate level)

To exchange data with an API, you use fetch(). Since the response arrives later, you use async/await:

async function loadWeather() {
  const response = await fetch("https://api.example.com/weather");
  const data = await response.json();
  console.log(data.temperature);
}

Data often arrives as JSON, a simple text format that JavaScript reads natively.

How the three fit together

Picture a “Like” button: HTML declares it (<button>), CSS colours and rounds it, JavaScript listens for the click and updates the counter. Each stays in its role — it is this separation of structure / style / behaviour that keeps a site maintainable.

Where to start and practise

  1. A simple text editor and a browser are enough: no complicated setup.
  2. Open the browser’s developer tools (the F12 key) to inspect the HTML, test CSS live and read the JavaScript console.
  3. Move forward in small steps: one page, one style, one interaction. Then combine.
  4. As your projects grow, moving to a framework will rely exactly on these foundations.

Key takeaways

HTML structures, CSS dresses, JavaScript animates — three complementary roles. By mastering semantic tags, the box model, Flexbox/Grid, then the DOM, events and fetch, you hold the foundation of all web development. Everything else, frameworks included, is built on top of it.

Test your knowledge

0 / 6

  1. What is the `alt` attribute of an image in HTML for?

  2. The 'box model' in CSS describes…

  3. To lay out elements in two dimensions (rows AND columns), you would rather use…

  4. In JavaScript, `const` declares…

  5. The DOM is…

  6. The `fetch()` function is used to…