Payment by bank transfer · Moroccoتعلَّم · مارِس · أتقِن

Catalogue / Development

Web Development: HTML, CSS and JavaScript

Build modern websites from A to Z: semantic HTML, CSS (Flexbox, Grid, responsive design), JavaScript, the DOM, fetch and REST APIs, up to the complete website of a riad.

  • Beginner to intermediate
  • 17 lessons
  • 17 h 20 min

A MasterLinux course · Original text

What you will learn

  • Understand what happens between the browser and the server (DNS, HTTP, HTTPS)
  • Write semantic, accessible HTML pages with forms and tables
  • Style pages with CSS and master the cascade, specificity and the box model
  • Build responsive layouts with Flexbox, Grid and media queries
  • Program in modern JavaScript (functions, arrays, objects, classes, modules)
  • Handle asynchronous code with promises and async/await
  • Manipulate the DOM and talk to a REST API with fetch
  • Ship a fast, accessible and secure website, with npm, a formatter and a linter

Course content

17 lessons · 17 h 20 min
Section 1 — HTML and CSS6 lessons · 4 h 50 min
  1. How the web works: client, server, DNS, HTTP and browser Preview40 min
  2. HTML: page structure, semantic tags, links and images Preview45 min
  3. HTML : formulaires, tableaux et accessibilité 50 min
  4. CSS : sélecteurs, cascade, spécificité, modèle de boîte, unités, couleurs et polices 55 min
  5. Mise en page : Flexbox 45 min
  6. Mise en page : Grid et responsive design (media queries, mobile d'abord) 55 min
Section 2 — JavaScript5 lessons · 4 h 45 min
  1. JavaScript 1 : variables, types, opérateurs et conditions 55 min
  2. JavaScript 2 : fonctions, portée et fonctions fléchées 50 min
  3. JavaScript 3 : tableaux et objets, map, filter, reduce et JSON 1 h
  4. JavaScript 4 : classes, modules ES et gestion des erreurs 1 h
  5. JavaScript asynchrone : callbacks, promesses et async/await 1 h
Section 3 — Browser and network3 lessons · 2 h 55 min
  1. Le DOM : sélectionner, modifier, créer des éléments et réagir aux événements 1 h
  2. fetch et les API REST : JSON, codes HTTP et CORS 1 h
  3. Stockage navigateur (localStorage, cookies) et sécurité de base (XSS, HTTPS) 55 min
Section 4 — Quality2 lessons · 1 h 50 min
  1. Outils du développeur front : npm, Vite, formatage, linting et débogage 55 min
  2. Performance et accessibilité : Lighthouse, images et chargement 55 min
Section 5 — Project1 lesson · 3 h
  1. Projet : le site complet d'un riad (accueil, chambres, réservation en JavaScript) 3 h

Requirements

  • Able to use a computer and a web browser
  • No programming knowledge required
  • Terminal basics help for the labs (the “Fundamentals” course is recommended)

Who is this course for?

  • Beginners who want to become web developers
  • Computer science students (BTS, DUT, bachelor’s degree) who want a solid, practical foundation
  • Shopkeepers, craftspeople and riad managers who want to understand and improve their website
  • System administrators who want to move into development