Most tutorials are tailored version they omit mistakes which left us how this guy is writing perfect code in first time but you showed us the whole process which feels more us like ✨
I haven't written css in some 4-5 years. Now that IE is gone it might be far less infuriating than it used to be, but it looks like even a guy who doesn't have to look up a single thing online bumps into things that don't work like he expected them to.
@@bostontechbro When the two collide is where you get scrum meetings and heated discussions on how things should work. So fun... Makes your life more enjoyable and fulfilling when you have someone who will not bend on their design principles because it "ruins the feeling of the flow of the application".
This is the First time I'm witnessing Kyle making actual uncut mistakes... I like the idea of doing it the first time with all the bloopers and all😂😂😂.... Good job man....
I love that you are showing your mistakes and thought / investigation process. It makes me more confident as a developer to see master of this art go through the same hardships as us, mere mortals :D
This is gold! Showing the real stupid mistakes and struggles that developers make is just pure authenticity. It shows that no matter how much of an expert you are, those things are part of the process and you should not be discouraged at all.
Wow... that was an awesome tutorial. I did notice one small mistake. In 40:24, you defined a new variable called "--checkmark-animation-time". In 40:33 you copied the "--circle-animation-time" over but did not change the word "circle" to "checkmark". Essentially, its using the circle delay time instead. Its not a big deal because the two variables are the same in your current code. However, if someone tweaks the "checkmark" delay, it would have no effect.
This was one if the best videos. We have felt the struggle. 😂 I admire your determination. I reckon I would try and fail to do it all with JS and a couple if classes.
that was really great honestly, im impressed, it would be really interesting if you could show how to link and sync the progress bar animation to a backend api call, aniway great job
By recreating this, I remembered one video called “How to create performant css animations” by a cool guy who explains web dev simplified. So I decided to take another way and try to do that using transforms mostly. Scaling those pseudo elements to make squish, and grow. Also decided not to use the svg container for that checkmark and instead use the same pseudo elements, just adding second animations to them. So one element turns into a green circle and another into a rectangle where we see only 2 rotated borders (forming a checkmark). Mine was 90 deg but I believe with some skew I can match the original one, just haven’t enough patience. And ofc only at the end I noticed the checkmark has its own animation, tried to match it by animating linear gradient for border but wasn’t happy with the result, so I skipped that part. Great video
I enjoyed this video so much. Seeing how you think and make this entire animation with CSS was really cool. It was also very insightful to see how you think something might work - it doesn't - and then you go "okay, let's see what else can we do". Even you learn new things, like that 'display' doesn't animate in @keyframes, and how you switched to other ideas when one failed. Thank you for doing this video!
Yo that was really entertaining... I didn't plan to watch everything but in the end I really did... That unedited style is really enjoyable, would love to see more of it
Simply amazing, even if the process was not simply done, haha. I greatly enjoyed this and the time you took to go over every bit of the detail, trial and error when necessary, and the amount of focus you put into achieving it.
Ohh man there were soo many shortcut keys. I would love to see the used keys live in the vid so I could implement them while following the tutorial. That knowledge would also help a lot with my workflow! Great vid btw, felt like I was in class xD
I use Firefox and then the result is quite different. The svg is filling up the whole page. But nice button :) It is easy to fix, by adding this in the styles.css before body{} .checkmark-svg { width: 0; height: 0; }
Happy new year. I always love your videos. Keep improving. sorry I am not in a position to buy your courses, but I am trying my best to support you by watching ads 😂😂. BTW through this video I cleared a lot of my CSS doubts and learnt a few trick from you ;) I am so happy that I learnt al this in new year. Happy new year once again.
This was really great kyle, these kind of tutorial will help us to how to solve the problems that is actually we're facing, Thank for the video and make tutorial like this :).
fyi, chrome has its own eye dropper tool. You can activate it by clicking on a color in the styles tab in the web dev tools. Idk if there's an easier way
I would keep this as a single div element, and then DOM manipulate the content (so remove the "button" content before squishing the button into the size of the progressbar), and while it is a progressbar I would just keep the background colour as an animated background-color gradient based on the loading process. As it jumps back into the green "approved" checkmark I'd just pop back in an element for the checkmark. All the while I'd keep updating aria-labels for the sake of screenreaders.
Impressive. But since you add a custom element for the checkmark. You could have done the same for the after and before elements. The code would probably be more clear?
Wouldn't it be cleaner to have the "submit" text on the ::before element instead of the button so that you have less trouble hiding it for the animation ? The button can still have it's title or accessibility attributes set so it shouldn't be a problem otherwise.
fwiw the reason your pseudo-element had a width of 0 even though you specified a width of 100% is because pseudo-elements have a default display of "inline". If you set its display to block it would have worked fine.
Thanks for this. I always wonder about this when I'm using psuedo-elements and end up trying a bunch of things to get them to work. Then I have no idea what actually fixed it. I've been chucking block on them most of the time haphazardly. It always catches me out when I don't apply block to them. Your explanation will help commit it to memory that block is needed when using width. 😁
Quite interesting video. Anyway, I think setting the width in the button is not the best solution. What about a longer text that doesn't fit in the fixed width?
Really great presentation on challenging css. Too bad web designers are doing this, because it's not what users want or need. It makes web sites slow and seemingly unresponsive. It makes UIs confusing because people don't know what it means. Using dark grey over darker gray makes it hard to see. As a suggestion for future tutorials, how about showing how to make page load faster, e.g. reduce the 3MB content to 30KB. Also, talk about usability, users don't need to be entertained, they don't want their time wasted, and need meaning clear and easy to see.
I created similar animation yesterday with very different approach in CSS , You also nailed it Bro it's nice to see how other developers are Doing things to be better.. 👍👍
Most tutorials are tailored version they omit mistakes which left us how this guy is writing perfect code in first time
but you showed us the whole process which feels more us like ✨
I haven't written css in some 4-5 years. Now that IE is gone it might be far less infuriating than it used to be, but it looks like even a guy who doesn't have to look up a single thing online bumps into things that don't work like he expected them to.
@@jollyjoker6340 that because he had coded it before
I highly recommend Coding Train to you
@@dsa0decoded no he didnt?
well thats the point of a tutorial. you don’t want a tutorial that doesn’t work
Wow. As a back end engineer, this reminds me why I don’t touch front end. Honestly I’m impressed. Good job
Lol I feel the same way whenever I see videos regarding back-end
@@bostontechbro When the two collide is where you get scrum meetings and heated discussions on how things should work. So fun... Makes your life more enjoyable and fulfilling when you have someone who will not bend on their design principles because it "ruins the feeling of the flow of the application".
This is the First time I'm witnessing Kyle making actual uncut mistakes... I like the idea of doing it the first time with all the bloopers and all😂😂😂.... Good job man....
yeah that actually shows and teaches troubleshooting
2:47
"That's gonna make it better to see for the viewing experience"
Me sitting in a dark room: "No"
I love that you are showing your mistakes and thought / investigation process. It makes me more confident as a developer to see master of this art go through the same hardships as us, mere mortals :D
This is gold! Showing the real stupid mistakes and struggles that developers make is just pure authenticity. It shows that no matter how much of an expert you are, those things are part of the process and you should not be discouraged at all.
Wow... that was an awesome tutorial.
I did notice one small mistake. In 40:24, you defined a new variable called "--checkmark-animation-time". In 40:33 you copied the "--circle-animation-time" over but did not change the word "circle" to "checkmark". Essentially, its using the circle delay time instead. Its not a big deal because the two variables are the same in your current code. However, if someone tweaks the "checkmark" delay, it would have no effect.
I was like yeah it'll finally bite him at 43:42 but then he changed them both.
That was what i noticed also, was waiting for him to change the value and see no effect. But he changed both values 😂
@@andersandersen6930 Yup. I saw that too. I would have made a lot more serious mistakes if I tried to do a live programming session.
This was one if the best videos. We have felt the struggle. 😂 I admire your determination. I reckon I would try and fail to do it all with JS and a couple if classes.
46 minutes of pure gold content, thank you for making these animations in a simple and understanding way possible Kyle!!
that was really great honestly, im impressed, it would be really interesting if you could show how to link and sync the progress bar animation to a backend api call, aniway great job
That sounds way to complicated but i look forward to it
you would need js for that. I would change the progress to kind of swing back and forth until the api call finishes
Awesome job! Loved this style of video where things doesn’t work perfectly every time and one get to see live problem solving in action. 🙏🏻
I know nothing about coding and I don't know why that video got recommended but I really like it. It's weird how I find it soothing.
Wow this makes me really want to dive in and learn front end. It looks so fun and the tools seem so powerful these days!
Love to see others with "The struggle"! Great stuff :) Love your videos.
By recreating this, I remembered one video called “How to create performant css animations” by a cool guy who explains web dev simplified. So I decided to take another way and try to do that using transforms mostly. Scaling those pseudo elements to make squish, and grow. Also decided not to use the svg container for that checkmark and instead use the same pseudo elements, just adding second animations to them. So one element turns into a green circle and another into a rectangle where we see only 2 rotated borders (forming a checkmark). Mine was 90 deg but I believe with some skew I can match the original one, just haven’t enough patience. And ofc only at the end I noticed the checkmark has its own animation, tried to match it by animating linear gradient for border but wasn’t happy with the result, so I skipped that part. Great video
I liked that you kept the thought process in!
You are awesome buddy, Learned a lot in a single video. keep the good work up 😄
I enjoyed this video so much. Seeing how you think and make this entire animation with CSS was really cool.
It was also very insightful to see how you think something might work - it doesn't - and then you go "okay, let's see what else can we do". Even you learn new things, like that 'display' doesn't animate in @keyframes, and how you switched to other ideas when one failed.
Thank you for doing this video!
I do server side code. I find CSS SO frustrating. Your grasp and understanding of it really is impressive. Well done.
Hi Kyle
You can just set the attribute pathLength=1 on each path and then you don't need to calculate the length with JS.
Such a great video, and it was nice to see your whole thought process including the ways that didn't work out.
This is the first 46mins video I watched in full 🤣 it's brilliant 😮 I learnt a lot from Kyle
This is your first video i'm watching and daaamn this is great content
Yo that was really entertaining... I didn't plan to watch everything but in the end I really did... That unedited style is really enjoyable, would love to see more of it
This is cool! I commonly use: transform: scale(0.9); transition: all 0.3s ease;😂
Thanks for representing my home town with your shirt in the thumbnail!!
omg my mind is blown. hopefully one day i'll have this much knowledge in my brain lmao
Simply amazing, even if the process was not simply done, haha. I greatly enjoyed this and the time you took to go over every bit of the detail, trial and error when necessary, and the amount of focus you put into achieving it.
That Opened Incognito Mode reveals everything.
Really enjoyed the ride on this one. Thanks!
I learned way more about CSS than I thought I would during this video
The best Animation I've ever seen
"that's gonna make all the children disappear" - Kyle 7:10
Kyle, your videos are always amazing, but this one is exceptionally amazing. Glad to be one of your Patreon supporters!
Awesome! Thank You Kyle!
Perhaps your next vídeo can be about SVGs , maybe used in charts.
Keep up the great work!
Ohh man there were soo many shortcut keys. I would love to see the used keys live in the vid so I could implement them while following the tutorial. That knowledge would also help a lot with my workflow! Great vid btw, felt like I was in class xD
I use Firefox and then the result is quite different. The svg is filling up the whole page. But nice button :)
It is easy to fix, by adding this in the styles.css before body{}
.checkmark-svg {
width: 0;
height: 0;
}
Happy new year. I always love your videos. Keep improving. sorry I am not in a position to buy your courses, but I am trying my best to support you by watching ads 😂😂. BTW through this video I cleared a lot of my CSS doubts and learnt a few trick from you ;)
I am so happy that I learnt al this in new year. Happy new year once again.
Its one of greatest video of css, Thanks Kyle
This is so awesome 💙
👌🏼love the process video
This was really great kyle, these kind of tutorial will help us to how to solve the problems that is actually we're facing,
Thank for the video and make tutorial like this :).
Thanks bro
I love this way of learning , it's very helpful and effective
fyi, chrome has its own eye dropper tool. You can activate it by clicking on a color in the styles tab in the web dev tools. Idk if there's an easier way
Typographer here. “em” is pronounced like the letter, as in “2.5M”. The reason is that it originally meant the width of the letter M in that font.
Thanks for the information, I have never heard of that before, with 3yrs experience in development, it really threw me off
Great work! 🤟🏼
This kind of video idea is really great, this will really help us understand better🔥
Yo bro how, While I was watching, you exactly do everything that I am paying attention to :D
Good tutorial Jordi 👏
Hey Kyle, really love the live coding videos! Thank you
Great Job my Bro 🙌👍
Which css style do you use on your hair? It looks amazing!
In VScode you can Alt + Shift + Arrow-Down to copy a line so you don't have to copy paste anymore
yeeee "bit hacky" feels like an understatement :D
I must say Front end is really interesting
This is amazing and very informative!
That was amazing, I would be curious to see the same but with js, not only css. That would be complementary imo.
I would keep this as a single div element, and then DOM manipulate the content (so remove the "button" content before squishing the button into the size of the progressbar), and while it is a progressbar I would just keep the background colour as an animated background-color gradient based on the loading process. As it jumps back into the green "approved" checkmark I'd just pop back in an element for the checkmark. All the while I'd keep updating aria-labels for the sake of screenreaders.
Great tutorial! Will definitely try that on my After Effect :D
Got some debugging skills😆
nice honest walkthrough
This is incredible animation. Thank you for sharing
Amazing Man! Amazing Gift For New Year
css trick, how to shortly center a child element:
display: grid;
place-items: center;
have fun & happy new year =)
Be careful he is a hero!
you don't have grid in react native and you don't have css)))
Love these type of videos
Great tutorial. Thanks! I learned a lot.
Use before for the gray part and after for the checkmark would be cleaner but less general
I love the mistakes. It shows that all of us make mistakes
wow thank u buddy amazing video , i enjoyed the watching 👍😎🍻
It was a nice coding trip !
Thank you !
..i love your t shirt bro looks sick !!
Thank ✔ Happy New Year
That was amazing for sure, many thanks!
this was really nice!
Like your video, always important information
Impressive. But since you add a custom element for the checkmark. You could have done the same for the after and before elements. The code would probably be more clear?
45:57 Nice to hear your true accent
Hi Kyle, you don't need to use animation of it's only for one time, you can do it with transition
2:47 Flashbanged me so hard... 😂
Wouldn't it be cleaner to have the "submit" text on the ::before element instead of the button so that you have less trouble hiding it for the animation ? The button can still have it's title or accessibility attributes set so it shouldn't be a problem otherwise.
Amazing one!
fwiw the reason your pseudo-element had a width of 0 even though you specified a width of 100% is because pseudo-elements have a default display of "inline". If you set its display to block it would have worked fine.
Thanks for this. I always wonder about this when I'm using psuedo-elements and end up trying a bunch of things to get them to work. Then I have no idea what actually fixed it. I've been chucking block on them most of the time haphazardly. It always catches me out when I don't apply block to them.
Your explanation will help commit it to memory that block is needed when using width. 😁
Gracias esta muy bonito el boton 🤩
Great video
So cool!
I stopped watching many of your videos bc your clickbait titles and thumbnails, but content like this was super enjoyable to watch.
Gotta get them views my dude.
@@discoRyne such a basic normie take it is sad you felt the need to say it out loud.
Incredible
Nice but I'd use scale instead of left, right etc for performance - left/right aren't hardware accelerated.
You are the god of css
He tried to animate display so no not really
@@iTzStickwhere's your web dev channel at? I'm interested in your tutorials.
awesome 👍
I saw this yesterday!
To disappear the button at 8:00 can't we use visibility:none ?
Quite interesting video. Anyway, I think setting the width in the button is not the best solution. What about a longer text that doesn't fit in the fixed width?
So freaking cool
Really great presentation on challenging css. Too bad web designers are doing this, because it's not what users want or need. It makes web sites slow and seemingly unresponsive. It makes UIs confusing because people don't know what it means. Using dark grey over darker gray makes it hard to see.
As a suggestion for future tutorials, how about showing how to make page load faster, e.g. reduce the 3MB content to 30KB. Also, talk about usability, users don't need to be entertained, they don't want their time wasted, and need meaning clear and easy to see.
Buenisimo aporte, +10 y a FAV lince cósmico :P
30:01 is the place where I'll quit and delete the project, and sleep
just under the keyframe at 9:14 , you worte 100%, was it just it's name ? or did it served a purpose ?
@@RobisLV oh! Ty a lot, that's really usefull then
7:10 EXCUSE ME, WHAT!?
(I understand what it means but it's just funny out of context)
I created similar animation yesterday with very different approach in CSS , You also nailed it Bro it's nice to see how other developers are Doing things to be better.. 👍👍