This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space
What I Built
I created an interactive web application that allows users to explore our solar system. The landing page provides an overview of the Sun, planets, moons, and other celestial objects, offering an engaging and educational experience for space enthusiasts of all ages.
Demo
Repo Link: https://github.com/ZibrasIsmail/Interactive-Solar-System-Explorer
You can view the live demo: https://zibrasismail.github.io/Interactive-Solar-System-Explorer
Journey
- I started by creating the HTML structure to organize the content about various celestial bodies.
- I then styled the page using CSS to create a space-themed appearance with a dark background and bright text.
- JavaScript was used to add interactivity, including:
- A star field background
- Animated comets
- Modal popups for detailed information about each celestial body
- Smooth scrolling navigation
What I Learned
- How to create a visually appealing space theme using CSS gradients and animations
- Implementing modals and smooth scrolling navigation using vanilla JavaScript
- Improving accessibility by adding keyboard navigation
Next Steps
- Add more detailed information and images for each celestial body
- Implement a 3D model of the solar system using WebGL
- Create interactive quizzes to test users' knowledge of the solar system
This project is open source and available under the MIT License.
Top comments (0)