atulcodex

[atulcodex]

CSS Animation Course Journey 📚

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 ⛵

Follow me, So you can get notification of my next project 🔥

[atulcodex]

(via Morning rituals (Six 6) which increase your productivity)

[atulcodex]

Your mind is #weapon keep it loaded 🔫 . So other #bullshit are away from you 🤘 . . This is the truth behind success 😎 . . Do you believe it? . .🕶️🕶️ Share your opinions in comment 👇 . . . . #success #successandnothingless #successacademy #successaddict #successbefore30 #successbooks #successbookstoread #successbound #successbreedssuccess #millionaire #millionairelifestyle #millionairebible #millionairedreams #millionaireentrepreneur #millionairegoals #millionaireimage #warrenbuffet #nomadlife #nomad #freelance #weapon (at Babylon) https://www.instagram.com/p/B_C2Am5A6ch/?igshid=nuaw1gez6q67

[atulcodex]

Namaste 🙏 coding people. Hope you all doing well ✌️ and enjoying #wfh with your family 😎 . By the way in this #lockdown season I have made a pure CSS loader. . . . . Check out the free source code in my #codepen account link in bio🤘☝️ . OR . codepen.io/atulcodex 🍒🥝 . Stay home and work hard so we can recover financial conditions of our country 🌾🏡🌳🌼 . . . #code #css #css3 #html #html5 #htmlcoding #cssanimation #htmlcss #javascript #csstudents (at Agra, Uttar Pradesh) https://www.instagram.com/p/B-cCgGBAXSe/?igshid=1j1u3f00c0a7k

[atulcodex]

Hey #coding people 🙋‍♂️, today is Sunday 22 Mar 2020 and today I have looked down me at my home🏡. And rather than wasting my time I have created this LinkedIn loader. . Source code of this #linkedin loader available on my #codepen or you can directly follow the link below ⏬👇 . https://codepen.io/atulcodex/details/eYNVogm . . . I request you to stay home and use your valuable time to your growth and happiness.🌷🌻🌼🌳🌾 . . I appreciate 🙏 @narendramodi ji s #jantacurfew mission to stop #coronavirus (at Village - The Soul Of India) https://www.instagram.com/p/B-Bt6KqgPw3/?igshid=1d6lwuup25dmx

[atulcodex]

Google button insta post A few months ago when I am started learning 👨‍💻 Web Development from Eduonix I was super curious about this Google button ⛈. I have tried several times to create it on my own but I was failed 😢😭 many times because of I confused at google logo image in button but today you can see my little the achievement here on my code pen. It is like a motivation 🧘‍♂️ for me in my Dev journey that's why I am sharing this with our Dev community 👨‍👨‍👦‍👦👨‍👨‍👧‍👧👩‍👩‍👧‍👦👨‍👦. Hey, guys if you faced something like this situation in your journey please comment below it will increase our productivity lit a bit more. Inspired by video tutorials and IG posts of @juliocodesyt @divinector @darkcodeonline @webdev.tips #dev #html5 #css #htmlcoding #htmlcss #htmlindonesia #css3 #cssanimation #web #webtoon #webdesign (at Philippines) https://www.instagram.com/p/B9E2cRPg6L8/?igshid=1gyywto2mb660

[atulcodex]

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.

So, what do you think of the idea? Are you going to try it out? 🤔🤨

[atulcodex]

Hello coding people, As you might know, I always write articles about coding, Programming, Freelancing, and Web. If you are interested to learn something new follow me on this link so you get a notification when i will post new articles almost every weekdays

[atulcodex]

Hello, coding people,🙋‍♂️ . How are you? Comment below👇👇👇 . In This post you will learn how to make a Texture effect on a text. it's all game of just single or double CSS lines nothing else no Javascript at all.☝️☝️☝️ . . CODE <\> . mask-image: url(your image link here);   -webkit-mask-image: url(your image link here same image); That's it wlah🔥🔥🔥 If more interested checkout my code pen account for source code which is absolute FREE link in bio🤜👇🤛 #code #codeismylife #codelifee #codebeach #codeclique #codegoals #codeinglife #codeislife #codelife #codepeople #codeallday #code365 (at Downtown Austin, Texas) https://www.instagram.com/p/B6f3VAngQKX/?igshid=1vx6dssqwkfou

[atulcodex]

Today i have learned a great thing about Javascript 🐱‍🚀 .. .. We can mutate array and objects in Javascript but we can't mutate string and number's in javascript 🐱‍🐉

[atulcodex]

Digital clock with pure HTML, CSS, AND JAVASCRIPT get the free source code https://lnkd.in/fWUi8zg

[atulcodex]

gym banner designed by @atuljustano

[atulcodex]

street painting

[atulcodex]

[atulcodex]

checkout the link https://codepen.io/atulprajapati/pen/QzZrKO

[atulcodex]

u can use this for making amazing icon effect, check out the link for the full code