Blast Off! Unveiling the Tale of My Space Button
Tags: devjournal, webdev, beginners, css
Published: 2023-03-05 22:52:36

---
title: Blast Off! Unveiling the Tale of My Space Button
published: true
date: 2023-03-01 02:15:39 UTC
tags: #devjournal #webdev #beginners #css
canonical_url: https://chrissycodes.hashnode.dev/blast-off-unveiling-the-tale-of-my-space-button
series: Musings of a Coding Enthusiast
---
![The title "Blast Off! Unveiling the Tale of My Space Button" and the text underneath, "Written by Chrissy Codes" is displayed on the left side of the cover while a rocket launches to space in the background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11v8ln9uy1xnqlud9qm4.jpeg)
### 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](https://media.giphy.com/media/ycz3HA2RzNoXNOJV0L/giphy.gif)

### 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](https://www.shecodes.io/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.

[https://codepen.io/CB\_ID2/pen/ExeNzex](https://codepen.io/CB_ID2/pen/ExeNzex)

### 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](https://media.giphy.com/media/XfVOigH4qRql1jlMO6/giphy.gif)

### Conclusion

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 via the link on top of this post and my other socials on [Linkfree](https://linkfree.eddiehub.io/CBID2) if you need more inspiration and encouragement. Till then, happy coding! 😀

![Porky Pig from Looney Tunes saying, "That's All Folks"](https://media.giphy.com/media/7yojoQtevjOCI/giphy.gif)

### Credits

Harley Quinn Lol GIF by [DC Comics](https://media.giphy.com/media/XfVOigH4qRql1jlMO6/giphy.gif)

Photo by NASA on [Unsplash](https://unsplash.com/photos/JkaKy_77wF8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

Take Off Space GIF by [Walt Disney Studios](https://media.giphy.com/media/ycz3HA2RzNoXNOJV0L/giphy.gif)

That's All Folks Profile GIF by [notoverthehill.com](https://media.giphy.com/media/7yojoQtevjOCI/giphy.gif)