Web cosmique : le voyage d'un étudiant à travers l'espace et le code

Soumission Frontend Challenge v24.09.04 : Explorez le cosmos

Ceci est une soumission pour Frontend Challenge v24.09.04, Glam Up My Markup: Space

Ce que j'ai construit

J'ai créé "Explore the Cosmos", une landing page immersive et pédagogique qui emmène les visiteurs dans un voyage à travers notre système solaire. L'objectif était de concevoir un site Web attrayant, visuellement attrayant et informatif qui suscite la curiosité pour l'espace et les corps célestes.

Les principales fonctionnalités de la page de destination incluent :

• Un en-tête captivant avec un fond spatial et une flèche de défilement animée
• Aperçu complet de notre système solaire
• Informations détaillées sur chaque planète, y compris des faits et des images clés
• Sections dédiées aux lunes notables et autres objets célestes
• Éléments interactifs renvoyant aux pages scientifiques de la NASA pour une exploration plus approfondie

Le design vise à équilibrer l'esthétique avec le contenu éducatif, créant une expérience à la fois visuellement époustouflante et intellectuellement stimulante.

Démo

[Dépôt Github]

Vous pouvez visionner la démo en direct du projet sur :

explorecosmos.web.app

Voyage

En tant qu'étudiant, c'est la première fois que je participe à un événement comme celui-ci, et je suis ravi de partager mon parcours ! Créer "Explore the Cosmos" a été non seulement une aventure passionnante qui m'a permis de combiner ma passion pour le développement web avec ma fascination pour l'espace, mais aussi une expérience d'apprentissage importante pour moi.

1. Première expérience : Étant la première fois que je participais à un tel événement, j'étais à la fois nerveux et ravi. Ce défi m'a poussé hors de ma zone de confort et m'a encouragé à appliquer mes compétences dans un scénario du monde réel.

2. Planification et recherche : J'ai commencé par rechercher du contenu lié à l'espace et décider des éléments clés à inclure. Cela m'a aidé à structurer les informations de manière logique et engageante.

3. Design : J'ai choisi une palette de couleurs sombres pour imiter l'immensité de l'espace, en utilisant des blancs éclatants et des animations subtiles pour créer un intérêt visuel. Les choix de polices (Space Grotesk et Space Mono) ont été sélectionnés pour améliorer le thème de l'espace. C'était la première fois que je me concentrais aussi intensément sur les aspects du design, et cela m'a beaucoup appris sur l'expérience utilisateur et la communication visuelle.

4. Développement :

   • HTML : je me suis concentré sur le balisage sémantique pour garantir l'accessibilité et la convivialité du référencement. Ce projet m'a aidé à comprendre l'importance d'un HTML bien structuré.
   • CSS : j'ai utilisé des techniques CSS modernes comme Grid et Flexbox pour la mise en page. L'arrière-plan animé et la flèche de défilement étaient difficiles mais gratifiants à mettre en œuvre.
   • JavaScript : j'ai ajouté de l'interactivité en rendant chaque corps céleste cliquable, créant un lien vers les pages scientifiques de la NASA pour des informations plus détaillées.

5. Défis :

   • Équilibrer l'attrait visuel et la performance, en particulier avec l'animation d'arrière-plan
   • Assurer la réactivité sur différentes tailles d'écran tout en conservant l'intégrité visuelle des images et des mises en page de la planète
   • En tant qu'étudiant, la gestion du temps était un défi, équilibrer ce projet avec mes autres responsabilités académiques

6. Apprentissages :

   • Amélioration de mes compétences dans la création d'expériences Web immersives
   • A acquis une compréhension plus approfondie des animations CSS et de leur impact sur les performances
   • J'en ai appris davantage sur notre système solaire tout en organisant le contenu
   • Développer des compétences en gestion de projet et apprendre à travailler sous les contraintes d'un défi
   • J'ai pris confiance en mes capacités en tant que développeur web

Je suis particulièrement fier de l'intégration transparente du contenu éducatif avec un design attrayant. La façon dont chaque carte planète se transforme au survol, invitant les utilisateurs à explorer davantage, est un détail que j'apprécie vraiment. En tant qu'étudiant, voir ma vision prendre vie a été incroyablement gratifiant et m'a motivé à continuer d'explorer le développement Web.

Prochaines étapes

Cette expérience a déclenché une passion pour le développement Web et l'éducation spatiale. À l’avenir, j’aimerais étendre ce projet en :

• Ajout d'éléments plus interactifs, peut-être un modèle 3D du système solaire
• Mise en place d'une fonctionnalité de quiz pour tester les connaissances des utilisateurs sur l'espace
• Création de pages individuelles pour chaque corps céleste avec des informations plus détaillées

Participer à ce défi a été une fantastique opportunité de combiner créativité et compétences techniques, et je suis ravi de continuer à affiner et à élargir mon projet. En tant qu'étudiant, cette expérience a été inestimable, m'apportant des compétences pratiques, renforçant ma confiance et me donnant un avant-goût des défis réels du développement Web. J'ai hâte de participer à d'autres événements comme celui-ci à l'avenir !

À plus tard.
Merci!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!