Un projet éducatif et inspirant autour de l'univers et de l'exploration spatiale.
Conçu et développé par l'équipe AstroTech Studio dans le cadre du brief "CosmicExplore".
- Présentation du projet
- Objectifs pédagogiques
- Structure du site
- Technologies utilisées
- Méthodologie de travail
- Pages développées
- Fonctionnalités principales
- Responsive Design
- Déploiement
- Licence
CosmicExplore est un site web éducatif et interactif dédié à la découverte de l'univers.
Son objectif est d'inspirer les curieux et passionnés d'astronomie à travers une expérience immersive et accessible sur tous les appareils.
Le projet a été conçu selon la méthode Mobile First, avec une attention particulière à :
- L'accessibilité (WCAG)
- La cohérence visuelle (thème spatial)
- Les standards W3C
- Concevoir un site complet et responsive à partir de maquettes Figma
- Mettre en œuvre les bonnes pratiques HTML et CSS
- Gérer un projet web collaboratif avec Git & GitHub
- Développer des fonctionnalités interactives en JavaScript
- Déployer un site statique sur GitHub Pages
Le site comprend 5 pages obligatoires et 1 page additionnelle (plus éventuellement 2 bonus).
| Type de page | Nom | Description principale |
|---|---|---|
| Page 1 | Accueil | Présentation générale, héros banner, témoignages, FAQ, newsletter |
| Page 2 | Guide d'Astrophotographie | Tutoriels, conseils et galerie communautaire |
| Page 3 | Catalogue Céleste | Exploration des planètes, étoiles, galaxies et nébuleuses |
| Page 4 | Inscription communautaire | Formulaire avec validation et choix d'abonnement |
| Page 5 | Actualités & Événements | Affichage dynamique simulé des actualités astronomiques |
| Page 6 | Chronologie des missions spatiales | Timeline interactive (missions passées, présentes, futures) |
- HTML5 — Structure sémantique conforme W3C
- CSS3 / Tailwind CSS — Mise en page et design responsive
- JavaScript (ES6) — Interactivité et logique des composants
- Git & GitHub — Gestion de versions et collaboration
- Figma — Zoning, wireframes et maquettes desktop/mobile
Durée : 5 jours et demi
Travail en équipe : chaque membre a eu un rôle spécifique (design, intégration, interactivité, responsive).
Gestion de version : branches individuelles par fonctionnalité, fusion via pull requests après validation.
- Création du zoning et wireframe
- Conception des maquettes Figma
- Développement mobile first
- Tests et validation W3C
- Déploiement sur GitHub Pages
- Section Héro avec image de nébuleuse et bouton CTA
- Objet céleste de la semaine
- Événements à venir
- Témoignages (3)
- FAQ interactive
- Formulaire newsletter
- 5 catégories principales (Planètes, Étoiles, Galaxies, Nébuleuses, Trous Noirs)
- Ancrages internes pour navigation fluide
- Formulaire complet (nom, email, date, expérience, abonnements)
- Validation JavaScript côté client
- Articles récents simulés dynamiquement
- Calendrier d'événements astronomiques
- Timeline interactive : 1950–2040
- Détails animés au survol ou clic
- Tutoriels, conseils d'équipement
- Galerie communautaire d'images
✨ Navigation fluide avec menu hamburger animé sur mobile
✨ FAQ interactive avec accordéons JavaScript
✨ Formulaire d'inscription avec validation en temps réel
✨ Timeline des missions spatiales interactive
✨ Galerie d'images optimisée et responsive
✨ Newsletter avec gestion d'inscription
Le site a été conçu selon le principe Mobile First et testé sur :
- Smartphones
- Ordinateurs de bureau
Un menu hamburger animé facilite la navigation sur mobile.
Toutes les unités de taille utilisent em/rem pour garantir la cohérence.
Le site est hébergé sur GitHub Pages.
🌐 Lien du site : https://mohammed-mehdi-saibat.github.io/CosmicExplore
💾 Repository GitHub : https://github.com/mohammed-mehdi-saibat/CosmicExplore
Ce projet est réalisé dans un cadre pédagogique et non commercial.
© 2025 — AstroTech Studio. Tous droits réservés.
Un grand merci à notre formateur et à l'équipe pédagogique pour leur accompagnement, ainsi qu'à nos coéquipiers pour la collaboration et la créativité partagée.
⭐ N'hésitez pas à explorer l'univers avec CosmicExplore !