AtulCodex

Hi Dear Friends 👋,

In this post, I'm going to share my "CSS Animation Course" journey.

This Sunday on "28th Feb 2021" I have completed the course 🎓

This course is hosted on Scrimba 🎥 by Jad Khalili. The course is really really awesome and very easy to understand, not this course but in scrimba almost all courses are very easy so anyone can understand quickly. And one of the best features I liked is you can edit your code at video yes. I don't have words to explain this feature and I recommend you to try it once. By the way, you can find Per Harald Borgen at our DEV community, who is CEO and co-founder of Scrimba platform.

Actually, 🤟 I have completed my CSS course in 2017 from a local institute but in that course, I don't learn all CSS properties and lessons and the course curriculum is not proper. They also don't teach the "CSS animation part" too. That's the reason I have enrolled in this course and now I can say that I can teach you anything about CSS. In this course, I have completed one video lesson in one day because I'm a job person and I have shared all things which I have learned step-by-step on this DEV platform. Please check out the following table.

CSS Animation course content

1) What is transition?

2) Adding Transition 🧐

3) Customizing Transition 🥽

4) Transition Shorthand 🦔

5) Transition Challenge 🥊

6) Real-World Transitions Challenge 🥋

7) Defining Animation property 🦾

8) Animation Timing Property 🍣

9) Animations other property🌙

10) Understand Animation fill mode 🤯🤪

11) Animation shorthand property 😘

12) Animation challenge 🧉

13) Real-world CSS animation challenge 🌎

14) How to set element center with transform property in CSS

15) Let's understand the CSS scale property 🤨

16) What is translation in CSS🏎

17) Rotation in CSS animation ⌚

18) Today i learned about CSS skew 📦

19) How to write values in transform property?

20) Real-world CSS Transform challenge 👄

21) Do you know what is CSS Prefixes 😮

22) Let's break the CSS variables 🤿

In this CSS Animation course, I have learned a lot's of things in this course and created small projects

Real-World Transitions Challenge

Animation challenge

Real-world CSS Transform challenge

And this Indian Flag project with just HTML and CSS 🦩

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="atulcodex" data-slug-hash="RwoyemN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Indian Flag 🇮🇳">

<span>See the Pen <a href="https://codepen.io/atulcodex/pen/RwoyemN">

Indian Flag 🇮🇳</a> by Atul Prajapati (<a href="https://codepen.io/atulcodex">@atulcodex</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

But But But, wait 🤚

📷

Just completing a video course is not enough, So in our next dev post we will discuss and learn about the CSS variable ⛵

How to be Super-Effective on Programming, Coding, and Freelancing?

Hello coding people, As you might know, I always write articles about coding, Programming, Freelancing, and Web. In this article, I am going to explain to you How to be a Super Active as a Programmer as you expect here. So get ready

1-Set working hours like you are working at the office!

Begin with setting 4-6 hours in your day for work. start and end at the same time. Your brain will understand your schedule and adapt to your workflow to work better.

Tip: I recommend to work 4-6 hours per day.

2-Use Pomodoro technique

The main thing is to rest every 25 minutes. So your cycle will be like 25 mins work + 5 mins rest.

Tip A: Don’t use your computer or smartphone when rest! Make some sport exercises to cheer up your brain. Tip B: Turn off all notifications when you are working to improve your concentration.

3-Use to-do lists

When you have a plan it’s much more easy to concentrate on work. Make max 2-3 complex big items and max 5-6 small.

Tip A: Start your day by finishing the hardest ones. Tip B: use apps to manage your time and work.

4-Divide big tasks to smaller ones.

Big tasks could take 2-4 hours. And it will be much better for your brain to pass 10 small tasks instead of 1 big. it’s like a competition.Closing 10 tasks sound more impressively, right? you will be pleased by yourself and be more motivated.

Tip A: like if you have a website project divide it into pages. And if you have a web app divide it into the component. you got the point.