Practical applications of CSS animations

-
Going forward with the CSS course. Animations are not just "aesthetic bling", they also have practical uses, such as CSS loaders.

We tend to take a "loading wheel" for granted, but more often than not it is actually custom tailored and adds value to the user experience. With a thematic animated loader, the user is more likely to sit back and wait while the site loads rather than being confused and unsure if something is happening (Did I click? Is it working? Did it freeze? Better click again! etc)

It was demonstrated with this animated crystal here:
See the Pen Crystal Loader | Pure CSS by Mike Mangialardi (@mikemang) on CodePen.
After the video there was "homework" to create your own thematic 100% css loader. Naturally, I looked into cats. Here is my result, using 2 scaling animations. It kind of looks like it's nodding, right?
See the Pen Kitty Loader | Pure CSS by Anzelika (@anzuj) on CodePen.

Another cool thing this course highlighted: SCSS preprocessor's ability to make.. *drumroll* color variables! I have come across this situation plenty times already when I have to squint and look for that hex code which I have to use consistently in my project. With SCSS, you can create variables which add semantic sense to it all. 
$dark-sky-blue: #6AC0D6;
$blue-lagoon: #B2E4F6;
$pale-cyan: #89E5F6;
$rich-black: #010F19;
$dark-cerulean: #08517A;
I mean, in a world where people forget their 4-digit PIN codes, it's much easier to remember $blue-lagoon than #B2E4F6, right?

We moved on to the final part of the course: creating a Nintendo Switch using only CSS. Here's my result. It was immensely satisfying to make those Switch logo balls animate up and down. I added some box shadowing and tweaked the border radiuses/widths a bit for my liking. To top off, added some media queries so that it would look decent on mobile screens too.
See the Pen Nintendo Switch by Anzelika (@anzuj) on CodePen.
This completed the CSS images course, and I feel I'm definitely more comfortable positioning elements in relation to each other. This surely comes in handy in web development too, but apart all that it is simply downright fun to make images out of code and push the limits.

Where to from here? As if guided from above, someone posted on Facebook about this brand new Javascript Bootcamp course by Colt Steele and Stephen Grider.

I was 80% through Colt Steele's Web Development bootcamp course, but the out of date material and constant "pre-video" slide notes eventually threw me off. In the bootcamp's FB community people wanted new material and finally there is some! Since I'm focusing more on Front End right now, I feel this course is absolutely perfect, helping me build some portfolio. 42 hours of videos on Javascript - here weeee gooooo!

Comments

Post a Comment

Popular posts from this blog

Defeating the fear of the terminal with React!

-
Image
Today is the day I did it! I opened the ever-feared terminal in my VS code. The final push was looking at React/Angular videos and seeing that following the project all required terminal commands. Since package management is elementary knowledge in this field, I decided I could no longer avoid getting comfortable with it. Aaand of course nothing went smoothly from the beginning. As soon as I tried to create a new file with touch index.html, this happened: Luckily my awesome Facebook coding community quickly came to rescue and pointed out that Window's native terminal "does not speak that lingo". So I had to switch to Git Bash terminal instead, which knows how to touch things. He. He. He. I dove into a React video next, but as if doomed, another problem showed within the first minutes. I was able to install react by: npx create-react-app, but when doing npm start, another error popped up *sigh* A bit discouraging to say the least, just wanting to learn a new ...
Read more

Github and Godaddy domain

-
Image
Today is the day I finally decided to learn the inevitable - Github! A brand new world to be honest. It was intimidating to dive into Godaddy domain settings and Github terminology: "commit", "repository", "pull request" etc. For a newbie, it goes to the dark lands of backend. But combining some resources I actually managed my Godaddy domain anzudev.com  to be hosted by Github on the background, via this repository:  https://github.com/anzuj/anzuj.github.io . So, for the first time in my life, my own HTML+CSS is live with a custom domain. For this day at least, I am the queen. (I'm rejoicing in small things, okay?) Here are the 2 resources that helped me get there: This Youtube video explaining how to set up Github pages This article explaining how to tweak Godaddy settings (in the above video there are namecheap.com settings) I did not use the Git terminal for this, but Windows Powershell. For anyone following (I also commented this ...
Read more

Job offer and Vue

-
Image
Really exciting news - I got an offer of a position to work with an awesome startup! After getting a few rejections due to my lack of professional workplace experience and some frameworks, I was feeling a bit hopeless in regards to what learning curve I still have ahead to be employable, but then I got an unexpected callback by 3 lovely gentlemen who deemed me a good match for my illustration skills, willingness to learn and potentially my startup culture background helped too. We agreed on a 80% mini "internship" for 2 months during which I'll try to wrack up my Vue skills and help make the webapp interactive and visually appealing. It's scary. It's new! But I'll give my very damn best at my first job opportunity in the frontend field! Words can not accurately describe how grateful I am to them for taking this leap of faith in me :) My tasks revolve around using Vue and Vuetify.js with their webapp. They've been in my bucketlist for ages, so what be...
Read more