Learn CSS Animations In 20 Minutes - For Beginners

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии • 721

  • @slayingthedragon
    @slayingthedragon  Год назад +24

    🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

  • @fernandoboschiero1178
    @fernandoboschiero1178 Год назад +368

    Dude. I just started studying HTML/CSS a week ago and I have found plenty of good RUclips educators, but your channel has by far been the most enlightening. Thanks for the content!

    • @slayingthedragon
      @slayingthedragon  Год назад +16

      Thank you so much ☺️❤️❤️

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

    • @top10youtubevideos64
      @top10youtubevideos64 6 месяцев назад +3

      How was your journey. I hope you are a full stack developer by now. Please share your experience. Thank You

  • @remikuraa
    @remikuraa 8 месяцев назад +17

    Probably the cleanest tutorial I've ever seen, it's compact, short and well-paced to the point that it feels like the information just migrates into my head with no issue. As someone with a slight disadvantage in learning and thhe need to know why things work the way they do, I recommend this to literally everyone no matter their skill level and learning process. Absolutely legendary, and I sincerely hope I learn more from you just as well as today! Wish the best for you
    10/10 tutorial! (and the kind of tutorial that doesn't lay down a red carpet straight to tutorial hell lol)

  • @johnramos7761
    @johnramos7761 Год назад +41

    Don't stop creating this kind of videos, they are superb: short, concise, and complete. Congrats!

    • @vulturepcs
      @vulturepcs 5 месяцев назад +1

      21 minutes and 22 seconds is not short…

    • @kompetenzbox
      @kompetenzbox 3 месяца назад +1

      @@vulturepcs better than reading an article for 40 minutes imo

    • @vulturepcs
      @vulturepcs 3 месяца назад +1

      @@kompetenzbox thats true ig

  • @waylandmayo
    @waylandmayo Год назад +59

    Your ability to smoothly communicate and pass on a high level of understanding is to be commended. Great job, can't wait to see what you do next.

  • @amad7.7
    @amad7.7 2 года назад +362

    great content, you will blow up soon if you keep posting high-quality content like this. really appreciate the effort gone into your videos

    • @slayingthedragon
      @slayingthedragon  2 года назад +21

      Thank you very much !! 😊

    • @qaushain
      @qaushain Год назад +5

      So true

    • @5464654135756
      @5464654135756 Год назад +7

      I’m of the same mind. I could already tell from the beginning. No promenade and only content you need to know 😮

    • @vivu9459
      @vivu9459 Год назад +1

      It’s true

    • @StarHive5
      @StarHive5 Год назад +1

      🎉HE DID🎉🎉😊

  • @Uzair57
    @Uzair57 Год назад +16

    I am so confused about why this content is free, literally you can show me your 2 videos and after looking at your style of teaching and explaining. I will literally pay to get more content. This is amazing and I will definitely share your channel to all my fellow web developers

  • @jesf570
    @jesf570 4 месяца назад +3

    Holy shit, this is how all youtube videos on coding related tutorials should be shown. Amazing. Amazing.

  • @francisnjugunaldc
    @francisnjugunaldc Год назад +10

    I dont know why, but i have already watched every video in this channel, i feel like he is always talking to me, great content

  • @octotube463
    @octotube463 7 месяцев назад +2

    This video was really good; it was concise and complete

  • @avrakadavra1552
    @avrakadavra1552 7 месяцев назад +2

    Damn, I'm always replaying this because of how concise it is and realizing I didn't yet like the video... Thank you for this

  • @bartheus6709
    @bartheus6709 Год назад +3

    The way u explaining all step by step then refactoring it to how it at the end can look like is a god damn good job ! GREAT WORK !!!

  • @GuillermoArellano
    @GuillermoArellano 7 месяцев назад +4

    This video did a much better job of explaining the concepts than other videos that claim higher upvotes and subscribers. This is a gem! Highly recommended!

  • @2010daigo1
    @2010daigo1 2 года назад +18

    Your production quality is good enough to deserve 100x more subscribers

  • @soundtrickz
    @soundtrickz Год назад +12

    Man, you deserve every flowers you get. Your explanations and details are accurate and concise. Top quality content 👏🏽 👏🏽

    • @padhai2535
      @padhai2535 4 месяца назад

      Are you full stack developer now??

    • @soundtrickz
      @soundtrickz 4 месяца назад

      @@padhai2535 yes I am

  • @pranavdcpatil
    @pranavdcpatil Год назад +8

    What the? This is so Amazing... Never had seen something like this so smooth regarding css animation tutorials... Thanks a bunch bruh... It was very insightful and helpful. Just subbed ❤️💯

  • @thuanh9247
    @thuanh9247 8 месяцев назад +1

    Big respect for you from Vietnam 🎉. I am starting my first web-based application for school prj and your channel arrived just in time ❤

  • @josephcastillo3941
    @josephcastillo3941 Год назад +1

    That glowing button is *chefs kiss*, any chance we can get a full blown breakdown of those effects you did?

    • @slayingthedragon
      @slayingthedragon  Год назад

      Maybe I might :p

    • @hehswhs1207
      @hehswhs1207 Год назад +1

      @@slayingthedragon brother you need to .. your audience is waiting for it .. 🥲

  • @shahobiddinismoilov
    @shahobiddinismoilov 5 месяцев назад +1

    I found your channel from your flexbox video, now I am addicted to your content and binge-watching all your CSS tutorials. Your explanations are the best I have seen in any CSS tutorial. They're so good

  • @NeverEvi
    @NeverEvi Год назад +4

    I was watching this as a review, but was really excited to learn that keyframe percentages don't have to be in order like that! Thanks for the info, and great video!

  • @codebreaker8928
    @codebreaker8928 7 месяцев назад +1

    You and your videos r goat They r great to learn and revise since they r simple and short

  • @hasnaat-du4ft
    @hasnaat-du4ft 9 месяцев назад +3

    I have found plenty of good RUclips educators, but your channel has by far been the most enlightening.

  • @gildacles1238
    @gildacles1238 Год назад +2

    So far, you make the best webdev tutorials I have ever seen. Its made for people escaping tutorial hell.

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @noirsociety
    @noirsociety Год назад +23

    This is truly the best CSS animation tutorial I have ever seen! Thank you for showing us how to build our own mini-library through utility classes. You are such a great teacher and thank you for sharing your knowledge with us :)

    • @slayingthedragon
      @slayingthedragon  Год назад

      Thank you so much ❤️❤️❤️☺️

    • @UjjwalMishra_68
      @UjjwalMishra_68 Год назад

      @@slayingthedragon bro is there any differeence between only transition and transition delay

    • @slayingthedragon
      @slayingthedragon  Год назад +2

      @@UjjwalMishra_68 Transition is a shorthand and can do all of the individual transition properties while transition-delay can only add a delay

  • @bibs9924
    @bibs9924 5 месяцев назад +2

    Too bad I can't afford your courses atm because I definitely wouldn't mind paying for stuff with this level of quality. Very concise and well explained. Subscribing and hoping you get many more views, great stuff!

  • @Luxcium
    @Luxcium Год назад +3

    I got that in my feed and I subscribed I have to admit that I am writing this comment at 0:10 and that I can not wait to watch all your other videos ....

  • @adeptusxiao02
    @adeptusxiao02 Год назад +108

    Why did i see this only now when school is over😢😂

    • @My3dstudio686
      @My3dstudio686 11 месяцев назад

      Same

    • @chehi5624
      @chehi5624 11 месяцев назад

      Fr

    • @Speedytransloop_Inc
      @Speedytransloop_Inc 11 месяцев назад +5

      Even when school is over never stop learning,
      You can supplement on what u gat to go bigger than your college colleagues 😅

    • @adeptusxiao02
      @adeptusxiao02 11 месяцев назад +1

      @@Speedytransloop_Inc we use java🫠

    • @adagodwin8976
      @adagodwin8976 9 месяцев назад

      Samee

  • @dalan9034
    @dalan9034 7 месяцев назад +1

    Your lessons make it so much easier to understand, while also making sure we put our own work into it (for beginners like myself)! this is the second video of yours that I watched and it's so enjoyable!
    it's especially good if you forget what you just learned and need to refresh your memory, while also learning new things? anyways, thank you a lot :)

  • @RoccoBronson
    @RoccoBronson 11 месяцев назад +1

    Your channel is pure gold. Don't ever stop putting out videos. You are destined to millions of subs, you deserve it.

  • @Eavesdro_pper
    @Eavesdro_pper 4 месяца назад +2

    This is what I have been looking for , dude you deserve my subscription.

  • @abdulRahman-6262
    @abdulRahman-6262 8 месяцев назад +1

    You are really slaying the dragon , clean , clear , enlightening

  • @TimGavin
    @TimGavin Год назад +1

    Spent several hours today trying to figure out how to do a bounce transition and you covered it beautifully in 2 minutes lol

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @coil8906
    @coil8906 2 года назад +1

    naw dawg, imma like this and comment to help your algo in any way I can. you gotta blow up on here, I and many others NEED this level of quality content. please continue what you're doing, big fan of the aesthetic and presentation format. you're gonna be huge on here in the near future I just know it

    • @slayingthedragon
      @slayingthedragon  2 года назад +1

      Thankkkk you very much, I really appreciate it 💯💯 😁

  • @ArunM-y1e
    @ArunM-y1e Год назад +2

    seriously i never seen someone explaining like this. thank you 🤩

  • @underconstructionpersonalt725
    @underconstructionpersonalt725 10 месяцев назад +2

    Yes your videos a legit dude. It´s awesome how much effort you put into it to provide us with the very essence of the lectures. I will definitely support you.

  • @sachingyandeogaikwad6278
    @sachingyandeogaikwad6278 Год назад +2

    Great Sir.... Its so real expeience i feel like i am sitting in calss room . **i wantched video at 0.75 speed.

  • @akmzahidulislam2764
    @akmzahidulislam2764 2 года назад +2

    You probably don't know what invaluable resources you are throwing to us! All I need to do is to train myself as a good fielder (like in cricket) to become an effective ball catcher. Keep it up, bro! This way of teaching tech is the best to teach the difficult aspects of coding. This is like having a sherpa in the attempt of climbing the mount Everest! Follow, and explore further!

  • @amineherizi4687
    @amineherizi4687 Год назад +1

    Where are you man ? we need more videos from you ! You ROCK !!

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Thank you! I'll be back in like a week with an announcement and then weekly videos. Ive been busy with this -> slayingthedragon.io
      Much love!

  • @MattBiddick
    @MattBiddick Год назад +3

    By far the best CCS explanations I’ve seen. I know these must take a lot of effort to make. Keep it up!

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @breadmilkYT
    @breadmilkYT 8 месяцев назад +2

    Teaching myself css/html and Im making my own personal website, I then had the idea of putting a looping animation on the home page and the very next time I open RUclips I get this video. Get out of my head

  • @DenzelBraithwaite
    @DenzelBraithwaite Год назад +1

    awesome, just helped me make a card "slide in" animation when the player gets a new card ;) really appreciate it

  • @artemisfowl9002
    @artemisfowl9002 Год назад +1

    dude.. you're a fuckin CSS GOD! i'm literally blown away by your knowledge and style of teaching, its almost scary how good you are

  • @IrfanShaikh-br9ie
    @IrfanShaikh-br9ie Год назад +1

    I never thought it would be so easy.This is the only channel where i can learn complex css in a very easy way with simple examples hats off man i am never gonna unsubscribed you . 🙌😊

    • @slayingthedragon
      @slayingthedragon  Год назад

      ❤️❤️❤️❤️❤️❤️

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @sufyanakbar7153
    @sufyanakbar7153 11 месяцев назад +2

    Where were you all my life. This is gold

  • @isabellexavier5458
    @isabellexavier5458 Год назад +3

    I've never seen such a good quality at teaching. Thank you very much for the content!

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @microsurf128
    @microsurf128 7 месяцев назад +1

    Brilliant lesson, without all the "blab blab blab" that others do! - Thank you that was great!

  • @facefamousee
    @facefamousee День назад +1

    I love the in depth teaching, greatly appreciated. Thank You.

  • @theloose7971
    @theloose7971 2 года назад +1

    I'm very happen, that the algorithm showed me your channel. Keep your great work up

  • @putudharma4352
    @putudharma4352 Год назад +1

    Wow dude, your teaching method is really work for me. Been watching countless tutorial, your one is the easiest to uderstand so far. Auto sub!

  • @JoSanInk
    @JoSanInk 7 месяцев назад +1

    this was the shortest 20 min video i ever watched.
    great content.

  • @MilanGurung-oz5co
    @MilanGurung-oz5co 8 месяцев назад +1

    one of the best animation tutorial video.

  • @CaioCromos
    @CaioCromos 6 месяцев назад +1

    thats what i call a high quality tutorial. really excited to try all this!

  • @iamagamer4413
    @iamagamer4413 Год назад +2

    Finally a RUclipsr that asks you to like and subscribe correctly

  • @Mridul_Paul
    @Mridul_Paul Год назад +4

    great content...covered the topic effortlessly without over-explaining.. loved it❤

  • @meeljan
    @meeljan 2 года назад +1

    This will be huge once it blows up. I'm so lucky i found this

  • @arthurkelvim5689
    @arthurkelvim5689 Год назад +1

    Im Brazilian Student and you help me, thanks bro.

  • @SeriousSnake
    @SeriousSnake 10 месяцев назад +1

    Bro, this helped me so much. Using the keyframe knowledge with the little knowledge I have, I made some epic animations!

  • @amanpratapsingh3256
    @amanpratapsingh3256 Год назад +3

    Man How do you create such a high quality videos with so much of condensed data.....I will also say that you have some dope video editing skills....Now we need lesson on video editing also.

  • @GfoxSim
    @GfoxSim 10 месяцев назад +1

    WOW! Animation really makes websites look cool and fun to use. It's like Tony Stark's impressive interfaces.

  • @m.m4051
    @m.m4051 Год назад +8

    i love how straightforward this is! you made it look so easy, i'm so excited to apply this to my practice project. thank you 🙏

  • @flo8903YT
    @flo8903YT 9 месяцев назад +1

    BEster mann, ich schwöre du hast mein leben gerettet brudi. Ich kann dir nicht genug danken! 👍👍

  • @AltBox4
    @AltBox4 Год назад +1

    Best introduction to keyframes on youtube and animations. Liked, commented, subscribed!

  • @developer_014
    @developer_014 Год назад +3

    Great content, and what i really loved was ur simplicity!!

  • @sayanghosh6996
    @sayanghosh6996 2 года назад +18

    this is really helpful and way more detailed than other tutorials, thanks

    • @slayingthedragon
      @slayingthedragon  2 года назад

      Thank you! I'm glad it was helpful 😃

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @osamugaming1807
    @osamugaming1807 Год назад +1

    one of the best tutorial for beginners like me, you explain every details for me thank you dude.

  • @brazwen
    @brazwen 26 дней назад +1

    I love your content. concise and simple. I wish you do something similar with JavaScript.

  • @iak4mm
    @iak4mm Год назад +1

    best tutorial for animation css

  • @mimcris8481
    @mimcris8481 11 месяцев назад +1

    One of the best CSS contents on RUclips!

  • @anushkasingh9470
    @anushkasingh9470 6 месяцев назад +1

    Thank you so much! I have learnt so many CSS concepts through your videos. Always concise with such clear examples. Keep posting frontend stuff!💥🤟

  • @taherariwala4055
    @taherariwala4055 Год назад +1

    Im not a beginner to CSS animation, but i did learn new things, thanks.

  • @BindomCongat2
    @BindomCongat2 Год назад +131

    20 minutes, but it take me 5 hours to complete, what the hell?

    • @UchennaChimaobi
      @UchennaChimaobi 8 месяцев назад +29

      You probably doing animation for the first time, this guy must have coding for years

    • @bhanupriyasd1899
      @bhanupriyasd1899 7 месяцев назад +5

      Exactly

    • @ChroniclesChro
      @ChroniclesChro 6 месяцев назад +9

      😂😂😂, I was thinking am the only one... don't worry we will get there

    • @M_Saqib_ms
      @M_Saqib_ms 2 месяца назад

      That's good

    • @alfredodey
      @alfredodey Месяц назад

      😂😂

  • @codingwithk2.085
    @codingwithk2.085 Год назад +2

    Tysm, I can make my website with proud now!

  • @aytuncdemir4844
    @aytuncdemir4844 Год назад +1

    Explanation is really clear. You should start HTML\CSS tutorials.

  • @captainfire74
    @captainfire74 6 дней назад +1

    Wow, so clear and condensed, perfect ! Thx for your work ! ;)

  • @darkvador2014
    @darkvador2014 Год назад +1

    Thank you for the explanations

  • @marti9442
    @marti9442 Год назад +4

    Probably the best channel I’ve found , where im actually understanding syntax and fundamentals , will definitely be looking forward to more of your content

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Thank you Marti I appreciate it very much ☺️, more content on the way 🔥

    • @NeoCoderNet
      @NeoCoderNet Год назад

      CSS 3d rotate card. Along with Source Codes😁
      ruclips.net/user/shorts_HSut9_E_fc?feature=share

  • @useronetwothree-z6f
    @useronetwothree-z6f Месяц назад +2

    best css tutorial, fast and ez to learn, thx a lot❤❤❤

  • @360Benefit
    @360Benefit 10 месяцев назад +1

    In four words YOU ARE A TUTOR, bravo!!

  • @TheEricon
    @TheEricon 2 года назад +1

    bro you need to sell full length courses, your explaining format is really good. I do tutoring and this is prime tutoring!

  • @KyrylWins
    @KyrylWins 8 месяцев назад +1

    bro u are literally God of an explenation. I am amazaed and satisfied thanks

  • @army9700
    @army9700 8 месяцев назад +1

    Fantastic tutorial. keep up the awesome work

  • @FMNathan999
    @FMNathan999 9 месяцев назад +1

    Thanks man, did you help me so much, I'm beginner on HTML and CSS, your video is amazing.

  • @TokyoXtreme
    @TokyoXtreme 8 месяцев назад +1

    13 videos and 94k subs - hell yeah. I'll probably binge them all tomorrow.

  • @zidanshaikh4929
    @zidanshaikh4929 Год назад +1

    bro how are you only at 20k subs this is so freaking good please keep making vids like this

  • @sabonacio
    @sabonacio Год назад +1

    man you really made it easy
    Salutes from Portugal.

  • @farhangmdc
    @farhangmdc 9 месяцев назад +2

    Very helpful !!

  • @runyagwavava4930
    @runyagwavava4930 5 месяцев назад +1

    Man you saved my life. Thank you. The explanation was clear.🤗

  • @Dakar4
    @Dakar4 Год назад +1

    Crazy content. Thanks and congrats.

  • @sanarahman6996
    @sanarahman6996 Год назад +1

    The reusability concept was awesomee.....Great work ..thanks alot

  • @omarzakareia868
    @omarzakareia868 Месяц назад +1

    Such a Talented teacher

  • @cocgamerzs5049
    @cocgamerzs5049 Год назад +1

    Man! You are awesome 👍👍👍
    Your way of talking and politeness are incredibly amazing 🤩🤩🤩
    Just love it broo!!!!!

  • @mryelaer4378
    @mryelaer4378 6 месяцев назад +1

    keyboard is a little bit to loud, but I love this tutorial, helped me a lot

  • @vaibhavtyagi619
    @vaibhavtyagi619 Год назад +1

    i am a beginner and you blow up my mind bro and nicely explain

  • @mihailvasilkoff4330
    @mihailvasilkoff4330 2 месяца назад +1

    You deserve my subscription! Fabulous

  • @TheuppercaseM
    @TheuppercaseM Год назад +1

    just discovered this channel and youre so underrated

  • @shineLouisShine
    @shineLouisShine Год назад +1

    Very kind of you o share your knowledge and talent.
    Nevertheless, after the start - it did cross my mind that the video will contain unique shapes...

  • @thebluriam
    @thebluriam 3 месяца назад +1

    A master in the craft and a phenomenal RUclips name, insta-subscribed

  • @Alima_khan1
    @Alima_khan1 7 дней назад +1

    Indeed ! Your tutorial helps me to better understand in one shot 🧐... Impressive.... Keep uploading your treasure to us ... 😂

  • @pedromuniz-b7d
    @pedromuniz-b7d Год назад +1

    Wow dude, what a awesome video! I was looking for a simple and clear tutorial and i found even more here! Thank you so much, awesome content!

  • @victoriakezerle-cole
    @victoriakezerle-cole Год назад +1

    Thank you.. ily rn cause i was beating my head into a wall trying to figure our where i was suppose to connect the code to get the style to work! omg.