Topics: 1. 1:36 - Pointer-events:all 2. 5:38 - Block vs Inline 3. 11:15 - Margin auto to center 4. 12:21 - Line-height to center text 5. 12:31 - p::selection and p::first-letter 6. 14:08 - Ancla with smoth scroll 7. 15:46 - Invert the colors on the screen 8. 18:18 - Adapt text on risize 9. 19:45 - Doble box-shadow 10. 21:55 - Text Gradient
Dharmang Learn English? The one who posted the comment really had no context to go off of, so if you have nothing constructive to say, fuck off snowflake.
The Creative HTML5 and CSS course is officially launching on December the 4th! Thanks so much for all the wonderful support this year and hopefully next year we can do several other courses including javascript, ui design and more!
He makes learning so much fun. Anyone can be an instructor, but not everyone can teach. He teaches by using enthusiasm and a love for the material. Thanks
btw: using display: inline-block (or even inline-flex) will give you the benefits of inline and block... takes only the space thats needed, but takes margin, height and stuff... great vid (as usual 🙂)
Dan Palu I took the course. It was great the way he explained everything easily and he is an engaging teacher. I felt I leaned a lot and maybe I could get that from udemy but I was entertained along the way as well. If you need to learn the concepts I suggest getting it
Trick 1. You can use javascript. First animate with CSS, set timeout to same time that animation takes in javascript and it works. Also just make something that blocks user from activating script multiple times, simple i++ and i-- will work here. Using your trick element is still displayed so it takes space, if you need that space to be empty for other elements i think my trick is better here.
For three months I'm learning to program as a new hobby. So yes, most of the content I did not know ;) I'm so happy that people like you make these enthousiastic video's and tutorials for other people to learn from. Thank you thank you!!! I hope you realise you are bringing a lot of joy and professionalism into the world by doing this.
Hey Ed i've been watching your videos for a while and i just realized how the background music makes it way more watchable and less monotone than other tutorial videos. Thank you for the amazing content and keep it up!!
You are the best!!! I cannot wait to purchase your course. I always go for free courses but I’m sure that yours will worth every penny, even if I will not learn anything new I’m happy to support you.
The tag with "TRAVEl" with all letter capitalized except the last one triggered me so much. The vid was very usefull tho so i guess you'll keep my sub for now. But i'm watching you.
If you really wanted to, a fade effect and display together could work in JS. I think I know why you meant it's not possible, since it would execute the statements so fast it's quite unnoticable. It is theoretically possible (I haven't done it) to implement with "window.setInterval()" as you can easily specify the delay Use an outside variable for iterations, 0-100, if it is greater than or equal to 100 (checked inside the interval) you set the display of whatever element to "none" and clear the interval using "window.clearInterval()" Otherwise add 1 to the iteration variable and set the opacity of the element to "(100 - i) / 100" (considering that it can only reach 100 iterations) and you might have a functioning example
Wow! I actually really thought I'd know them all, but, hell, was I wrong! The "dark mode" effect is awesome! Thanks so much! As for the shadows and VSCode: just hit tab and then 0 directly instead of first deleting all the text hints...
On the text gadient you can just use color:transparent; instead of the webkit-fill-color, also using js library prefix free is very handy & will shorten your code.
To complete your first trick, you can replace pointer-events by visibility: visible (when the button is showed) and visibility: hidden (when the button is... hidden !). Then this one will not be clickable at all to when the visibility is hidden. But thanks for the pointer-events trick, I didn't know that ! :D
Awesome. I love your videos. Just watched the other video about view time, entertainment vs education. Just thought I would try to give you a sugestion, but first understand my viewing experience. I was about to not watch everything after having had my mind blown by the pointer-events, than I noticed the dark mode and time advanced to see something else. After that I decided to rewind and watch everything. I think what I might have realized that can serve as a suggestion is if I had been briefed on what to expect from those things it could've helped me to decide to watch it all, or maybe on the transitions you could brief, like "This next one is this and I love because of this and it does that. Let me show it to you.". Good luck, keep fun and keep posting.
This is just my opinion but instead of adding pointer event property you can do this so you make sure that the element does not interrupt the other elements that might be behind it: @keyframe fade { 0% { Opacity : 1; } 99% { Opacity : 0; } 100% { Display: none; } } So this is going to get rid of the element only after the animation took place.
7:44 split second message says: Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits. honestly idk tf that means
Can you anybody explain me, why teachers have forbidden sections? I.e if I use div, I'll get penalty mark. They say it because of "new html style of writing" but there's so many new tutorials, where div's are used.
Wanted to make a text gradient for a project, thought I would have to import something. Turns out i just had to get youtube algorithm to suggest me your video. Thank you, sensei
Unfortunately you've forgot to mention display: inline-block as well as box-sizing: border-box. I prefer to use inline-block on elements that are supposed to be blocks, 'cause this allows me to use margin and padding properly. And I usually hate it when people work with 1rem = 10px, because it confuses me and probably others as well when working on other peoples stylesheet, but at least you've used a percentage and not a fix 10px value.
4 роки тому
The problem is when you want to 'animate out' something, you also want it to be gone from the dom otherwise it messes up the layout and pointer event does not remove it from the dom so i think its still better to use display none after the animation finished. Or scale it down to 0 after the animation.
Great tips!! Just a thought on the first one, what about 'visibility' as an alternative? @keyframes fade { from{ opacity: 1; visibility: visible; } to{ opacity: 0; visibility: hidden; } }
Well, this should rather be titled "Top 10 CSS Tricks You Didn't Know If You Started Learning CSS Just Now", because it's like the most basic CSS hacks people were using over the last decade or two before Flexbox and Grid came out. 09:59 How about `display: inline-block` then? ;> 11:57 Wanna know some really cool trick from the dinosaur era? ;> You can set NEGATIVE margins ;> 12:20 Good luck with that when your text is more than one line long :J 16:36 Yeah, and in browsers that doesn't support filters the user will get black text on black background. Sounds like a great idea :q 18:08 Only if the browser's default font size is set to 16 pixels, which cannot be guaranteed :q
I know i am stupid but that , really helped me with my project doing things simply where i was thinking of using .scrollIntoView() , lol how i forgot about something so simple well in case you cannot use this trick you can use casual javascript which is more customizable element.scrollIntoView({behavior: "smooth", block: "center" }) , will do the job
Topics:
1. 1:36 - Pointer-events:all
2. 5:38 - Block vs Inline
3. 11:15 - Margin auto to center
4. 12:21 - Line-height to center text
5. 12:31 - p::selection and p::first-letter
6. 14:08 - Ancla with smoth scroll
7. 15:46 - Invert the colors on the screen
8. 18:18 - Adapt text on risize
9. 19:45 - Doble box-shadow
10. 21:55 - Text Gradient
Roberto Sanchez what do you mean? Like this is stuff to go on a resume?
Go away Roberto
@@jakem9519 learn english first. the word can be used in different contexts.
Dharmang Learn English? The one who posted the comment really had no context to go off of, so if you have nothing constructive to say, fuck off snowflake.
Thenkg u
The Creative HTML5 and CSS course is officially launching on December the 4th!
Thanks so much for all the wonderful support this year and hopefully next year we can do several other courses including javascript, ui design and more!
$20? udemy courses for $5 and skillshare for $10 for a month for 1000s of courses
will you make a full javascript course
20 is not much.... if he is doing this on yt imagine what will u learn for 20$
@@nekotrecixxx6019 12hours of jam packed content! Its going to be great! Thank you!
Where can i buy it?
He makes learning so much fun. Anyone can be an instructor, but not everyone can teach. He teaches by using enthusiasm and a love for the material. Thanks
true asf .. i really don't understand why all instructors in universitys must be very lazy boring teachers
ua-cam.com/video/UZgBTXJenbg/v-deo.html
I knew all these tricks back when Michael Jackson was still trying to setup his clothing store... Billie Jeans
For real though, great video!!!!
😂😂😂
They are not even tricks ...
man i knew this when i was 14...
@@CicovicDejan so you are 14 now
hahahaha
btw: using display: inline-block (or even inline-flex) will give you the benefits of inline and block... takes only the space thats needed, but takes margin, height and stuff... great vid (as usual 🙂)
ua-cam.com/video/UZgBTXJenbg/v-deo.html
1:28 "I might smile right now but I am actually in pain"
Yeah, same here.
$20 for the course!?!? That is an insane price. I hope everyone picks it up. I know I will. Dev Ed you da best boi!
Why, when you can get a 40 hour ("aour" not "haour") course on udemy for $9
Dan Palu I took the course. It was great the way he explained everything easily and he is an engaging teacher. I felt I leaned a lot and maybe I could get that from udemy but I was entertained along the way as well. If you need to learn the concepts I suggest getting it
@@SeanClaDesigns Different tastes
i knew all of these tricks what you mean i knew this since micheal jackson was chamona
Ed, every one of your videos makes me smile and I get to learn something new in the process.
That's the best kind of learning in my book! 👍
Thank you!
The 'I am doing tha weird accent again' just killed me bro ! Self awarness = 1000% lmao
Trick 1. You can use javascript. First animate with CSS, set timeout to same time that animation takes in javascript and it works. Also just make something that blocks user from activating script multiple times, simple i++ and i-- will work here. Using your trick element is still displayed so it takes space, if you need that space to be empty for other elements i think my trick is better here.
For three months I'm learning to program as a new hobby. So yes, most of the content I did not know ;)
I'm so happy that people like you make these enthousiastic video's and tutorials for other people to learn from. Thank you thank you!!! I hope you realise you are bringing a lot of joy and professionalism into the world by doing this.
13:48 Luckily that *L* wasn't a *D* otherwise we would just sit here in awkward silence.
Okayyyy......???
Great video! Adapting code on risizing, margin auto to center and adding gradient to the text stroke me! You are a CSS God, brother!
Hey Ed i've been watching your videos for a while and i just realized how the background music makes it way more watchable and less monotone than other tutorial videos. Thank you for the amazing content and keep it up!!
You are the best!!! I cannot wait to purchase your course. I always go for free courses but I’m sure that yours will worth every penny, even if I will not learn anything new I’m happy to support you.
19:40 I fell slightly asleep while watching the video then boom!! I woke up again, Thanks for the CSS tricks,
The tag with "TRAVEl" with all letter capitalized except the last one triggered me so much. The vid was very usefull tho so i guess you'll keep my sub for now. But i'm watching you.
this was the man who taught me to *center a div,* INSTANT subscribe & like & changed my life & will never forget ty ty
0:28 “lets take a look at these cool pricks”😂
@200_Percent_Coma it sounded like pricks🤷🏻♂️
knew most of them already!! seems like I'm good at this thing 😎😎
I just posted a new video about the Top 10 CSS Features to know and use in 2023... do you already know most of them as well? 😜
@@lukas.webdev nice trick bro!! I'll watch it though!!
@@alimir5350 Thanks bro. 😉
Scroll-bar behavior was the most awesome function that u show in my opnion.
you can also use display: inline-block, to have mixed functionality between display: block and display: inline
Your teaching style makes me feel like less of an idiot. :D CSS is my least favorite. I needed all of these tricks. Thanks!
I just watched the whole video without noticing that it's 24min long !!! I enjoy your content so much keep up the hard work !! 💛 from Morocco
this is the best video i've seen on youtube today.....It really made my day
The last gradient explanation was the best distinction explanation of inline and block elements
Ed, do you update the courses you have available for sell? I saw your courses content and I am amazed man. I am buying all
"Internet Explorer can go to the trashcan." OOF
Thank you very much for 14:08 this is something which really looking for
I am pretty new to web dev and only did html and css so some Tipps were too advanced for me until now but actually the lorem20 shortcut is awesome 😄
you saved my life with the first one THANKS!
Thank you Dev Ed you teached me a lot. Thank you so much 😀😀😀
I love your trick's as I'm new to web development , Also I'm used to many of your trick's .
Thanks for making this cool videos😊
maybe my new video about the top 10 CSS features in 2023 is interesting for you as well? 😉
Love the last one, tried it one time but didn't realize I needed to change the display to inline, you're a beast!
If you really wanted to, a fade effect and display together could work in JS. I think I know why you meant it's not possible, since it would execute the statements so fast it's quite unnoticable.
It is theoretically possible (I haven't done it) to implement with "window.setInterval()" as you can easily specify the delay
Use an outside variable for iterations, 0-100, if it is greater than or equal to 100 (checked inside the interval) you set the display of whatever element to "none" and clear the interval using "window.clearInterval()"
Otherwise add 1 to the iteration variable and set the opacity of the element to "(100 - i) / 100" (considering that it can only reach 100 iterations) and you might have a functioning example
Wow! I actually really thought I'd know them all, but, hell, was I wrong! The "dark mode" effect is awesome! Thanks so much!
As for the shadows and VSCode: just hit tab and then 0 directly instead of first deleting all the text hints...
Man epic vid. Its got a few little tricks I prob should have known but honestly I didn't. Thanks man.
On the text gadient you can just use color:transparent; instead of the webkit-fill-color, also using js library prefix free is very handy & will shorten your code.
There is nothing better than basic things, very nice video !
To complete your first trick, you can replace pointer-events by visibility: visible (when the button is showed) and visibility: hidden (when the button is... hidden !).
Then this one will not be clickable at all to when the visibility is hidden. But thanks for the pointer-events trick, I didn't know that ! :D
Thank you so much for all your videos, I have been enjoying watching them. you have a funny and incredible way for learning!!.😍😍😍🥰
At 23:36 trick, it would be better use width:fit-content; so the next element inline doesn't put beside the heading. ;) Nice video!!!
awesome content Ed! loving the lofi background music as well:D
started like i will find one or two tricks, but was a good one video, learned much more !
Awesome. I love your videos. Just watched the other video about view time, entertainment vs education. Just thought I would try to give you a sugestion, but first understand my viewing experience. I was about to not watch everything after having had my mind blown by the pointer-events, than I noticed the dark mode and time advanced to see something else. After that I decided to rewind and watch everything. I think what I might have realized that can serve as a suggestion is if I had been briefed on what to expect from those things it could've helped me to decide to watch it all, or maybe on the transitions you could brief, like "This next one is this and I love because of this and it does that. Let me show it to you.". Good luck, keep fun and keep posting.
5:10
you can use tab to get focus on it. When the button is an a-tag that could be problematic.
Use better visibility:hidden + opacity
This is just my opinion but instead of adding pointer event property you can do this so you make sure that the element does not interrupt the other elements that might be behind it:
@keyframe fade {
0% {
Opacity : 1;
}
99% {
Opacity : 0;
}
100% {
Display: none;
}
}
So this is going to get rid of the element only after the animation took place.
You're genuinely a great guy! Thanks so much!
Hey Ed, I just implemented the dark-mode in an app, it was so easy! And everybody was wondering, what a good developer I am! Thank you very much! :)
7:44 split second message says: Shorthand property to set values the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits. honestly idk tf that means
This was awesome. Most of the things I didn't knew before. Please keep on sharing similar things.
You’re too good to be real Ed!
Best video I just susribed to your UA-cam channel
The invert and scroll behavior blew my mind
"And let's be honest, IE can go to the trash can" 🤣🤣
Can you anybody explain me, why teachers have forbidden sections? I.e if I use div, I'll get penalty mark. They say it because of "new html style of writing" but there's so many new tutorials, where div's are used.
Hey Dev ed , Are you working as freelancer full time OR work for any pvt company ...what u do basically....? your videos are awesome..!!
last tips are absolutely the best ones. MERCI!!!!
Just bought your full javascript and html/css course! Keep up the good work! :D
And thanks!
OMG Ed, why are you so good to us? Recent follower and already loving your content so much :) :) :)
I'll be the one(?) guy that says, I didn't know any of these. I'm new to frontend work. So I enjoyed all of it. Thanks!
Edwin can you please make a video on compressing html CSS and JavaScript code to make website's performance more better
Just bought your HTML/CSS course! So excited to start. Thanks for your hard work! 😄
Hope you enjoy! ❤️
ua-cam.com/video/UZgBTXJenbg/v-deo.html
Really enjoyed the trick with font size and rem.
Thanks Ed. Great tutorial video!
So entertaining!
You are my favorite code guy!
dude, i think i should buy your courses right now! very good explanations.
I'am a 90's kid and I find the intro offensive, cause I don't even know CSS - Joking.. Great video!
Which theme you have use in this video ?
Wanted to make a text gradient for a project, thought I would have to import something. Turns out i just had to get youtube algorithm to suggest me your video. Thank you, sensei
For the button to fade you can simply use visibility:hidden; to deactivate the button.
Waited all day to watch your videos. Just to savor it. Looking forward to Saturdays.
Binge-watching Dev Ed Videos..gives hope for my future :D
Woah there! That filter thing just blew my head off!
Helpful tricks
The Michael Jackson bit at the beginning was delightful.
Can you teach CSS from beginnging.
New to this channel.
You seems to be so confident and perfect in CSS
I always had the first issue, thank you so much Ed! (The video playback is not finished yet)
Happy 500k my gorgeous friend ❤❤
congrats for the 200k - happy to hear you're releasing a course!
Bro your videos and knowledge are so so amazing, thanks u so much for shared it’s with us
I knew a lot of them from 1900 . But the 'cursor event thing' was knew and good one . 😘
5:00 I usually set visibility to hidden which works as well
Unfortunately you've forgot to mention display: inline-block as well as box-sizing: border-box. I prefer to use inline-block on elements that are supposed to be blocks, 'cause this allows me to use margin and padding properly. And I usually hate it when people work with 1rem = 10px, because it confuses me and probably others as well when working on other peoples stylesheet, but at least you've used a percentage and not a fix 10px value.
The problem is when you want to 'animate out' something, you also want it to be gone from the dom otherwise it messes up the layout and pointer event does not remove it from the dom so i think its still better to use display none after the animation finished. Or scale it down to 0 after the animation.
Your studio looks awesome!
better solution for 1 is visibility:hidden
Great tips!!
Just a thought on the first one, what about 'visibility' as an alternative?
@keyframes fade {
from{
opacity: 1;
visibility: visible;
}
to{
opacity: 0;
visibility: hidden;
}
}
Great Video and thanks for the new HTML5/CSS3 Course. Looking forward to more videos.
I love how he is so knowledgeable but at the same time like "the f is this not working?" - daily live of a dev lmao
Idk why but i enjoy watching your videos :) great job !
The last one was awesome, but couldn't we also use width fit-content instead of display inline?
Thanks, I learn a lot from this.
I will try to apply them in my small projects
*this will make a fine addition to my collection*
Wow this video actually helped me... A Lot
hey Great Job i really don't know many of the tricks thanks for sharing 🙏🙏👍👍
Well, this should rather be titled "Top 10 CSS Tricks You Didn't Know If You Started Learning CSS Just Now", because it's like the most basic CSS hacks people were using over the last decade or two before Flexbox and Grid came out.
09:59 How about `display: inline-block` then? ;>
11:57 Wanna know some really cool trick from the dinosaur era? ;> You can set NEGATIVE margins ;>
12:20 Good luck with that when your text is more than one line long :J
16:36 Yeah, and in browsers that doesn't support filters the user will get black text on black background. Sounds like a great idea :q
18:08 Only if the browser's default font size is set to 16 pixels, which cannot be guaranteed :q
I know i am stupid but that , really helped me with my project doing things simply where i was thinking of using .scrollIntoView() , lol how i forgot about something so simple
well in case you cannot use this trick you can use casual javascript which is more customizable
element.scrollIntoView({behavior: "smooth", block: "center" }) , will do the job