Chapter 1

How the web works

Section 1.1

Client, server, and HTTP request

Before writing a line of code, understand what happens between the browser and the server.

Definition

Client and server

The client (your browser : Chrome, Firefox...) sends a request to a server (a remote computer hosting the site). The server responds by sending back the requested files (HTML, CSS, JS, images...) that the

Steps

What happens when you type a URL ?

The browser sends an HTTP request (GET) to the server matching the URL.
The server processes the request and sends back a response (status + files).
The browser parses the HTML, applies the CSS, then executes the JS.
The page displays on screen, ready to be interactive.

Remark

The three pillars of the front end

HTML (HyperText Markup Language) : the structure and the content (the skeleton).
CSS (Cascading Style Sheets) : the presentation (colors, layout, typography).
JavaScript : the behavior (interactivity, reacting to clicks, dynamic updates).

A useful analogy : HTML is the skeleton of a house, CSS the paint and decoration, JavaScript the electricity that makes it

Remark

Essential tools

A code editor (VS Code, for example) to write the files, and the browser's developer tools (F12 key) to inspect HTML/CSS live and see JavaScript errors in the console.

Chapter 2

HTML — Structuring a page

Section 2.1

Anatomy of an HTML document

The minimal skeleton every web page must contain.

Definition

HTML

The HTML describes the content of a page using tags (most often as an opening/closing pair) : <p>text</p>. A tag can carry attributes that refine its behavior, e.g. : <a href="...">.

Syntax

Minimal structure of a page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scal

<!DOCTYPE html> : tells the browser this is HTML5.
<head> : invisible metadata (tab title, encoding, links to CSS...).
<body> : everything visible on screen.

Remark

The meta viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1"> tells the mobile browser to display the page at its actual width rather than shrinking it — essential for any responsive site.

Section 2.2 – 2.3

Text, lists, links, and images

The most common content building blocks.

Syntax

Headings and paragraphs

<h1>Main title</h1>
<h2>Subtitle</h2>
<p>A paragraph of text.</p>

There are 6 heading levels (h1 to h6) — only one <h1> per page, then work down the hierarchy without skipping a level.

Syntax

Lists

<ul>
  <li>Unordered item</li>
</ul>

<ol>
  <li>Numbered item</li>
</ol>

ul (unordered list, bulleted) vs ol (ordered list, numbered) — each item is an <li>.

Syntax

Links and images

<a href="https://example.com">Visit</a>
<img src="photo.jpg" alt="Image description">

The alt attribute of an image is not optional : it's read by screen readers and shown if the image fails to load — essential for accessi

Remark

Attribute vs content

A attribute goes inside the opening tag (href, src, class, id...), always as name="value". The content goes between the opening and closing tag.

Section 2.4

Semantic tags

Describing the role of each area of the page, not just its appearance.

Definition

Semantic tag

A semantic tag clearly states the role of its content (e.g. : <nav> = navigation), unlike <div> which carries no particular meaning. They help browsers, search engines, and screen readers understand the page.

Syntax

Typical semantic structure of a page

<body>
  <header>
    <h1>Site name</h1>
    <nav><!-- navigation links --></nav>
  </header>

  <main>
    <section>
      <

<header> : header (logo, title, nav) — can appear multiple times (page or section).
<nav> : only for the large navigation link blocks.
<main> : the main content — only one per page.
<article> : self-contained content, independently distributable (article, post, product card).
<aside> : related but secondary content (related links, sidebar).
<footer> : page or section footer.

Section 2.5 – 2.6

Forms and tables

Collecting user data, and presenting tabular data.

Syntax

A simple form

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

 

<label for="..."> must match theid of the field : clicking the label then activates the field — important for accessibility.input types : text, email, password, number, checkbox, radio, date.

Syntax

A table

<table>
  <tr>
    <th>Name</th><th>Grade</th>
  </tr>
  <tr>
    <td>Ali</td><td>15</td>
  </tr>
</table>

<th> = column/row header, <td> = data cell, <tr> = row.

Careful

A table is not a layout tool

Before CSS, tables were used to position elements on a page — this should be avoided today. Reserve <table> for genuinely tabular data (financial data, comparisons...) and use CSS (Flexbox/Grid) for layout.

Chapter 3

CSS — Styling

Section 3.1

Selectors and syntax

Targeting elements to style, and understanding rule priority order.

Definition

CSS rule

A CSS rule pairs a selector (which elements to target) with declarations (property : value), inside braces :

selector {
  property: value;
}

Syntax

Types of selectors

Selector	Targets	Example
Type	All tags of this type	`p { color: navy; }`
Class	Elements with `class="..."`	`.card { padding: 16px; }`
ID	The unique element with this `id`	`#header { height: 60px; }`
Pseudo-class	A particular state	`a:hover { color: red; }`
Descendant	An element inside another	`nav a { text-decoration: none; }`

Remark

Priority order (specificity)

When several rules target the same element, the most specific wins : an ID (#id) beats a class (.class), which beats a type selector (p). At equal specificity, the rule declared last wins (hence the "C" in Cascading).

Section 3.2 – 3.3

The box model, colors, and units

Every HTML element is actually a rectangular box.

Definition

The box model

Every box is made up, from center outward, of : content (the content) → padding (inner spacing) → border (border) → margin (outer spacing, outside the box).

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 20px;
}

Careful

box-sizing : the classic trap

By default, width only counts the content : adding padding/border enlarges the box beyond the set width. The near-universal fix :

* { box-sizing: border-box; }

With border-box, width now includes padding and border : the box keeps its intended size.

Formula

Common units

px : pixels, fixed size.
% : relative to the parent.
em : relative to the parent element's font size.
rem : relative to the root (html) font size — more predictable, often preferred over em.
vh / vw : % of the visible window (viewport) height/width.

Formula

Colors and typography

p {
  color: #222831;              /* text color */
  background-color: rgb(240,240,245);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;

Colors are written in hexadecimal (#RRGGBB), rgb()/rgba() (with transparency), or by keyword (navy, tomato...).

Section 3.4 – 3.6

Positioning, Flexbox, and Grid

The two modern tools for organizing a layout.

Formula

The display property

block : takes up all available width, breaks the line (e.g. : div, p).
inline : takes only the width of its content, stays on the line (e.g. : span, a).
flex / grid : turns the element into a flexible/grid container for its children.
none : completely hides the element (it takes up no space).

Formula

position

static (default, in the normal flow) · relative (offset from its original position, with top/left...) · absolute (positioned relative to the nearest positioned ancestor) · fixed (fixed relative to the window, doesn't move on scroll).

Syntax

Flexbox — aligning on one axis

.container {
  display: flex;
  flex-direction: row;       /* or column */
  justify-content: center;   /* alignment on the main axis */
  align-items: center;       /* alignment on the cross axis */
  gap: 16px;                 /* spacing between elements */
}

Flexbox aligns a container's children along a single axis (row or column) : ideal for a navigation bar, centering an element, or spreading cards across a row.

Syntax

CSS Grid — aligning on two axes

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

Grid organizes children on rows and columns simultaneously : ideal for an image gallery, a dashboard, or any two-dimensional layout. The fr unit (fraction) distributes available space proportionally.

Remark

Flexbox or Grid ?

A single direction (row or column) → Flexbox. A two-dimensional grid (rows and columns) → Grid. In practice, the two are often combined on the same site.

Section 3.7

Responsive design

A page must adapt to every screen size, from mobile to large displays.

Definition

Media query

A media query applies CSS rules only if a condition about the screen is true (width, orientation...). It's the heart of responsive design.

Syntax

Mobile-first approach

.card {
  width: 100%;         /* base style, designed for mobile */
}

@media (min-width: 768px) {
  .card {
    width: 50%;         /* from 768px wide (tablet+) */
  }
}

In mobile-first, you write the style for small screens first, then add rules with min-width for larger screens — simpler to maintain than the reverse.

Chapter 4

JavaScript — Making a page interactive

Section 4.1 – 4.2

Variables, types, and control structures

The fundamentals of the language that runs in the browser.

Formula

let, const, var

Keyword	Scope	Reassignable?
`const`	Block `{ }`	No
`let`	Block `{ }`	Yes
`var`	Function (legacy, to avoid)	Yes

Common rule : use const by default, and let only if the variable needs to change value. Avoid var in modern code.

Formula

Basic types

const number = 42;              // number
const text = "Hello";        // string
const active = true;             // boolean
const nothing = null;              // deliberate absence of value
let undef;                   // undefined (no value yet)
const list = [1, 2, 3];        // array (object)
const obj = { name: "Ana" };   // object

Syntax

Conditions and loops

if (age >= 18) {
  console.log("Adult");
} else if (age >= 13) {
  console.log("Teenager");
} else {
  console.log("Child");
}

Syntax very close to the Python seen last semester, except for braces { } to delimit blocks (no mandatory indentation, though it remains good practice) and the semicolon at the end of a statement.

Section 4.3

Functions

Grouping reusable code — in classic or arrow form.

Syntax

Classic declaration

function addition(a, b) {
  return a + b;
}

addition(2, 3); // 5

Syntax

Arrow function

const addition = (a, b) => {
  return a + b;
};

// short form for a single expression:
const square = x => x * x;

Introduced in ES6 (2015), arrow functions are widely used for short functions and as callbacks (e.g. : in addEventListener).

Section 4.4 – 4.5

The DOM and events

Reading and modifying the page live, and reacting to user actions.

Definition

The DOM

The DOM (Document Object Model) is the representation of the HTML page as objects that JavaScript can manipulate. Modifying the DOM

Syntax

Selecting an element

const title = document.querySelector("h1");
const cards = document.querySelectorAll(".card"); // several elements

querySelector accepts any CSS selector (class, id, type...) and returns the first element found; querySelectorAll returns all matching elements.

Syntax

Modifying content and style

title.textContent = "New title";
title.style.color = "tomato";
title.classList.add("active");
title.classList.toggle("hidden");

Syntax

Listening for an event

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

button.addEventListener("click", () => {
  console.log("Button clicked!");
}

addEventListener(type, function) is the recommended way to listen for an event — it lets you attach multiple handlers to the same element. Common types : click, submit, input, keydown, mouseover.

Careful

The script must run after the HTML

If the <script> loads before the elements exist in the DOM, querySelector will return null. Solution : place the <script> just before </body>, or use the defer attribute on the <script> tag in the <head>.

Section 4.6

The basics : fetching data (fetch)

An overview — enough to understand the principle, without going into advanced details.

Syntax

fetch() — calling an API

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => con

fetch() sends an HTTP request from the browser's JavaScript and returns a Promise (a value available later). .then() processes the response once received; .catch() handles any network error.

Remark

Going further

The async/await syntax lets you write this same code in a more linear way, and modern frameworks (React, Vue...) build on these same foundations

Hands-on labs

Practice with mini-projects

Each exercise comes with an expandable correction — try it first, check afterward.

All

HTML Lab

CSS Lab

JS Lab

Lab 1

HTML

Structuring content with semantic tags.

HTML Lab · Ex 1

Exercise

Profile card

Create a page with a <header> tag (name + title), a profile picture, a short bio in <p>, a list of 3 skills in <ul>, and a <footer> with a contact link.

Correction

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Profile</title>
</head>
<body>
  <header>
    <h1>Sara Am

The roles are clearly separated : header for identity, main for the content, footer for contact — a clear semantic structure, even without a single line of CSS.

HTML Lab · Ex 2

Exercise

Contact form

A form with a name field, an email field, a message field, and a submit button. The name and email fields are required.

Correction

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <in

The required triggers native browser validation : submission is impossible without filling in these fields (no JavaScript needed for this

HTML Lab · Ex 3

Exercise

Grade table

A 3-column table (Subject, Grade, Coefficient) with 3 rows of data and one header row.

Correction

<table>
  <tr>
    <th>Subject</th><th>Grade</th><th>Coefficient</th>
  </tr>
  <tr>
    <td>Algorithms</td><td>15</td><td>3</td

Lab 2

CSS

Styling and laying out elements with Flexbox and Grid.

CSS Lab · Ex 1

Exercise

Styling the profile card

Take the profile card from the HTML lab : light background, rounded corners, subtle shadow, 100px round image, max width

Correction

* { box-sizing: border-box; }

body {
  display: flex;
  justify-content: center;
  padding: 40px;
  font-family: sans-serif;
  ba   /* perfect circle */
  object-fit: cover;
}

border-radius: 50% on a square image (equal width/height) produces a circle. object-fit: cover prevents the image from being distorted if its ratio doesn't match exactly.

CSS Lab · Ex 2

Exercise

Navigation bar with Flexbox

A horizontal bar : logo on the left, 3 menu links on the right, vertically centered.

Correction

<!-- HTML -->
<nav class="navbar">
  <span class="logo">MySite</span>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href

/* CSS */
.navbar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;
  padding: 16px 24px;
}

.navbar ul {
  display: flex;       /* links on one line */
  gap: 24px;
  list-style: none;
}

justify-content: space-between pushes the first element to the left and the last to the right, with space distributed between them — the classic pattern for a

CSS Lab · Ex 3

Exercise

Responsive card grid

Display 6 cards in a grid : 3 columns on large screens, 1 single column on mobile (under 600px).

Correction

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 600px) {
  .grid {
    gr  /* a single column */
  }
}

An even more flexible variant, without a media query : grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); — the grid automatically adjusts the number of columns based on available space.

Lab 3

JavaScript

Making the page interactive with the DOM and events.

JS Lab · Ex 1

Exercise

Click counter

A button and a text showing "0". Each click increments the displayed counter.

Correction

<!-- HTML -->
<p id="counter">0</p>
<button id="btn">Click</button>

<script>
  let count = 0;
  const display = document.qu

count lives in the JavaScript (not in the HTML) : on each click, the variable is updated and the display is synced with textContent.

JS Lab · Ex 2

Exercise

Simple form validation

Prevent a form from submitting if the email field is empty, and show an error message in that case.

Correction

<!-- HTML -->
<form id="myForm">
  <input type="text" id="email" placeholder="Email">
  <p id="error" style="color: red;">   // blocks submission
      error.textContent = "Email is required.";
    } else {
      error.textContent = "";
    }
  });
</script>

event.preventDefault() prevents the form's default behavior (reload/navigate) to leave control to JavaScript. .trim() removes whitespace before checking whether the field is truly empty.

JS Lab · Ex 3

Exercise

To-do list

An input field and an "Add" button : each added task appears in a list, and clicking a task strikes it through (done/not done

Correction

<!-- HTML -->
<input type="text" id="input" placeholder="New task">
<button id="add">Add</button>
<ul id="list"></   // ignore empty input

    const item = document.createElement("li");
    item.textContent = text;

    // toggle a task on click
    item.addEventListener("click", () => {
      item.classList.toggle("done");
    });

    list.appendChild(item);
    input.valu   // clear the field
  });
</script>

<style>
  .done { text-decoration: line-through; color: gray; }
</style>

A new <li> element is dynamically created with document.createElement(), its own click listener is attached, then it's inserted into the list with appendChild() — the basic pattern for any content generated in JavaScript.

Definition

Syntax / Formula

Example

Remark

Exercise

Correction

Key takeaways

★ Summary

What to absolutely remember

HTML structures the content; CSS styles it; JavaScript makes it interactive.

Semantic tags : header/nav/main/section/article/aside/footer describe the role of content, not just its appearance.

Box model : content → padding → border → margin; always remember box-sizing: border-box.

Flexbox for a single direction, Grid for two dimensions — often combined.

Responsive : mobile-first approach with media queries min-width.

JavaScript : const by default, querySelector to target, addEventListener to react.

Web Development HTML · CSS · JS.

How the web works

Client, server, and HTTP request

Client and server

What happens when you type a URL ?

The three pillars of the front end

Essential tools

HTML — Structuring a page

Anatomy of an HTML document

HTML

Minimal structure of a page

The meta viewport tag

Text, lists, links, and images

Headings and paragraphs

Lists

Links and images

Attribute vs content

Semantic tags

Semantic tag

Typical semantic structure of a page

Forms and tables

A simple form

A table

A table is not a layout tool

CSS — Styling

Selectors and syntax

CSS rule

Types of selectors

Priority order (specificity)

The box model, colors, and units

The box model

box-sizing : the classic trap

Common units

Colors and typography

Positioning, Flexbox, and Grid

The display property

position

Flexbox — aligning on one axis

CSS Grid — aligning on two axes

Flexbox or Grid ?

Responsive design

Media query

Mobile-first approach

JavaScript — Making a page interactive

Variables, types, and control structures

let, const, var

Basic types

Conditions and loops

Functions

Classic declaration

Arrow function

The DOM and events

The DOM

Selecting an element

Modifying content and style

Listening for an event

The script must run after the HTML

The basics : fetching data (fetch)

fetch() — calling an API

Going further

Practice with mini-projects

HTML

Profile card

Contact form

Grade table

CSS

Styling the profile card

Navigation bar with Flexbox

Responsive card grid

JavaScript

Click counter

Simple form validation

To-do list

What to absolutely remember

Web Development
HTML · CSS · JS.