Learning HTML/CSS Through Love
Write what you know. Do what you love. These are pieces of advice that I have been given throughout my life.
I’m not sure that I have always followed these words, but I do know that when I have, I have succeeded more times than not. I love to write code, but I am still learning and growing. I also love my dogs with my heart! They make me smile the moment I wake up in the morning, when I get home from work, when I close my eyes to sleep at night, and every moment in between. So, it only makes sense that I combine my love of coding with my sweet pups.
I’ve learned to write HTML/CSS through many avenues; CodeAcademy, LinkedIn, PluralSight, Stack Overflow, and more. The options are many, and the ideas are endless.
This week, in my free time, I’ve built a simple world of sunshine, floating clouds, and one of my dogs playing the ukulele. This world taught me that although I know html/css, there is always so much more to learn.
Using Code Pen as my platform, I just jumped in with both feet. No plan, no structure, just pecking away at my keyboard until my puppy’s face appeared in cartoon form. That cartoon face made me smile, and I felt a sense of happiness and pride at what I was looking at. This made me want to build more, and so I kept going. Once the sweet face of my Lucy was built and looking back at me, I then decided to add a blue sky with some fluffy clouds.
The sky was simple enough, but I hit a snag with the clouds. It is in these times that the internet is a life saver. Through a few Google searches and a couple Stack Overflow threads, I found a solid explanation of how the clouds are built properly and was able to implement and understand.
At this point, hours into my “simple project”, I was having a really good time, and wanted to keep growing this project even though the intent was to stop after her head was developed. Instead, I began building out her body. Because this project was bright, cartoon-ish, and light, I wanted to bring in another happy element.
I’ve been learning the ukulele over the past few weeks and decided that Lucy would play as well.
Once I added in the instrument to my CodePen project and looked at it, I decided it was time for some CSS animation. I’ve made the clouds float around in the sky, Lucy is strumming the strings, and tapping her foot along to the tune.
What would I change?
I became very excited about this project and it just grew without me realizing what it was becoming. I’m not done with this and I intend to keep making this more fun and better each time I touch it, but that is going to start behind the scenes.
As I am building this out and trying to modify portions, I am realizing the importance of planning and structure. Each time this project found a new idea, I fought to keep containers working and divs to function the way I wanted them to. If I’d taken some time to stop draw out a plan, my coding structure would make much more sense and I would have foreseen upcoming issues that I now have to go back and update/fix.
To me, this project is adorable, and makes me smile, but it is not responsive to mobile devices, and because I was just “making it work” I didn’t consider other browsers or resolutions.
Continue Learning with Love
Technically speaking, I didn’t code this awesome project properly, but I’m glad that I didn’t. I learned something from it, and created something fun in the process. I will go back into this project and develop it to respond in mobile, and all browsers. I also know that my next project will be done with more preparation but I expect that I will still find more efficient ways of completing that project at the end. This is why you build with love. If you don’t love what you are doing, you will throw it away, and what is there to learn from that?
I invite you to keep checking in on this codepen. I expect to grow my skillset, and will pour my knowledge into this project that just makes incites smiles.
(Thank you to bensound.com for use of the incredibly happy mp3!)
