This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space
What I Built
The space theme lent itself perfectly to an old computer terminal aesthetic, so I went for something loosely inspired by that. I wanted a page that was simple and keyboard navigable. I don't always design mobile-first, but that was something I really wanted to do for this challenge (and I break it down in the journey!)
The cover image, and all of the images used in this project, are from Wikimedia Commons and are credited in the CSS (see line 352).
Demo
View full-screen on Github Pages
View repo
Mobile screenshots
The screenshots below show the page on mobile, first when the page is loaded and then when an option is selected from the menu.
I toyed with color a lot but ended up going with purple, since it felt more appropriate to the space theme.
Journey
I divided this project into three phases. I don't always start with a mobile-first design, but for this project I wanted to start with a mobile-first approach, ensuring that the page was browsable on a mobile phone.
Phase 1
For this phase I declared global variables, added a JS script that read all of the headings on the page, and created an unordered list that would be later used for navigation through the different planets, moons, and objects. I also declared a font variable that I ended up changing later.
I knew I wanted images to be used for this, so I used JavaScript to add a div with an image class. Then I could use CSS to control each image for each info card.
Phase 2
This is where I began designing for mobile. The navigation disappears when you click it, so that users can see the content underneath, but the "Explore" section still shows the current planet/moon/celestial object. This took a lot of trial and error, because I wasn't sure immediately how I wanted to handle it.
I also added in the actual images during this phase, instead of just divs with a solid background. It looks super simple, but it functioned!
Phase 3
The final product! In this one, I laid the content out side-by-side for a desktop resolution. During this phase I also integrated some CSS animations and refined the design with some lines (using css gradient). I also changed the font last-minute. This phase involved a lot of tweaking!
What would I do next?
There's a lot of clean-up that needs to happen! The JavaScript could be refactored - each list of planets, moons, and celestial objects is unique to that section, so I would probably create a usable function there. (A lot of JS variables were pulled automatically but had to be transformed manually - e.g. kuiper-belt became "Kuiper Belt.") It's not the cleanest project, but it was a fun exercise.
Top comments (3)
Your project looks really good! It reminds me of a video game (in a good way). I like the way you did the interface. I also toyed around with a terminal-looking neon green style but ultimately didn't feel like it was a good user experience. I love the purple that you ended up going with.
Awesome job!
I think it looks beautiful.