No video

Top 10 CSS Tricks You Didn't Know!

  Рет қаралды 521,065

developedbyed

developedbyed

Күн бұрын

Пікірлер: 595
@RobertoSanchezGoogle
@RobertoSanchezGoogle 4 жыл бұрын
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
@jakem9519
@jakem9519 4 жыл бұрын
Roberto Sanchez what do you mean? Like this is stuff to go on a resume?
@danpalu2308
@danpalu2308 4 жыл бұрын
Go away Roberto
@dharmang
@dharmang 4 жыл бұрын
@@jakem9519 learn english first. the word can be used in different contexts.
@jakem9519
@jakem9519 4 жыл бұрын
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.
@FordExplorer-rm6ew
@FordExplorer-rm6ew 4 жыл бұрын
Thenkg u
@BosskFett88
@BosskFett88 4 жыл бұрын
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
@sypo_x1891
@sypo_x1891 3 жыл бұрын
true asf .. i really don't understand why all instructors in universitys must be very lazy boring teachers
@ProgrammingWithTSH
@ProgrammingWithTSH 2 жыл бұрын
kzfaq.info/get/bejne/i8CXdbeJr8vSkps.html
@normaneshuchi5474
@normaneshuchi5474 4 жыл бұрын
I knew all these tricks back when Michael Jackson was still trying to setup his clothing store... Billie Jeans For real though, great video!!!!
@manvsgaming07
@manvsgaming07 4 жыл бұрын
😂😂😂
@MichaStolarskiPL
@MichaStolarskiPL 4 жыл бұрын
They are not even tricks ...
@CicovicDejan
@CicovicDejan 4 жыл бұрын
man i knew this when i was 14...
@yassinezaza7118
@yassinezaza7118 4 жыл бұрын
@@CicovicDejan so you are 14 now
@yassinecherik4096
@yassinecherik4096 3 жыл бұрын
hahahaha
@developedbyed
@developedbyed 4 жыл бұрын
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!
@sunnydhama
@sunnydhama 4 жыл бұрын
$20? udemy courses for $5 and skillshare for $10 for a month for 1000s of courses
@SahraClayton
@SahraClayton 4 жыл бұрын
will you make a full javascript course
@nekotrecixxx6019
@nekotrecixxx6019 4 жыл бұрын
20 is not much.... if he is doing this on yt imagine what will u learn for 20$
@developedbyed
@developedbyed 4 жыл бұрын
@@nekotrecixxx6019 12hours of jam packed content! Its going to be great! Thank you!
@jurygregorio974
@jurygregorio974 4 жыл бұрын
Where can i buy it?
@alexanderschirmer4593
@alexanderschirmer4593 4 жыл бұрын
1:28 "I might smile right now but I am actually in pain" Yeah, same here.
@denns0r
@denns0r 4 жыл бұрын
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 🙂)
@ProgrammingWithTSH
@ProgrammingWithTSH 2 жыл бұрын
kzfaq.info/get/bejne/i8CXdbeJr8vSkps.html
@SeanClaDesigns
@SeanClaDesigns 4 жыл бұрын
$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!
@danpalu2308
@danpalu2308 4 жыл бұрын
Why, when you can get a 40 hour ("aour" not "haour") course on udemy for $9
@SeanClaDesigns
@SeanClaDesigns 4 жыл бұрын
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
@Anto-xh5vn
@Anto-xh5vn 3 жыл бұрын
@@SeanClaDesigns Different tastes
@Feninou
@Feninou 3 жыл бұрын
The 'I am doing tha weird accent again' just killed me bro ! Self awarness = 1000% lmao
@PhilSmit
@PhilSmit 4 жыл бұрын
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!
@Tizmo-tt9ry
@Tizmo-tt9ry 4 жыл бұрын
i knew all of these tricks what you mean i knew this since micheal jackson was chamona
@vain_za
@vain_za 4 жыл бұрын
13:48 Luckily that *L* wasn't a *D* otherwise we would just sit here in awkward silence.
@keshavapiyushprasad5439
@keshavapiyushprasad5439 4 жыл бұрын
Okayyyy......???
@koko5498
@koko5498 4 жыл бұрын
The last gradient explanation was the best distinction explanation of inline and block elements
@Luuck3Fire
@Luuck3Fire 4 жыл бұрын
Scroll-bar behavior was the most awesome function that u show in my opnion.
@estherabella1953
@estherabella1953 4 жыл бұрын
"Internet Explorer can go to the trashcan." OOF
@BBlackSmitHH
@BBlackSmitHH 3 жыл бұрын
0:28 “lets take a look at these cool pricks”😂
@mrgoferdather
@mrgoferdather 3 жыл бұрын
he said "tricks" not pricks
@BBlackSmitHH
@BBlackSmitHH 3 жыл бұрын
@@mrgoferdather it sounded like pricks🤷🏻‍♂️
@chemedev
@chemedev 4 жыл бұрын
Love the last one, tried it one time but didn't realize I needed to change the display to inline, you're a beast!
@jonyjalfon94
@jonyjalfon94 4 жыл бұрын
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!!
@youssefkossale3680
@youssefkossale3680 4 жыл бұрын
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
@lordneojacks
@lordneojacks 4 жыл бұрын
The invert and scroll behavior blew my mind
@ApoLk_
@ApoLk_ 3 жыл бұрын
this was the man who taught me to *center a div,* INSTANT subscribe & like & changed my life & will never forget ty ty
@santra528
@santra528 4 жыл бұрын
19:40 I fell slightly asleep while watching the video then boom!! I woke up again, Thanks for the CSS tricks,
@sebastiaanvv
@sebastiaanvv 4 жыл бұрын
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.
@diehldrifts
@diehldrifts 4 жыл бұрын
OMG Ed, why are you so good to us? Recent follower and already loving your content so much :) :) :)
@samvibes8544
@samvibes8544 3 жыл бұрын
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😊
@lukas.webdev
@lukas.webdev Жыл бұрын
maybe my new video about the top 10 CSS features in 2023 is interesting for you as well? 😉
@fandreeamihaela
@fandreeamihaela 4 жыл бұрын
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.
@kristinac8250
@kristinac8250 4 жыл бұрын
Your teaching style makes me feel like less of an idiot. :D CSS is my least favorite. I needed all of these tricks. Thanks!
@H1L1CH
@H1L1CH 4 жыл бұрын
Great video! Adapting code on risizing, margin auto to center and adding gradient to the text stroke me! You are a CSS God, brother!
@oliverarensbach7025
@oliverarensbach7025 3 жыл бұрын
you saved my life with the first one THANKS!
@boristherin4104
@boristherin4104 3 жыл бұрын
started like i will find one or two tricks, but was a good one video, learned much more !
@dawidfrankiewicz8994
@dawidfrankiewicz8994 4 жыл бұрын
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.
@SamFishback
@SamFishback 2 жыл бұрын
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
@OPGAMER.
@OPGAMER. 4 жыл бұрын
Which theme you have use in this video ?
@ethantaylor8370
@ethantaylor8370 4 жыл бұрын
Man epic vid. Its got a few little tricks I prob should have known but honestly I didn't. Thanks man.
@jomoc6112
@jomoc6112 3 жыл бұрын
no lie here i already know everything on this video. just from watching all your videos in 2021 😂 and searching for missing pieces i missed.
@TrivoPlays
@TrivoPlays 3 жыл бұрын
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
@pierrebertin4364
@pierrebertin4364 4 жыл бұрын
There is nothing better than basic things, very nice video !
@bilalbeny4172
@bilalbeny4172 10 ай бұрын
Thank you so much for all your videos, I have been enjoying watching them. you have a funny and incredible way for learning!!.😍😍😍🥰
@CosminSerbanDesign
@CosminSerbanDesign 4 жыл бұрын
congrats for the 200k - happy to hear you're releasing a course!
@SHAJ3304
@SHAJ3304 4 жыл бұрын
You're genuinely a great guy! Thanks so much!
@MichaelCampbell01
@MichaelCampbell01 4 жыл бұрын
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!
@90skid27
@90skid27 4 жыл бұрын
I'am a 90's kid and I find the intro offensive, cause I don't even know CSS - Joking.. Great video!
@alimir5350
@alimir5350 2 жыл бұрын
knew most of them already!! seems like I'm good at this thing 😎😎
@lukas.webdev
@lukas.webdev Жыл бұрын
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? 😜
@alimir5350
@alimir5350 Жыл бұрын
@@lukas.webdev nice trick bro!! I'll watch it though!!
@lukas.webdev
@lukas.webdev Жыл бұрын
@@alimir5350 Thanks bro. 😉
@UzairAli001
@UzairAli001 3 жыл бұрын
5:00 I usually set visibility to hidden which works as well
@mirabbos02
@mirabbos02 4 жыл бұрын
Thank you very much for 14:08 this is something which really looking for
@karolinalencina7121
@karolinalencina7121 3 жыл бұрын
You’re too good to be real Ed!
@AmericanCube
@AmericanCube Жыл бұрын
"And let's be honest, IE can go to the trash can" 🤣🤣
@sheeraz1022
@sheeraz1022 4 жыл бұрын
This was awesome. Most of the things I didn't knew before. Please keep on sharing similar things.
@alicenorman5236
@alicenorman5236 4 жыл бұрын
Just bought your HTML/CSS course! So excited to start. Thanks for your hard work! 😄
@developedbyed
@developedbyed 4 жыл бұрын
Hope you enjoy! ❤️
@ProgrammingWithTSH
@ProgrammingWithTSH 2 жыл бұрын
kzfaq.info/get/bejne/i8CXdbeJr8vSkps.html
@AtifKhan-cm8qv
@AtifKhan-cm8qv 4 жыл бұрын
Thank you Dev Ed you teached me a lot. Thank you so much 😀😀😀
@Danilo0717
@Danilo0717 2 жыл бұрын
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
@gountaa
@gountaa 4 жыл бұрын
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.
@fergusfergus4495
@fergusfergus4495 3 жыл бұрын
Bro your videos and knowledge are so so amazing, thanks u so much for shared it’s with us
@RobertWildling
@RobertWildling 4 жыл бұрын
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...
@alimansourey2076
@alimansourey2076 3 жыл бұрын
I knew a lot of them from 1900 . But the 'cursor event thing' was knew and good one . 😘
@MirkoTorrisi92
@MirkoTorrisi92 4 жыл бұрын
last tips are absolutely the best ones. MERCI!!!!
@filiph.1409
@filiph.1409 3 жыл бұрын
Just bought your full javascript and html/css course! Keep up the good work! :D And thanks!
@Amar11115
@Amar11115 Жыл бұрын
I will try to apply them in my small projects
@augustineri93
@augustineri93 4 жыл бұрын
Definitely getting the course, you should do an animations course with gsap next :D
@muradishmurodov5272
@muradishmurodov5272 2 жыл бұрын
Thanks Ed. Great tutorial video!
@tarunsharma5364
@tarunsharma5364 3 жыл бұрын
this is the best video i've seen on youtube today.....It really made my day
@alcymn
@alcymn 3 жыл бұрын
awesome content Ed! loving the lofi background music as well:D
@nubcops220
@nubcops220 4 жыл бұрын
I love how you seem so nervous but you still manage to pull those jokes I love it
@kaunas163
@kaunas163 4 жыл бұрын
you can also use display: inline-block, to have mixed functionality between display: block and display: inline
@abail7010
@abail7010 4 жыл бұрын
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 😄
@mohammadfallah.rasoulnejad5379
@mohammadfallah.rasoulnejad5379 4 жыл бұрын
dude, i think i should buy your courses right now! very good explanations.
@Dubstepschule
@Dubstepschule 3 жыл бұрын
So entertaining! You are my favorite code guy!
@durppp
@durppp 4 жыл бұрын
The Michael Jackson bit at the beginning was delightful.
@taylortoast2
@taylortoast2 4 жыл бұрын
Waited all day to watch your videos. Just to savor it. Looking forward to Saturdays.
@linjonathan2001
@linjonathan2001 4 жыл бұрын
Wow this was way more helpful than I could've ever imagined
3 жыл бұрын
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!!!
@miketkachenko5939
@miketkachenko5939 4 жыл бұрын
Woah there! That filter thing just blew my head off!
@danielpmo
@danielpmo 4 жыл бұрын
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.
@lilacandwits5127
@lilacandwits5127 3 жыл бұрын
Binge-watching Dev Ed Videos..gives hope for my future :D
@lucasCulhaci
@lucasCulhaci 4 жыл бұрын
I can't wait to buy this courseeee!!!
@miminurjannah7501
@miminurjannah7501 4 жыл бұрын
I'm just loving you you! Your intro is so hilarious.Thanks for sharing your knowledge and time with us
@ArianMozafari
@ArianMozafari 4 жыл бұрын
I always had the first issue, thank you so much Ed! (The video playback is not finished yet)
@shinobi1975
@shinobi1975 3 жыл бұрын
Never thought about that media query html! That’s crazy lol
@ahnaf135
@ahnaf135 3 жыл бұрын
Awesome video dude. I learned a lot!
@nathanalpha1960
@nathanalpha1960 4 жыл бұрын
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
@ethans7395
@ethans7395 3 жыл бұрын
Very helpful video, thanks for the tips!
@brangja4815
@brangja4815 3 жыл бұрын
Thanks, I learn a lot from this.
@KhaPiano
@KhaPiano 4 жыл бұрын
Really enjoyed the trick with font size and rem.
@MANMEETSINGH1993
@MANMEETSINGH1993 3 жыл бұрын
hey Great Job i really don't know many of the tricks thanks for sharing 🙏🙏👍👍
@kaduzinhoba
@kaduzinhoba 4 жыл бұрын
So cool tips! thank you sooo much!
@lukalortkipanidze7548
@lukalortkipanidze7548 4 жыл бұрын
Much more exciting is programming when Floki from the Viking teaches you it
@abgestaubt
@abgestaubt 4 жыл бұрын
I'm psyched about the course!
@ryukuro8259
@ryukuro8259 4 жыл бұрын
Wow this video actually helped me... A Lot
@kabeallu5942
@kabeallu5942 3 жыл бұрын
do you play the glass fiddle.... seems like ya do... crack me up man!!
@TheVictorcor
@TheVictorcor 3 жыл бұрын
Loved those tricks! Thank you so much!
@purplesalad7272
@purplesalad7272 3 жыл бұрын
Helpful tricks
@closticcrister2013
@closticcrister2013 2 жыл бұрын
Very Big Intro :O
@Meh7991
@Meh7991 4 жыл бұрын
Wouldn't 'visibility: hidden' / 'visibility: visible' be better to use instead of pointer-events?
@mee1233
@mee1233 4 жыл бұрын
'Visibility' behaviour will be same as 'display:block' and 'display:none'
@nicodomino6713
@nicodomino6713 3 жыл бұрын
"When Michael Jackson was at his Prime.. Shimonahhh" hahahaha
@5upl1an
@5upl1an 4 жыл бұрын
*this will make a fine addition to my collection*
@marcusmedellin1397
@marcusmedellin1397 4 жыл бұрын
Great Video and thanks for the new HTML5/CSS3 Course. Looking forward to more videos.
@kunalverma185
@kunalverma185 4 жыл бұрын
Only the Last One and filter invert was new to me .... BTW nice informative video that u so much sir
@guruprasadn1
@guruprasadn1 3 жыл бұрын
Really ,very helpful to me thanks
@CodingJourney
@CodingJourney 4 жыл бұрын
Great video Dev Ed 😉🙂 Keep it up!!
@devaes
@devaes 4 жыл бұрын
Thank you Ed . I really learn a lot from you .
@nikhilvarmadandu1589
@nikhilvarmadandu1589 3 жыл бұрын
Happy 500k my gorgeous friend ❤❤
Top 10 Javascript One Liners YOU MUST KNOW!
14:16
developedbyed
Рет қаралды 194 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 944 М.
КАКУЮ ДВЕРЬ ВЫБРАТЬ? 😂 #Shorts
00:45
НУБАСТЕР
Рет қаралды 3,4 МЛН
Running With Bigger And Bigger Feastables
00:17
MrBeast
Рет қаралды 157 МЛН
Matching Picture Challenge with Alfredo Larin's family! 👍
00:37
BigSchool
Рет қаралды 38 МЛН
I Challenged The CSS King To A CSS Battle
37:45
Web Dev Simplified
Рет қаралды 1,3 МЛН
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Рет қаралды 469 М.
Learn To Build An SVG Animation With CSS
18:32
developedbyed
Рет қаралды 752 М.
Top 10 CSS Features You Should Know & Use in 2023
19:56
Lukas | Web Development & Design
Рет қаралды 311 М.
Learn Sass In 20 Minutes | Sass Crash Course
19:42
developedbyed
Рет қаралды 932 М.
Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial
20:21
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 254 М.
The problems with viewport units
13:23
Kevin Powell
Рет қаралды 359 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 168 М.
Are You Making These CSS Height Mistakes?
8:54
Web Dev Simplified
Рет қаралды 128 М.
КАКУЮ ДВЕРЬ ВЫБРАТЬ? 😂 #Shorts
00:45
НУБАСТЕР
Рет қаралды 3,4 МЛН