🌌Galactic Frontend Code Quest-Create!🚀
Mauli Patel
Posted on September 7, 2024
This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space
What I Built
I created a simple and fun landing page to explore the Solar System. Using HTML CSS and JavaScript, I added cool visuals and interactive features to make learning about planets, moons, and other celestial objects more exciting.
The goal was to keep the design engaging and easy to use, while also being educational. Users can explore the Solar System in a dynamic way without any clutter or complicated navigation.
Demo
<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
a:link,a:visited {
color: Black;
background-color: #FFFFFF;
text-decoration: none;
target-new: none;
}
a:hover {
color: #0000FF;
background-color: #FFFFC0;
text-decoration: underline;
target-new: none;
}
</style>
</head>
<body>
<!-- Text link tag - by www.rapidtables.com -->
<a href="<script src="https://gist.github.com/itsmemauliii/1b64355d67415cd8f02c296cbe2a0905.js"></script>">Github Link To My Code</a>
</body>
</html>
0r
https://codepen.io/Mauli_Patel_18/pen/PorXdQz
Journey
Building this project was a fun learning experience! My process started by working with the basic HTML structure and finding creative ways to bring it to life using CSS for styling and JavaScript for interactivity. I focused on making each planet and celestial object visually appealing, adding animations and hover effects to keep users engaged.
I learned a lot about improving user experience through clean, responsive design and accessible features. I’m particularly proud of how the planets animate and the way facts are displayed interactively.
Next, I hope to enhance the page further by adding more detailed information, 3D effects, and maybe even a mini solar system simulation!
License Used For My Code
LICENSE-2.0
Posted on September 7, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
![[Frontend Challenge] Space Markup 🚀](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foc2p8wd8uex46t8fxiqk.jpg)
