🌌Galactic Frontend Code Quest-Create!🚀

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 …


This content originally appeared on DEV Community and was authored by Mauli Patel

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

Image of solar system


This content originally appeared on DEV Community and was authored by Mauli Patel


Print Share Comment Cite Upload Translate Updates
APA

Mauli Patel | Sciencx (2024-09-07T05:24:16+00:00) 🌌Galactic Frontend Code Quest-Create!🚀. Retrieved from https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/

MLA
" » 🌌Galactic Frontend Code Quest-Create!🚀." Mauli Patel | Sciencx - Saturday September 7, 2024, https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/
HARVARD
Mauli Patel | Sciencx Saturday September 7, 2024 » 🌌Galactic Frontend Code Quest-Create!🚀., viewed ,<https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/>
VANCOUVER
Mauli Patel | Sciencx - » 🌌Galactic Frontend Code Quest-Create!🚀. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/
CHICAGO
" » 🌌Galactic Frontend Code Quest-Create!🚀." Mauli Patel | Sciencx - Accessed . https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/
IEEE
" » 🌌Galactic Frontend Code Quest-Create!🚀." Mauli Patel | Sciencx [Online]. Available: https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/. [Accessed: ]
rf:citation
» 🌌Galactic Frontend Code Quest-Create!🚀 | Mauli Patel | Sciencx | https://www.scien.cx/2024/09/07/%f0%9f%8c%8cgalactic-frontend-code-quest-create%f0%9f%9a%80/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.