Module 1 : Cahier des charges et maquettage
1.1 — Définir le projet Aperçu
Module 2 : Structure HTML5 sémantique
2.1 — Coder la structure Aperçu
Module 3 : Design CSS3 responsive — Mobile First
3.1 — Styliser le portfolio Aperçu
Module 4 : Interactivité JavaScript
4.1 — Dynamiser le portfolio Aperçu
Module 5 : Optimisation et performance
5.1 — Rendre le site rapide Aperçu
Module 6 : Déploiement et présentation finale
6.1 — Mettre en ligne et présenter Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 4 : Interactivité JavaScript Aperçu gratuit

4.1 — Dynamiser le portfolio

📋 Objectifs

  • Validation du formulaire en temps réel
  • Filtre des projets par catégorie
  • Menu hamburger mobile
  • Dark mode toggle avec localStorage
  • Animations au scroll (Intersection Observer)
  • Bouton "Retour en haut"

Scripts à implémenter

// 1. Menu hamburger
menuBtn.addEventListener("click", () => nav.classList.toggle("active"));

// 2. Dark mode toggle + localStorage
darkBtn.addEventListener("click", () => {
    document.body.classList.toggle("dark");
    localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light");
});

// 3. Filtre projets
filterBtns.forEach(btn => btn.addEventListener("click", () => {
    const cat = btn.dataset.category;
    projets.forEach(p => p.style.display = cat === "all" || p.dataset.cat === cat ? "block" : "none");
}));

// 4. Validation formulaire temps réel
email.addEventListener("input", () => { /* validation */ });

// 5. Scroll to top
window.addEventListener("scroll", () => topBtn.style.display = window.scrollY > 300 ? "block" : "none");

💡 Intersection Observer

Pour animer les sections quand elles deviennent visibles au scroll, sans librairie externe. new IntersectionObserver(callback).observe(element).

Ceci est un aperçu gratuit.
Voir la formation complète