⭐ Projet Vedette

Le Globule - Site Éducatif HTML/CSS

Site web éducatif multi-pages avec design system CSS avancé, navigation complexe avec sous-menus, et optimisation WebP. Projet démontrant la maîtrise des fondamentaux HTML/CSS/JS avec architecture component-based, classes utilitaires réutilisables, colonnes CSS, et design responsive complet. Menu hamburger mobile, grille CSS pour layouts complexes, et système de couleurs cohérent avec variables CSS.

Janvier 2026

HTML5CSS3JavaScript ES6DockerApacheWebPResponsive DesignCSS GridFlexboxCSS Variables

Code source

Métriques du Projet

27+

Pages

Sous-menus

Composants JS

20+

Variables CSS

Vue d'ensemble

Ce projet démontre une maîtrise approfondie des fondamentaux web avec un site multi-pages comportant une navigation complexe à trois niveaux (Triangle, Choix, Surtriangle), chacun avec trois sous-sections. L'architecture repose sur un design system CSS cohérent avec variables personnalisées pour couleurs et espacements, des classes utilitaires réutilisables, et un système de composants JavaScript modulaire. Le site implémente un menu responsive avec overlay mobile, des colonnes CSS pour textes en deux colonnes, et un système d'images WebP optimisées avec srcset. La mise en page utilise Flexbox et Grid CSS pour des layouts complexes, avec un focus sur la réutilisabilité du code et les bonnes pratiques.

Fonctionnalités Clés

Navigation Multi-Niveaux Complexe

Système de navigation à 3 niveaux (Triangle, Choix, Surtriangle) avec 9 sous-menus interactifs. Chaque sous-menu affiche une grille 2 colonnes avec liste de liens et image illustrative. Menu hamburger mobile avec overlay semi-transparent et animation slide. Support clavier complet et aria-labels pour accessibilité.

Design System CSS Avancé

Variables CSS centralisées (:root) pour couleurs (--color-blanc, --color-139c19, --color-19b123), espacements (--spacing), et typographie (--font-xl). Classes utilitaires réutilisables (.text-centre, .max-width-960px, .bg-linear-to-b). Nomenclature cohérente et système de couleurs vert/rouge/jaune/bleu pour théming.

Layouts CSS Sophistiqués

Colonnes CSS pour textes en deux colonnes avec column-rule personnalisé (2px solid). Flexbox pour header/footer et navigation horizontale. Grid CSS pour cartes de contenu et layouts complexes. Aspect-ratio pour maintenir proportions. Responsive complet avec breakpoints md: pour tablet/desktop.

Architecture JavaScript Modulaire

Composants ES6 réutilisables (HeaderComposant, FooterComposant, CardComposant). Gestion d'événements pour menu mobile avec toggle et overlay. Template literals pour génération dynamique du DOM. Module pattern pour encapsulation du code. Chargement différé avec type='module'.

Images WebP Multi-Formats

Élément <picture> avec sources WebP et fallback JPEG. Srcset responsive avec 3 tailles (480w, 768w, 960w) pour optimisation mobile. Attributs width/height explicites pour éviter CLS. Lazy loading avec loading='lazy'. Scripts bash pour génération automatique des variantes.

Menu Mobile Interactif

Burger menu avec icône SVG animée (X au clic). Overlay semi-transparent (#111 opacity) pour focus. Navigation verticale sur mobile, horizontale sur desktop. Transitions CSS smooth sur ouverture/fermeture. Z-index gestion pour layering correct. Support touch et click.

Défis Relevés

Créer une navigation complexe à 3 niveaux avec sous-menus déroulants et images illustratives
Implémenter un menu hamburger mobile avec overlay et transitions smooth
Développer un design system CSS avec variables pour couleurs, tailles et espacements cohérents
Optimiser les images avec WebP et srcset multi-tailles (480w, 768w, 960w)
Créer des layouts complexes avec colonnes CSS et column-rule personnalisé
Assurer la réutilisabilité du code avec classes utilitaires et composants JavaScript
Gérer la containerisation Docker avec Apache pour un déploiement professionnel

Exemples de Code

HTML Structure

CSS Styles

JavaScript de mise en page responsive

Dockerfile

Apache Configuration

Intéressé par ce projet ?

Consultez le code source ou visitez le site en ligne pour voir le résultat final.

Code source