Glam up my markup: Space

Catherine Parkinson — Sun, 15 Sep 2024 22:22:59 +0000

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.

Hello world

Catherine Parkinson — Sun, 15 Sep 2024 21:50:49 +0000

Hi, I'm Catherine :)

DEV Community: Catherine Parkinson