VS code has so many useful shortcuts you can use. For example: m0 for margin: 0; p0 for padding: 0; df for display: flex; jcc for justify-content: center; aic for align-items: center; Hit tab after these shortcuts!!
More than that there are more usable shortcuts which includes h1.header for h1#header for div>h1.class for div>h1+p for Well there are more but these are the most of the ones i use
The best and compatible way(safari+iexplore) is to use multiple bg: background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('image.jpg');
Complete beginner here. I like the way you put it all into one, rather than breaking it all up into sections and then trying to fit it all together, plus your voice isn't sleepy 😂 Keep up the good content 👍
This is one of the best tutorials ever! I've been watching a lot lately and learned so many new tricks with CSS from watching this, plus the js animations I learned.
love your videos, im more of a back end programmer but you help me get better with front end stuff aswell. Making stuff look pretty has always been my weakness
just wanted to say your videos keep me motivated even when im really frustrated cause my code was garbage. what i also like is your approach of showing the many things you can do with js and not just telling how to write an hello world program thx
The moment when u used z-index to pop-up the headline at 13:50. You should use rgba with build-in opacity. It wouldn't affect the text. The less z-index u use the happier u are with later project effects.
Awesome tutorial. One other cool thing I learnt here was the 'object-fit' css property for an image. I normally would create a div and make the image a background image and use 'background-size: cover' but this is waaaaay better. Thanks.
nice tutorials! Go on, great animations! little trick: instead of writing justify-content: center; align-items: center; just write: place-items: center; ;) good work
You are incredible.Thank you for explaining Page Animations with JavaScript in such a simple and beautiful way. We want more animations tutorial video.
So I come across to one of your videos once in a while, because I have some tabs open and when I feel like I need to learn something new, I open one. And after a while of not watching your videos, when I see you doing a joke, I feel like I've missed that. Please don't stop making jokes :D
I would suggest a video that starts showing the library (animation) and how it works.. instead of all the css training part.. OR if you really want to use 2/3 of the tutorial doing design, you can add a link to the starting point where the content of the 'title' of the video really starts.. and people decide if they want to do the filling or not.. cheers! great channel!
VSCode has code formatting features built-in. It also has addons/plugins like Prettier+ that also do that in a slight different way. The shortcut for me is SHIFT-ALT-F. I don't rememeber if you need to activate anything. Good luck.
It's scary how quick he is with this. It's not complicated, but still, it goes to show just how much second nature it is to Ed. It's at the tips of his fingers. I am now in doubt if I'm overcharging for dev time. Anyone know, what is this kind of productivity worth per hour on the US market?
Man I hate being a noob at programming, even little details that aren't covered cause so much hassle for example when you drop the first tweenmin thing in at 1:35 mines doesn't have this 'integrity' or 'cross origin' thing that auto populates. Maybe these things are a given to the adept programmer but not beginners, it's so frustrating because most programming tutorials assume you already know these things when you don't, then you need to spend 40 mins trying to get it sorted when you have a deadline in 2 days SHEESH. Thanks for the video though you awesome!
Unfortunately I cannot support you on patreon, but what I can do it's give you a like, definitely subscribe, and last but not least important thank you for your videos, I appreciate them so much!
Hey Dev Ed, I love your videos :) Can you make a complete guide like what equipments you are using to create videos on youtube and how you do the editings?
that kind of tech is intended for advanced programmers, so there aren't any big chances you're gonna find WASM tutorials. it involves coding in a strong typed language such as c++, rust , c, etc. for things that are really processor intensive such as (embed browser crypto coin mining, video processing - see ffmpeg compiled to wasm library, and many others). The average joe looks for simple things to learn, so, again, I don't think you're gonna find any instructive tutorials about wasm. ;)
@@TechdubberStudios true that, its for heavily CPU intensive web stuff, like running entire game engines in web environment... its been around for a while, like unity and unreal engines have already used it.. sure thing, that its an overkill for like 99% of the web as of current state of 2019, but it might be the future, cause its so much faster and effective then JS due to its low-level approach... i believe companies will continuously seek for the ways to adapt their products to web, cause of cost effectiveness, accessibility and availability, data storing and back-ups, easier maintenance and updates, customization and scalability options, security concerns and so on...
Should we do more animations?
yes please
OF COURSE!
Yes! Always 😊
YEEEEEEEEEEEES! I LOVE HOW YOU TEACH!
yes of course.. please
VS code has so many useful shortcuts you can use. For example:
m0 for margin: 0;
p0 for padding: 0;
df for display: flex;
jcc for justify-content: center;
aic for align-items: center;
Hit tab after these shortcuts!!
Ty
:P i'm old school and prefer dreamweaver which also has all that shortcuts and maybe even moooooooore
Precisely that is not VS Code itself. It is because of Emmet you can add Emmet extension on any code editor and have that fun. :D
More than that there are more usable shortcuts which includes
h1.header for
h1#header for
div>h1.class for
div>h1+p for
Well there are more but these are the most of the ones i use
@@MaddoxSt33 Nicee... I use that too
"Everything is zero, just like my life"
I felt that
It always surprises me just how much of a difference a simple animation can make when done right!
I learn more code here than in my entire life :v because you, i have a new job! thanks for everything!
Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills
Man I could watch your tutorials the whole day
For reducing the brightness of the image, you can juste add in the CSS " filter: brightness (80%) " on the image !
can be used also ,background-blend-mode: ; ,property
The best and compatible way(safari+iexplore) is to use multiple bg: background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('image.jpg');
Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help
watching this video in 2020, hearing you say "we are close to 100k'" when you are now close to 500k!
@@fftvmedia23 now he is 562k isnt that good?
@@fftvmedia23 now on 602k hahaa
@@fftvmedia23 its nov 8th 2021 and he is reaching 706k thats wow i think
Complete beginner here. I like the way you put it all into one, rather than breaking it all up into sections and then trying to fit it all together, plus your voice isn't sleepy 😂 Keep up the good content 👍
I was kind of going through something tough and your flip-flop comment about the animation literally made my day 😂
This is one of the best tutorials ever! I've been watching a lot lately and learned so many new tricks with CSS from watching this, plus the js animations I learned.
Woooow, the :: after selector to create opacity just made my day :)
Nice the clarity u have is awesome sir
the video is on point ...no bullshit ..no talking too much ...you got yourself a new happy subscriber
wow, I'm soooo impressed how you easily do publish this wonderful web page. Thanks a lot
"My mom used to throw these foot flops at me when I was a child"
Dev Ed is Asian confirmed
He is middle eastern confirmed
He is African confirmed
He is latino AND caribbean confirmed
He is Japanese confirmed...
He is Leprechaun confirmed ;D
You always make my day with your positive mood :D
Thanks for staying awesome! And more animations please!!
Приятно видеть русскоговорящего здесь)
Hi
I am MD: G M kader jeem
From Bangladesh...
I am,,,,,,,,,,.
"I was fascinated by that motion" lol This guy is very funny. Weird but funny
love your videos, im more of a back end programmer but you help me get better with front end stuff aswell. Making stuff look pretty has always been my weakness
Your channel is growing fast, congrats for that!!
just wanted to say your videos keep me motivated even when im really frustrated cause my code was garbage.
what i also like is your approach of showing the many things you can do with js and not just telling how to write an hello world program thx
The moment when u used z-index to pop-up the headline at 13:50. You should use rgba with build-in opacity. It wouldn't affect the text. The less z-index u use the happier u are with later project effects.
of maybe just change the sudo element to before and it will do the job , without the help of z-index
There's also "background-color:" "background-blend mode:"
How? 🤔
@@lucas.campora .hero: after { background-color: rgba (0,0,0, .5)} The ".5" is is just an example of a number less than 1 you can put in there.
No. I want to use z index, so in a few months i will be uzing z-index: 9999 cause its cool
Thank you for existing Dev Ed ♥️
This guy! One of the best code youtubers there is!!!!
More animation!! Please! This is so cool !!! From Brazil!
Can't find either the timelinemax or tweenmax in the gsap library. Help me out, I really need this to work!
Try this link:
cdnjs.com/libraries/gsap/2.1.3
@@SanjeebLama Thanks a lot dude
@@pierre-louis2711 I am glad i could help.
Good Luck!
@@SanjeebLama Thanks so much!
Just came home after office.. I saw your premiere...made my day..
same here...!!!!
I love these videos. Your method of explaining what each and every thing does is awesome!
Awesome tutorial. One other cool thing I learnt here was the 'object-fit' css property for an image. I normally would create a div and make the image a background image and use 'background-size: cover' but this is waaaaay better. Thanks.
Those who are here for the animation part for app.js 😅 14:10
Thank you Mr. Dev Ed! I learned a lot
My favorite teacher. I no longer search for something. I search specifically dev ed
Damn bruh u r a diamond! This is so awesome, that u're not a regular boring developer. Floot flops throwing moment had me laughin so hard
This man is amazing. I am laughing and coding at the same time
Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help
"Everything is zero...just like my life" lol 😆
love the feel good factor of your videos. If every body was like you, the world would be a better place ! we can hope! Please keep publishing.
Thanks For this wonderful tutorial and On behalf of those who don't want to comment yes we need More Animation tutorials.
nice tutorials!
Go on, great animations!
little trick:
instead of writing
justify-content: center;
align-items: center;
just write:
place-items: center;
;) good work
smashing the like button before the video starts. Its becoming a habit because your content is always amazing.
I might ask a js course from you for my birthday gift, great work filling my yt recommended
Woooow man I like this episode epically @0:36
How are you this good? This tutorial is blowing my mind 🤯🤯
Dude, your videos are awesome!
I really like the animations like this. Please continue doing these kind of video. Thanks
You are incredible.Thank you for explaining Page Animations with JavaScript in such a simple and beautiful way. We want more animations tutorial video.
The reason why i like your videos because in your video i get 2 things :
1) Knowledge
2) Entertainment (Bcz You are Too funny!)
Appreciate it!
Hi, your personality is absolutely friendly and I have got a lot of motivation and information of your videos so thanks so much!
you are the best teacher ever
So I come across to one of your videos once in a while, because I have some tabs open and when I feel like I need to learn something new, I open one. And after a while of not watching your videos, when I see you doing a joke, I feel like I've missed that. Please don't stop making jokes :D
The value from this video alone is worth $10k
what is the url of the picture that you used in the video
Yes Dev this is very useful and attractive animation..Please make more videos or GSAP animation tutorial series
Man its the 1st JS page i really do, works fine with the version of Gsap includin all older Libs, i'm proud to have done it ! Many thanks for that ;)
the sound of keyboard is sooo nice!!
Man, I always hated frontend. Now you encouraged me to improve my frontend skills
I would suggest a video that starts showing the library (animation) and how it works.. instead of all the css training part.. OR if you really want to use 2/3 of the tutorial doing design, you can add a link to the starting point where the content of the 'title' of the video really starts.. and people decide if they want to do the filling or not.. cheers! great channel!
just want to say thank you so much. every video of yours is awesome and it's helping me a lot.
You have godlike animation skills
I like your animation
Really great content on all of your videos, learned quite a lot from these , thanks Ed .
I watch your videos since yesterday and its so cool, animations looks so easy when you code !! (im a back end developper and i suxx in animation lol)
Inspirational the way you found out the love for animations hehe
18:26 How did the code got suddenly organized like that after you hit save? Please anyone knows?
VSCode has code formatting features built-in. It also has addons/plugins like Prettier+ that also do that in a slight different way. The shortcut for me is SHIFT-ALT-F. I don't rememeber if you need to activate anything. Good luck.
The plugin called: ”Prettier”? What a great name. Will install it. Thank you very much for your reply!
Bro, I love your tutorials. Keep up the good work.
86K subscribers!! Congrats mate!! ❤️Love from India 🇮🇳
Wow animation. Looking excellent.
I love how you teach and your animations and designs are awesome. keep up the good work Ed. More animation videos pls
My best tutor ❤️ love from India 🇮🇳 Thanku so much sir
Hi I am Virat Kohli Captain of Indian Cricket Team hahahahahahaha
Thanks for introducing me to GSAP. I would certainly love more animation videos.
Thank you! Your videos are a huge impovement towards becoming a Web-Dev
I really enjoyed it. It was quite cool and you really spiced it with fun and I before I could realize, I had watched it all.
thanks a lot!
Between 21:27 and 21:28 the background with opacity is not aligned. Why? Thanks
It's scary how quick he is with this. It's not complicated, but still, it goes to show just how much second nature it is to Ed. It's at the tips of his fingers. I am now in doubt if I'm overcharging for dev time. Anyone know, what is this kind of productivity worth per hour on the US market?
Love the easiness of coding..I know it is because of hard hours you put before creating the website again with smoothing effect.
Big Fan
One of the best i have seen in recent times. Cool stuff
Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help
Js
I use CSS for CSS, am looking into GSAP, also I owned a VW Westphalia and it was a great vehicle.
Thanks ED Mom for giving birth to Ed, and giving him the inspiration to be a magnificent designer (the method isn't important :)
Man I hate being a noob at programming, even little details that aren't covered cause so much hassle for example when you drop the first tweenmin thing in at 1:35 mines doesn't have this 'integrity' or 'cross origin' thing that auto populates. Maybe these things are a given to the adept programmer but not beginners, it's so frustrating because most programming tutorials assume you already know these things when you don't, then you need to spend 40 mins trying to get it sorted when you have a deadline in 2 days SHEESH. Thanks for the video though you awesome!
It is amazing. I love your designs.
It looks so cool yet very simple.
Your techniques is awesome and more helpful for me....... Thanks bro for making different different types videos for us ):
Awesome tutorial, as always!
im just gonna bookmark your entire channel...
Thank you so much for such awesome tutorials...you are one of the best teachers here.
your works are always unusual and impressive bro ))) like
Dude your whole vibe is like that guy from sillicon Valley Richard Hendricks
Unfortunately I cannot support you on patreon, but what I can do it's give you a like, definitely subscribe, and last but not least important thank you for your videos, I appreciate them so much!
love the videos you do man thank you for this!
Hey Dev Ed, I love your videos :)
Can you make a complete guide like what equipments you are using to create videos on youtube and how you do the editings?
If you want to see the animations being explained, start from 14:00
thanks very much. great tutorials. big fan.
Any chance of WebAssembly crash course in the future?
Vue ?
that kind of tech is intended for advanced programmers, so there aren't any big chances you're gonna find WASM tutorials. it involves coding in a strong typed language such as c++, rust , c, etc. for things that are really processor intensive such as (embed browser crypto coin mining, video processing - see ffmpeg compiled to wasm library, and many others). The average joe looks for simple things to learn, so, again, I don't think you're gonna find any instructive tutorials about wasm. ;)
@@TechdubberStudios true that, its for heavily CPU intensive web stuff, like running entire game engines in web environment... its been around for a while, like unity and unreal engines have already used it.. sure thing, that its an overkill for like 99% of the web as of current state of 2019, but it might be the future, cause its so much faster and effective then JS due to its low-level approach... i believe companies will continuously seek for the ways to adapt their products to web, cause of cost effectiveness, accessibility and availability, data storing and back-ups, easier maintenance and updates, customization and scalability options, security concerns and so on...
Watching this in the future, you have 723,000 subscribers 🥳🥳🥳🥳
These are some high quality guides!!!
You make it very easy to learn and understandable! Thank you!
You are so funny, an talented. Thanaks for posting this!
Keep these tutorials coming!! very dope!!!
Now we want to see your VW Van!
hey hi, I have a doubt in translate(-20%,-70%) at 11:57 can you please explain when you were doing it? Thank you
Animations are the best. Love how you teach!
My mans got some crazy hair but i respect it 👊