We took inspiration from other vacation destination websites. Their purpose was to grab peoples’ attention to bring them to their destination, so we did the same for planets and vacation spots in space.
What it does
Spacecation is a space tourism website that engages and educates people about the planets in our solar system. From the homepage of the website, the user can choose a planet to explore and have a virtual vacation around the real features of these planets.
How we built it
Starting with the home page, we first coded the basic setup, which included the background picture, the three cards, the logo, and the title. All the images were created ourselves using ibispaint.
We then created the Mars page, making a white border, adding and animating the planet image and text, and adding the logo. Below that, we added in the “More Information” section and the “Vacation Spots”, using information that we found through research. We added in an animated video created with Procreate as the transition between the home page and the Mars page, and duplicated the code two times to create the Venus and Mercury page.
Near the end, we did some bug fixes and made the page resizable.
Challenges we ran into
There were many challenges we ran into, but they were mostly just debugging, making the website resizable, and adding in the animated videos. A few of the bugs included working with images in divs, positioning, and centering. Making the website resizable was a real hassle. We had to use media query for some elements, change the layout when resized, and change the font size. For adding in the animated videos, this was our first time, so we had to search up how to do that, which took a while. Overall, more than 50% of the time was debugging, repositioning, and googling (and safariing).
Accomplishments that we're proud of
We are proud of our usage of animations to immerse the user into the theme and create a smoother experience.
What we learned
Well, obviously we learned a lot about the planets in our solar system. We also learned how to add animated videos into our website as a transition between pages. In the making of the website, we gained some new experience with different aspects of HTML and CSS, especially in animating and making the website interactive.
What's next for Spacecation
Our next step for Spacecation is to add all the planets and more vacation destinations for each. Our goal is to let users pick from more destinations to learn more about. We also plan on adding more visuals for each feature of the planets.