@@AlecArmbruster Okay, I can do it here: Don't bother. For 99% of websites the performance improvements aren't that important. V8 compiles your js anyways. The only reason you'd use it is if you have something specific written in the languages that can compile to WASM or you're building a really performance heavy app/game as a web app (I know the web version of illustrator/photoshop runs thanks to wasm).
I struggle when I have too many childrens with BEM practice and I only know 7 folder architecture in SASS but I think it's not perfect architecture so I'd watch this video please.
Amazing. Getting straight to the point, exactly what I expect from a programmer. Just hate those TH-cam programming channels who think I’m there watching to hear about their daily life and make jokes with them, not to mention the 3 minutes preview of “what their going to talk” about on the video which is of course stated on the fucking title and by the end would be covered entirely if their kept their mouth shut and got straight to work. Thank you!
For the text background clip I believe setting color to transparent also works instead of the vendor prefixes property. Not sure what if it has drawbacks though, would love your input on that if you know.
Thank you, I absolutely love the code-along style. Not only helps to get down the aspects, but while coding I can make small adjustments and end up with an end result that I can use in my own applications. Thanks, again!
If anyone was wondering why he set .card to position relative, it’s because position relative makes sure the cards stack (a div that is declared after another div in html can stack over it)
I’m only 1:39 into this video.......THANK YOU!!! I’m new to coding and I’ve been trying to figure out what semantic elements were and why you would use article over doc and for whatever reason it took me until right now years old to get it.
Just wanted to point out that on top of using the correct html elements for semantics it also helps aid people with disabilities using screen readers. There's also aria labels and color contrasts to look out for but every bit helps :)
Wow! I'm a newbie in webdev, i almost finishing the colt steele course, and I'm feeling really good because I'm finally able to understand your high Quality videos, thanks for inspiring me!
This is BRILLIANT. I am a QA by profession, just trying out something (during the lockdown period :) ) with Ionic and Angular and your channel is really good. I think I am doing fairly ok given my constant involvement with dev team and some amount of coding myself. Any quick Angular+ionic pointers would be really helpful and appreciated :). Anyway please keep up the good work ...
That gradient text trick was very nice! But can you please shout a lot of super technical words at the beginning of your next video? If you make web dev seem any easier, then our clients will end up doing it themselves! :p (Just kidding, I love the simplicity of your videos!)
I love your technical videos, but I really love more your CSS videos Thankyouu.. Oh one thing, it will be better if u just hide the file explorer in VSCode and show a little browser, also using live server for live update so we can understand each property better
Not even sure if this is exactly what I need, but it looks great so it's going into my 'to learn' playlist. Just building my second card game (first was blackjack and second is MEMORY) with card images, but I want the third one to be solitaire, so the overlapping card look is something I want to learn. Even if this isn't exactly the best method I think it'll still come in 'very handy' to use elsewhere.
Please note; When you refresh you see a weird transition from the initial state of the cards. To fix this, instead of 'transition: .2s;' add the property you want to animate, so in this case 'transition: .2s transform;'
I really liked the font DM Mono, i will use it, btw, i want to take the web designer career, ik some things using css and html, but not too beautiful or organized, it's a bit confusing to me rn, but ik i can do it, guys give me hope and luck :D.
Can we get a whole video about css properties like ~ which aren't widely known please :)
I like that idea 🤔
just read the freakin docs smh
@@tooru lmao fr
@@tooru Why make videos about anything then? You can just read the docs...
@@Fireship Yes, "10 CSS properties you never knew existed" there you go, :)
fireship is on fire with the content 🔥
i agree
fire fire fire fire fire fire CSS
the most high-quality videos of Software Development one can find on the internet
:D this is the best channel on youtube
no doubt about it... :D
agreed
Doofenshmirtz(Web Designer): "Holding General Sibling Combinator and Smirking" At last the combinator I have been looking for.
Kmche
I love this 🤣🤣🤣
1: Web assembly
2: css /sass architecture bem etc pleasee
Yoooo WASM! Yes! Would love a WASM introduction!
@@AlecArmbruster Okay, I can do it here: Don't bother. For 99% of websites the performance improvements aren't that important. V8 compiles your js anyways. The only reason you'd use it is if you have something specific written in the languages that can compile to WASM or you're building a really performance heavy app/game as a web app (I know the web version of illustrator/photoshop runs thanks to wasm).
I struggle when I have too many childrens with BEM practice and I only know 7 folder architecture in SASS but I think it's not perfect architecture so I'd watch this video please.
@@82TheKnocKY Pretty much the answer to the WASM hype. It's nothing new, I don't understand why we need to hype it up.
Vojtěch Loskot Well I’d like to use it to encode video or something neat.
more videos like this please, your videos are incredible
Legit I used to get inspired by the csstricks website so much
And today one of my favourite channels covered it
Nothing could be much better rn
I too reverse engineered these cards a few days ago. Looks really good!
That `~` operator is magical!
I wish we had someone like you for python as well. Simply the best
Great video as always. Just want to point out that are inline-blocks, not inline elements.
What I did not learn in my 3 years career,
I learned it in an 8-minute video.
That's a great effort you putting there.
My God fireship is amazing, I'm digging the practical examples of lesser known css properties/selectors
Looks clean and crisp. Great video 👍
You could make it better accessible by using a button/link tag and using both the hover and focus selector.
Amazing. Getting straight to the point, exactly what I expect from a programmer. Just hate those TH-cam programming channels who think I’m there watching to hear about their daily life and make jokes with them, not to mention the 3 minutes preview of “what their going to talk” about on the video which is of course stated on the fucking title and by the end would be covered entirely if their kept their mouth shut and got straight to work.
Thank you!
For the text background clip I believe setting color to transparent also works instead of the vendor prefixes property.
Not sure what if it has drawbacks though, would love your input on that if you know.
I was checking css tricks the other day and those cards caught my eye as well. Great video mate. Thanks.
Remember to test hovering edges when changing values around with overlapping elements to avoid infinite jog|movement issues.
Thank you, I absolutely love the code-along style. Not only helps to get down the aspects, but while coding I can make small adjustments and end up with an end result that I can use in my own applications. Thanks, again!
If anyone was wondering why he set .card to position relative, it’s because position relative makes sure the cards stack (a div that is declared after another div in html can stack over it)
First 30 seconds made me subscribe, you are awesome man.
I could barely name 1 content creator that is even close to your level.
You're amazing 🔥🔥🔥
Man this is cool. This should work for mobile display too if we just change flex direction to column. Gotta try this
Wow, I think I'll use this in a personal project
Nice! I would love to see a SCSS in 100 seconds video
You are a genius. This needs more clicks. Commenting, to power the YT algorithm.
Just about a week ago I wanted to add gradient to text, thanks a lot!!!!
I’m only 1:39 into this video.......THANK YOU!!! I’m new to coding and I’ve been trying to figure out what semantic elements were and why you would use article over doc and for whatever reason it took me until right now years old to get it.
Love your CSS Videos!!!
Pls make more
This is awesome. I recommend this channel to all my dev friends/colleagues, and it's surprising that not many have heard of it.
This was a joy to code. Thank you
Just wanted to point out that on top of using the correct html elements for semantics it also helps aid people with disabilities using screen readers. There's also aria labels and color contrasts to look out for but every bit helps :)
This is pretty simple, yet pretty sophisticated stuff. Nice!
the visualisation soo dope than ever, luv dis
This is too good that I forgot I hit like the first time then watching half way through the video I hit like again lol
Best content on TH-cam.
Please do more like this! Learned a lot of CSS in this video 😎
Please make a short series on all the lesser-known CSS selectors and event handling selectors.
Wow! I'm a newbie in webdev, i almost finishing the colt steele course, and I'm feeling really good because I'm finally able to understand your high Quality videos, thanks for inspiring me!
Wow. Other day I was amazed by CSS Tricks and here is the Tutorial. Thanks 👍.
Amazing the way you explain it,simple but elegant
I'm glad to see you use Semantic HTML tags. I love your CSS videos! Still hoping that you'll cover Rust and WebAssembly.
Every new video is better than previous one! How do you manage to raise quality each time?
This is BRILLIANT.
I am a QA by profession, just trying out something (during the lockdown period :) ) with Ionic and Angular and your channel is really good. I think I am doing fairly ok given my constant involvement with dev team and some amount of coding myself.
Any quick Angular+ionic pointers would be really helpful and appreciated :). Anyway please keep up the good work ...
This is awesome, so many CSS concepts in one video
absolutely love the content lately. Way to go FireShip!!
I hope someday soon Jeff will be recognized by his mom.
Awesome video
Learnt many many many things
That gradient text trick was very nice! But can you please shout a lot of super technical words at the beginning of your next video? If you make web dev seem any easier, then our clients will end up doing it themselves! :p
(Just kidding, I love the simplicity of your videos!)
I have been watching your videos for long now like I am really inspired by you man keep on doing your good work I love it .....
2:20 that clip was awesome...
This was awesome. So many tricks in time less then 10 minutes. Thanks a lot.
Man this is absolutely wonderful. I learned a lot from a 9 min video. Thanks a lot!
I really want tuts from this guy
Make more videos like this 👌 Thank you Jeff 👍
This is absolutely incredible!
This is amazing !!!!! Going to use this in my portfolio
Recommend using live server extension in vscode, very useful for watching the changes "live" ;)
Amazing tutorial!!👌👍
jeff always knows what we want❤️...this video was highly needed
I love your technical videos, but I really love more your CSS videos Thankyouu..
Oh one thing, it will be better if u just hide the file explorer in VSCode and show a little browser, also using live server for live update so we can understand each property better
This was such a well done video. Please make more of these
I think I am gonna use this for my personal link archive.
Man your content is beautiful.
Not even sure if this is exactly what I need, but it looks great so it's going into my 'to learn' playlist.
Just building my second card game (first was blackjack and second is MEMORY) with card images, but I want the third one to be solitaire, so the overlapping card look is something I want to learn. Even if this isn't exactly the best method I think it'll still come in 'very handy' to use elsewhere.
jeff-Difference between Fireship and ordinary TH-cam Channel
subscribers-🤫
good job ! thanks for sharing.
Yes! CSS Tricks 💯
Amazing and really imformative
Top notch content as always. Thanks Jeff!
Wow so clear. Thank you!
Thank you very much for the channel, I hope the video output channel includes Vietnamese subtitles, loves the channel
This is so awesome! Thank you so much!!! 😍
I can't believe this was so easy 🤯
Most Awesome Sir 👍.
I am a backend Python dev/ Cloud Engineer and 90% of it just went over my head but I still watched till the end haha...
don't worry this goes over the head of most front end devs even. Flexbox starts aging but the working force never really adapted to it.
Looks awesome! Your videos always amaze me.
TIL you can affect relative elements with pseudo classes, something I would've painstakingly done with JS events up until now.
Thanks a lot!
You are so good. Broouh!
I recognize the clip at 5:35! That's the inside of the Student Life Centre at the University of Waterloo
You are CSS God
I NEEEEDED THIS... YOUR NAVBAR AND FB MENU VIDEOS WERE AWESOME 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
I liked this tutorial so much!
I learned a lot
Thank you! 😄
As good as always! Nice work man
Thank you!
Best Channel
this is so fucking amazing... I still have no regrets about purchasing my life-time pro access on fireship.io
Amazing tutorial buddy !!!
Great content, keep them coming!!
Angular + hugo project course please.
You are seriously Fire!!! 🔥🔥🔥
Please note;
When you refresh you see a weird transition from the initial state of the cards.
To fix this, instead of 'transition: .2s;' add the property you want to animate, so in this case 'transition: .2s transform;'
Amazing, you're like a magician 😄
I really liked the font DM Mono, i will use it, btw, i want to take the web designer career, ik some things using css and html, but not too beautiful or organized, it's a bit confusing to me rn, but ik i can do it, guys give me hope and luck :D.
Bro this is amazing thank you for this
i love your html and css onlt tuts :*
I fking love this channel
Around 5:25 I don't think the animation corresponds to the one that is present in css tricks website. By the way thanks for this demo!