HTML CSS JS

Vue d'ensemble du Projet

Voir le Cours

WebFolio — Votre Portfolio Personnel

Le projet fil rouge de cette formation : construire un portfolio personnel interactif, responsive et moderne, de zéro, avec HTML, CSS et JavaScript.

Structure du Projet WebFolio

Organisation des fichiers du portfolio

text
webfolio/
├── index.html          — Page d'accueil (structure HTML)
├── css/
│   └── style.css       — Styles (variables, layout, responsive)
├── js/
│   └── script.js       — Interactivité (menu, filtres, formulaire)
├── images/
│   ├── photo.jpg       — Photo de profil
│   ├── project-1.webp  — Captures de projets
│   └── og-image.jpg    — Image pour les réseaux sociaux
└── favicon.ico         — Icône de l'onglet

SECTIONS DE LA PAGE :
─────────────────────
1. Header      — Logo + navigation fixe + menu hamburger (mobile)
2. Héro        — Présentation rapide + bouton CTA
3. À propos    — Photo + bio + parcours
4. Compétences — Barres de progression animées
5. Projets     — Galerie filtrable par catégorie
6. Contact     — Formulaire validé en JavaScript
7. Footer      — Copyright + liens sociaux

FONCTIONNALITÉS :
─────────────────
✓ Design responsive (mobile-first)
✓ Mode sombre avec sauvegarde localStorage
✓ Animations au scroll (IntersectionObserver)
✓ Projets GitHub chargés dynamiquement (Fetch API)
✓ Score Lighthouse > 90 partout
✓ Déployé sur GitHub Pages

HTML5 Sémantique

  • ✓ Structure sémantique (header, nav, main, section, footer)
  • ✓ Formulaire de contact accessible
  • ✓ Balises SEO et Open Graph
  • ✓ Validation W3C

CSS3 Moderne

  • → Variables CSS et thème cohérent
  • → Flexbox et CSS Grid
  • → Design responsive mobile-first
  • → Animations et transitions fluides

JavaScript ES6+

  • → Menu hamburger responsive
  • → Filtre de projets par catégorie
  • → Validation de formulaire
  • → Mode sombre avec localStorage

Déploiement

  • → Versionning avec Git
  • → Hébergement sur GitHub Pages
  • → Score Lighthouse 90+
  • → Portfolio accessible en ligne

Les 3 Langages du Web

L'analogie de la maison
  • HTML = la structure (murs, toit, pièces)
  • CSS = la décoration (peinture, meubles)
  • JavaScript = l'électricité (interrupteurs, alarme)
Outils nécessaires
  • Visual Studio Code (éditeur gratuit)
  • Chrome / Firefox (navigateur)
  • Live Server (extension VS Code)
  • Git & GitHub (déploiement)

Prêt à construire votre WebFolio ?

Suivez le cours étape par étape pour créer votre portfolio personnel de zéro

Commencer le Chapitre 0