Blast Off! Unveiling the Tale of My Space Button

Blast Off! Unveiling the Tale of My Space Button


3 min read

Where it all began

I stumbled upon a cool mini-coding project on UIverse's website and decided to tackle it. Even though I couldn't fly to Space, I was able to experience the thrill of success after completing the challenge. Join me in reminiscing my triumphs and struggles while I worked on the project. Grab a snack and let's get started!

Rocket takes off to space

My Process

For the HTML, I surrounded my button in <div> tags to make it easier to add a background image in the body. This allowed me to create a cohesive, space-themed design for the entire page. For the CSS, I initially planned on using the positioning property to center the button, but it was difficult to get right. Instead, I chose to use Flexbox, which made it simpler to control the layout and spacing of my button.

However, the real challenge came when I tried to add a space-themed background image and spacey font. I wanted the button to look like it was part of a spaceship control panel, with an image of space in the background and text that looked like it was created by aliens who were welcoming humans to space. I spent a lot of time experimenting with different CSS & JavaScript properties and techniques, trying to get the effect just right. After hitting many brick walls, I went to SheCodes and asked their coding assistant, Athena, for her wisdom. She pointed out that my CSS properties were not formatted properly (Oh how embarrassing! ๐Ÿคฆโ€โ™€๏ธ) and a CSS selector was missing for my spacey font. She also helped me fix the function I created that was supposed to change the image and text to space after the user clicked on the button. Thanks to her help and guidance, I was finally able to achieve the effect I was looking for.

What I've Learned from This Challenge

One of the biggest takeaways from this project was learning how to center a div with FlexBox, which I can now add to my list of superpowers (move over, Batman). Another valuable lesson I learned was that it's okay to ask for help when you need it. Athena was a lifesaver and kept me from spiraling down a black hole of endless frustration. And let's be honest, sometimes we all need a little help from our coding friends (or enemies, if we're feeling particularly villainous like Harley Quinn).

Harley Quinn laughing like crazy


Overall, this challenge was a blast (off). It was exciting to create a space-themed button that would make any astronaut proud. I highly recommend doing this challenge if you're looking for projects to do. Also, follow me on Hashnode and my other socials on Linkfree if you need more inspiration and encouragement. Till then, happy coding! ๐Ÿ˜€

Porky Pig from Looney Tunes saying, "That's All Folks"


Harley Quinn Lol GIF by DC Comics

Photo by NASA on Unsplash

Take Off Space GIF by Walt Disney Studios

That's All Folks Profile GIF by

Did you find this article valuable?

Support Christine Belzie by becoming a sponsor. Any amount is appreciated!