Today wasn't my most diverse day but it has proven to be a learning experience. I started my day where I left off yesterday with free code camp and was able to complete another section which includes 50+ tutorial slides. It took me about 3 hours to complete and thats because my attention span this morning was all over the place...
Even though my attention span was that of a puppy this morning I still made sure to take note of things I did not know and add topics I would like to elaborate on to my discord's "things-to-learn" list. I would have probably finished a bit faster but my mind was wondering off causing me to re-read things. I think the idea of doing a tutorial was overwhelming for especially since I had just woken up. I just pushed myself through it all and by the end of it I had better understandings of things like the color wheel, float, and animations.
Speaking of animations I was so intrigued by the topic I wanted to become proficient using the property. I sat through the last few minutes thinking of my newly formed idea for my next project.
The idea came to me in a few slides after learning animations. I believe the topic was gradients and I saw a beautiful transition FreeCodeCamp provided as an example. To me it looked like levels of our atmosphere starting with a sunset and ending in space so I thought I'd make a night sky by applying this gradient and use the animation properties to create stars that twinkle!
I didn't use the specific gradient they specified in their CSS doc I wanted to try and make my own by picking colors with google chrome's Colorzilla extension. (This extension is a huge help and I pretty much use it in all my projects.) I opened the screenshot above and used the Colorzilla extension to pick the 4 color's RGB codes directly from the image.
Now that I got my gradient set for the background/sky I wanted to create a scenario for my night sky. So I thought I include a scene where a couple is staring up into the sky from earth watching the stars twinkle and maybe a comet fly by.
Going with this vision I added a sphere to represent earth. I decided to position the sphere in the bottom right corner, i want to create a "funnel" effect where all other objects will be positioned in the graphic pointing to the sky(I hope I explained that right). Keeping this perspective theme in mind I Made a few trees by combining different shapes. I really loved this part of the project since I was using CSS in a way I never have before! I created a much larger object with smaller objects. I always see Codepen's out there where people are usually doing this in association with their animations, I have always been intimidated by it but this project is helping me get familiar with it. I also created a trail path and a blanket to give the graphic more of my "funnel" effect.
Everything I mentioned took a lot longer than I thought I kept messing with the trees since I was using absolute positioning it was really hard to center things (Knowing this struggle now I do have a better Idea on how to make trees using Flexbox ). After making everything somewhat proportioned, I then got stuck with how I want the trail to look. Due to today's review I was more comfortable using CSS's translate property by rotating the road a few degrees to again add onto my 3D perspective. I originally used this property to have the trail go in a up left direction but then messing with it some more I made it go in a left down direction. Both of these iterations looks beautiful in my opinion and with a little more touch up here and there they both have the potential to look great.
I wasn't able to practice animations today because I got hung up on the smaller things but now that the smaller things are out of the way I am ready to dive head first into it tomorrow. I do have a few more ideas for the smaller things but with the exception of the trail road I would like to complete the hard/foreign part of the project before I focus on anything else. I do have an idea of how I am going to position the trail road but I will have to sleep on it and execute in the morning (shouldn't take too long)
This is an image of where I am currently with this project:
Stay Tuned.