DEV Community

Cover image for 🌌Galactic Frontend Code Quest-Create!🚀
Mauli Patel
Mauli Patel

Posted on

1

🌌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 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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay