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!
My Process
For the HTML, I surrounded my button in
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.
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).
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 if you need more inspiration and encouragement. Till then, happy coding! 😀
Credits
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 notoverthehill.com
Top comments (0)