Lunar Maps

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

  Lunar Maps

Inspiration

Our team was inspired by the idea of exploring and understanding the Moon in a more interactive way. We thought it would be fun to create something that helps people see important places on the Moon, like landing sites and craters. Since this was our first hackathon, we wanted to keep things simple and focus on learning how to build and design a project from scratch. That’s how Lunar Maps came to life — a small step toward making lunar exploration easy to visualize.

What it does

Lunar Maps is a simple website that shows a map of the Moon with pins marking famous locations such as the Apollo 11 Landing Site, Tycho Crater, and Mare Tranquillitatis. Users can search for these locations and see them displayed on the screen. The goal was to create a basic but clean interface that lets people explore the Moon’s surface and learn about different areas in a fun way.

How we built it

We built our project using HTML and CSS in Visual Studio Code. We used the Live Server extension to test and preview our website as we built it. To collaborate, we used GitHub to share our code and keep everything in one place. We also used Figma to design how we wanted our website to look before coding it, and Google Slides to create our final presentation. It was our first time using all these tools together, so we learned a lot along the way.

Challenges we ran into

Since this was our first hackathon, a lot of things were new to us. One of the main challenges was getting the Moon background image to fit and look right on the page. We also had trouble sharing our project preview with teammates because the Live Server only works on one computer at a time. Learning GitHub for the first time was also tricky, but we figured it out as a team. Even with limited time, we managed to finish everything and get our website working.

We are proud of

We’re really proud that we were able to make a working project in such a short time. Our website looks clean, the design matches our Figma mockup, and we got to experience what it’s like to work together on a real project. We also learned how to use tools like GitHub, Figma, and VS Code more confidently. For our first hackathon, we’re happy we were able to take an idea and turn it into something real.

What we learned

We learned how to build a website using HTML and CSS, how to use Live Server to see our progress instantly, and how to collaborate using GitHub. We also learned a lot about teamwork, time management, and communicating our ideas clearly. Designing in Figma and turning that into a real website was one of the most valuable lessons. Overall, we learned that even a simple idea can become a good project when everyone contributes.

Built With

• css3
• html5
• vscode