AdvancedWeb DevelopmentIntermediate

JavaScript : rendre un site vivant et interactif

Un catalogue interactif avec panier et commande WhatsApp, codé en JavaScript par toi

  • 16 h of training
  • 6 modules · 30 lessons
  • 83 exercises
  • 2 projects
  • Certificate included

What you will be able to do

  • JavaScript moderne ES2015+ (let, const, fonctions fléchées, déstructuration, template literals)
  • Traitement de données avec tableaux et objets (map, filter, reduce, JSON)
  • Manipulation du DOM et gestion des événements
  • Validation de formulaires et persistance avec localStorage
  • Appels d'API asynchrones avec fetch et async/await
  • Organisation en modules ES et débogage avec les outils de développement

What you will produce

  • Une bibliothèque de fonctions utilitaires testées : formatage FCFA, calcul de TVA, validation de numéros
  • Un calculateur de devis interactif relié à un formulaire
  • Un formulaire d'inscription validé en direct avec messages d'erreur clairs
  • Une page qui affiche des données chargées depuis une API publique, avec état de chargement et gestion d'erreur
  • Un catalogue en ligne avec recherche, filtres et panier persistant
  • Une commande WhatsApp préremplie générée à partir du panier
  • Un dépôt GitHub organisé en modules ES avec un README

Possible earnings

Avec HTML, CSS et JavaScript, un freelance débutant peut facturer 200 000 à 500 000 FCFA un site vitrine avec calculateur, formulaire avancé ou catalogue interactif, et ajouter des modules ponctuels à 50 000 à 150 000 FCFA chez des PME de Dakar ou d'Abidjan en 2026 ; ton portfolio et tes clients te placent dans la fourchette.

Indicative estimate, depending on your market, pace and work. No income is guaranteed.

Tools used

  • VS Code
  • Google Chrome et ses outils de développement
  • JavaScript (ES2023)
  • Node.js pour exécuter des scripts
  • JSON
  • localStorage
  • Fetch API
  • GitHub
  • Netlify

What you'll learn

  • Écrire du JavaScript moderne lisible : variables, types, conditions, boucles et fonctions
  • Manipuler des tableaux et des objets avec map, filter, reduce et find pour traiter des données réelles
  • Sélectionner et modifier le DOM et réagir aux événements utilisateur
  • Valider des formulaires et calculer des montants en FCFA sans erreur d'arrondi
  • Mémoriser un état dans le navigateur avec localStorage
  • Charger des données depuis une API avec fetch et async/await, en gérant erreurs et chargement
  • Organiser son code en modules ES et le déboguer avec la console et les points d'arrêt

Prerequisites

  • Niveau 2 du parcours (HTML et CSS : créer et mettre en page un vrai site) recommandé, ou savoir intégrer une page responsive en HTML et CSS
  • Un ordinateur avec VS Code et Google Chrome installés
  • Aucune connaissance préalable en JavaScript
  • 4 heures par semaine pendant 4 à 5 semaines

About this course

## Passe du site qui s'affiche au site qui répond Un site vitrine montre. Un site en JavaScript agit : il calcule un devis en direct, vérifie un numéro de téléphone avant l'envoi, garde un panier en mémoire, affiche les produits depuis un fichier de données et prépare une commande WhatsApp toute rédigée. C'est ce qui sépare une page à 150 000 FCFA d'un outil qu'une PME utilise tous les jours. ### À qui s'adresse cette formation - Tu as suivi le niveau 2 (HTML et CSS) ou tu sais intégrer une page responsive. - Tu as déjà copié-collé du JavaScript sans vraiment le comprendre, et ça te gêne. - Tu veux préparer React et Next.js sur des bases solides, pas sur du bricolage. ### Ce que tu fais pendant la formation - Tu apprends le langage pas à pas : variables, types, conditions, boucles, fonctions, tableaux et objets, avec des exercices de code corrigés automatiquement. - Tu manipules le DOM et tu réagis aux clics, aux saisies et aux envois de formulaire. - Tu valides des formulaires, tu calcules des montants en FCFA et tu mémorises des données dans le navigateur. - Tu appelles des API avec `fetch` et `async/await`, tu gères les erreurs réseau et les connexions lentes. - Tu organises ton code en modules et tu apprends à déboguer méthodiquement. ### Ce avec quoi tu repars Un calculateur de devis interactif et un catalogue en ligne avec recherche, filtres, panier persistant et commande WhatsApp préremplie, publiés en ligne et présentables à un client. ### Ta place dans le parcours Développement web C'est le niveau 3 : après le niveau 2 (HTML et CSS : créer et mettre en page un vrai site), avant le niveau 4 (React et Next.js : construire des applications web modernes). Le niveau 5, Développeur full-stack, survole JavaScript en deux modules ; ici tu y consacres seize heures.

Who it is for: Intégrateurs HTML et CSS, étudiants en informatique, autodidactes et freelances de Dakar, Abidjan, Bamako, Cotonou ou de la diaspora qui savent monter une page et veulent la rendre interactive : calculs, formulaires, panier, données chargées depuis une API.

Curriculum

A module-by-module path: lessons, exercises, quizzes and projects to submit.

  1. Module 1· 13 exercises

    Les bases du langage

    Tu écris tes premiers programmes en JavaScript avec des variables, des types, des conditions et des boucles, et tu lis les messages d'erreur sans paniquer.

    • Où s'exécute JavaScript : navigateur, console et fichier relié à la pageFree preview15 min
    • Variables et types : let, const, nombres, chaînes et booléensFree preview18 min
    • Conditions et opérateurs : décider selon un montant ou une zone de livraisonFree preview18 min
    • Boucles : répéter un calcul sur une liste de commandesFree preview15 min
    • Support du module (PDF)Free preview5 min
    • Quiz : les bases du langageModule quiz

  2. Module 2· 14 exercises

    Fonctions, tableaux et objets

    Tu découpes ton code en fonctions réutilisables et tu traites des listes de produits ou de clients avec les méthodes de tableau.

    • Fonctions : paramètres, valeur de retour et fonctions fléchées18 min
    • Tableaux et méthodes : map, filter, find et reduce20 min
    • Objets, déstructuration et JSON18 min
    • Nombres, dates et montants en FCFA : formater sans erreur15 min
    • Support du module (PDF)5 min
    • Quiz : fonctions, tableaux et objetsModule quiz

  3. Module 3· 13 exercises

    Le DOM et les événements

    Tu modifies la page depuis JavaScript et tu réagis aux clics, aux saisies et au défilement.

    • Le DOM : sélectionner des éléments et modifier leur contenu18 min
    • Créer des éléments et afficher une liste à partir d'un tableau18 min
    • Événements : click, input, submit et délégation18 min
    • Classes CSS dynamiques : onglets, menu mobile et accordéon15 min
    • Support du module (PDF)5 min
    • Quiz : le DOM et les événementsModule quiz

  4. Module 4· 14 exercises

    Formulaires, validation et stockage local

    Tu construis des formulaires qui guident l'utilisateur et tu mémorises des données dans le navigateur.

    • Lire un formulaire avec FormData et empêcher l'envoi par défaut15 min
    • Valider en direct : numéros sénégalais et ivoiriens, emails et champs obligatoires18 min
    • Calculs dynamiques : devis, remises, TVA à 18 % et frais de livraison18 min
    • localStorage : garder un panier ou un brouillon après fermeture de la page15 min
    • Support du module (PDF)5 min
    • Quiz : formulaires, validation et stockageModule quiz
    • Calculateur de devis pour un prestataire de DakarProject to submit

  5. Module 5· 15 exercises

    Asynchrone, fetch et API

    Tu charges des données depuis un fichier JSON ou une API publique, en gérant l'attente, les erreurs et les connexions lentes.

    • Comprendre l'asynchrone : event loop, callbacks et Promises18 min
    • async et await : écrire de l'asynchrone lisible15 min
    • fetch : charger un fichier JSON et une API publique18 min
    • États de chargement, erreurs réseau et connexions 3G15 min
    • Support du module (PDF)5 min
    • Quiz : asynchrone, fetch et APIModule quiz

  6. Module 6· 14 exercises

    Organiser, déboguer et publier

    Tu structures un vrai projet en modules, tu corriges les bugs avec méthode et tu publies une application propre.

    • Modules ES : import, export et découpage d'un projet15 min
    • Déboguer avec méthode : console, points d'arrêt et onglet Réseau18 min
    • Gérer les erreurs : try, catch et messages utiles pour l'utilisateur15 min
    • Bonnes pratiques, README et mise en ligne d'une application JavaScript15 min
    • Support du module (PDF)5 min
    • Quiz : organiser, déboguer et publierModule quiz
    • Projet final : catalogue interactif avec panier et commande WhatsAppCapstone

  7. Certificate included

Your certificate at the end

A numbered certificate with your validated skills, a public page and a verification QR code. Add it to LinkedIn in one click.

Kolonell Academy
Verified by Kolonell Academy

Certificate of skills

Your name

has completed and validated the course

JavaScript : rendre un site vivant et interactif

Certified skills

  • JavaScript moderne ES2015+ (let, const, fonctions fléchées, déstructuration, template literals)
  • Traitement de données avec tableaux et objets (map, filter, reduce, JSON)
  • Manipulation du DOM et gestion des événements
  • Validation de formulaires et persistance avec localStorage
  • Appels d'API asynchrones avec fetch et async/await
  • Organisation en modules ES et débogage avec les outils de développement

Number KOL-CERT-2026-XXXXX

Mohamed Bah

Founder, Kolonell Academy

Poster for JavaScript : rendre un site vivant et interactif

Course poster

Download the poster to print it, send it to your employer or share it with colleagues. The full programme details every module.

Download PNGDownload PDFFull programme (PDF)

This course is part of the track

Développement web

Level 3 of 5 · Advanced

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
See the 5 track levels

Next level · 4/5 Career

React et Next.js : construire des applications web modernes

The full job, with a portfolio

Deux applications React et Next.js en ligne dans ton portfolio

100,000 FCFA 24 h

View the next level

Your instructor

Mohamed Bah

Docteur en informatique et fondateur de Kolonell, agence-plateforme digitale basée à Dakar. Il conçoit et déploie des sites et des applications web pour des PME au Sénégal, en Côte d'Ivoire et dans la diaspora, avec les outils enseignés dans ce parcours.

Questions about this course

Je n'ai jamais fait de JavaScript. Est-ce trop avancé pour moi ?

Non. Le module 1 part de zéro sur le langage. Il suppose seulement que tu saches écrire une page en HTML et CSS, ce qui est l'objet du niveau 2 du parcours.

Les exercices de code sont-ils corrigés ?

Oui. Chaque exercice de code est vérifié automatiquement par des tests dans ton navigateur : tu vois tout de suite ce qui passe et ce qui échoue, avec un message qui t'indique quoi corriger.

Pourquoi ne pas passer directement à React ?

Parce que React, c'est du JavaScript. Les développeurs qui sautent cette étape bloquent sur map, les objets, l'asynchrone et les erreurs réseau. Seize heures ici t'en font gagner beaucoup au niveau 4.

Est-ce qu'on fait du back-end ou des bases de données ?

Non. Tout se passe dans le navigateur, avec localStorage et des API publiques. Le serveur, les bases de données et l'authentification sont traités au niveau 5, Développeur full-stack.

Le panier peut-il encaisser un paiement Wave ?

Pas dans ce niveau. Le panier génère une commande WhatsApp préremplie, ce qui correspond à la façon dont beaucoup de boutiques vendent au Sénégal. Un vrai encaissement en ligne demande un serveur, vu au niveau 5.

Combien de temps faut-il prévoir ?

Environ 16 heures avec les exercices et les deux projets. À 4 heures par semaine, compte 4 à 5 semaines.

How do I pay?

Via Wave or Orange Money. After enrolling you receive a pro forma invoice by email with the number to pay. Send the proof on WhatsApp: your access is activated within 24 business hours.

How long do I keep access?

For life, updates included. Learn at your own pace and revisit lessons as often as you need.

How do I get the certificate?

Complete the lessons and pass each module quiz with at least 70%. The certificate is generated automatically, with a unique number and a public verification page.

Our commitments

  • Lifetime access, updates included
  • Publicly verifiable certificate
  • Wave / Orange Money payment, activation within 24 business hours
  • WhatsApp support

75,000 FCFA · 115 €

Advanced