To me, CSS is the most frustrating part of web development. In programming the same code should run the same no matter the user, with CSS the exact same CSS produces different results depending on the browser. It's not fair. It's getting better but it's still annoying. Plus at my day job we still support IE11.
@@trafnar Dude same. I was working at a major pharma company in 2012 (IE6 end of life was 2006!) and we had to support it. Plus they were still on Lotus Notes!
Just when you thought people had fucked up just about everything with JavaScript they find something mostly untouched and beautiful to fuck up.. Can anyone explain 'why?' - what can JSS actually do better than modern css or the compilers (scss sass less etc) How can this be any better than just having scoped styling at the component level (eg how React, Vue etc already work)
@@robertbrown1338 great question, I am yet to figure that out myself let CSS make things pretty, not JS, JS should never touch CSS. the closest it should come to is modifying attributes to influence the CSS being applied, but never anything more
I'd add, that JS should not even modify the style attribute, but simply assign classes, IDs and modify the DOM to introduce new elements. The thing, that JS used to be better at, was animation. I don't know whether this already changed, but I could see JS being better at it, as it often needs to be responsive. Other than that: CSS for appearance, JS for logic and interactions, that cannot be done using CSS alone.
@@robertbrown1338 You guys do realize that JSS just compiles to CSS, right? It's just a way to write CSS inside a JS file, so you don't need to have separate files for logic and styling, making it easier to organize your code. How is that fucking up CSS with JavaScript?
When I started I had a lot of trouble with CSS. However, once you understand the "box model", it starts to click. Understand how that works and then learn flexbox + grid. With those tools alone, you can create most of what you want.
I prefer tailwindcss over vanilla CSS as it has prebuit styles and @apply which allows you to create a class that takes the CSS from the class and merges it
I'm sending this to everyone I know with a "This is what a REAL programming language looks like". (seriously though, good job on this and everything else you put out)
Great vid as always. I’m a huge fan of these 100 seconds vids. I share these with my team all the time and they’ve massively helped us grow. Web dev is a huge ecosystem and your bite sized vids are a great way to navigate it. I’ve been a fan for a while and as this comment you’re at 990k subs. Can’t wait to see you get 1 mil subs. You’re doing big things for the web dev community.
These videos are impeccable. When learning to code, you often don't get the high level explanation that these deliver. It's ironic how in forcing to pare it down to 100 seconds, it can almost be more effective than 10 separate videos which get too far into the weeds.
Fireship is really a godsend. Sometimes you need a basic description of different kinds of technologies. It really clears the confusion and you know what exactly you need to learn next.
I wasted thousands of dollars in college and learned nothing compared to what i learned here in this channel for free. You guys are amazing . You people deserve a noble prize for what you are doing here.
Your UA-cam account is just to valuable for all developers. You are not only making videos to every topic but also making very good vides with good visual graphics.
I wanted to say THANK YOU I got my first web dev job! I started 9 months ago with this course and now I made a portfolio based on React Typescript projects and will start into my first frontend engineer job in July =) Believe in yourself guys! You can make it!
2:06 I'm literally about to work on a zoom transition like this for my next project. Seriously man, you are a freaking god. You manage to CRAM all the BEST info into an extremely high fidelity youtube video. Insane. Very. Nice. Work. 👍👍👍👍👍👍
Awesome video! Funny enough, the move into modularity happened after CSS 2... technically there was never a CSS 3, even if the vast majority of people would refer to it as the current version :s
I have probably written more than 100000 lines of css in my projects, and this is everything you need to get started with for css, summarised within 100 seconds.
CSS is my Passchendaele. C++, C#, JavaScript, HTML etc. all have their quirks but at their core they basically do what you expect them to do, are 'mostly' consistent and when you mess up the strictly typed languages will basically scream at you until you sort your life out. With CSS you could be doing nothing 'technically' wrong but because you/someone else did something a 1000 lines up in the sheet nothing you're trying to do actually works the way you think it will work. Not to mention the confusing naming of some of the element properties, 'Align,' 'Center,' 'Justify,' 'Items,' 'Contents,' 'Text' etc. On the surface CSS is simple as, but when I actually have to work with it I get absolutely crushed.
@Fireship Just came across this great channel and video and subscribed. Can't believe I missed it all these days. Was looking for this simple and concise explanation. Have two questions - 1) Which version of CSS has what advantage or when should it be used as per your expertise? Like Tailwind or Boostrap or Vanilla? 2) Can you please also comment on the bgm you used haha?
يا شباب ابسط حاجه نقدر نساعد بيها الباشمهندس اسامه هي اننا نسمع الاعلانات ..متبقوش انانيين و محدش يقولي معنديش وقت اسمع الاعلانات على اساس يعني أن الباشمهندس اسامه عنده وقت يعملك فيديوهات ..هو قدملك معروف ومنزلك كورسات محترمه مجانا فواجب عليك تشكره على الأقل بسماع الاعلانات
shout out to the dedication in the "like and subscribe" at the end 2:15
you'll always be the best
To me, CSS is the most frustrating part of web development. In programming the same code should run the same no matter the user, with CSS the exact same CSS produces different results depending on the browser. It's not fair. It's getting better but it's still annoying. Plus at my day job we still support IE11.
Back in my day, we had to support ie6. Uphill. Both ways.
@@trafnar Dude same. I was working at a major pharma company in 2012 (IE6 end of life was 2006!) and we had to support it. Plus they were still on Lotus Notes!
>css
>programming
>code
wheeze
Well, have fun compiling a C++ project, mate.
@@UselessDuckCompany omg lotus notes is my personal Vietnam
🔥
Great work as usual! Lots of ppl are using styled components now, it would be great to see one about JSS too!
Currently working with jss, and it's very useful
Just when you thought people had fucked up just about everything with JavaScript they find something mostly untouched and beautiful to fuck up..
Can anyone explain 'why?' - what can JSS actually do better than modern css or the compilers (scss sass less etc)
How can this be any better than just having scoped styling at the component level (eg how React, Vue etc already work)
@@robertbrown1338 great question, I am yet to figure that out myself
let CSS make things pretty, not JS, JS should never touch CSS. the closest it should come to is modifying attributes to influence the CSS being applied, but never anything more
I'd add, that JS should not even modify the style attribute, but simply assign classes, IDs and modify the DOM to introduce new elements.
The thing, that JS used to be better at, was animation. I don't know whether this already changed, but I could see JS being better at it, as it often needs to be responsive. Other than that: CSS for appearance, JS for logic and interactions, that cannot be done using CSS alone.
@@robertbrown1338 You guys do realize that JSS just compiles to CSS, right? It's just a way to write CSS inside a JS file, so you don't need to have separate files for logic and styling, making it easier to organize your code. How is that fucking up CSS with JavaScript?
He centered a div without googling?
HE'S A WITCH!
This is the best comment in recent memory 🥲
text-align: center;
justify-content: center;
align-items:(or item i forgot) center;
@@BoredEditor4k nope.
.flex { display: flex; justify-content: center; align-items: center; }
@@Atkafası-31
display: grid
place-items: center
or smt
The humor is incredible....
An inclusion of centering a div using flex.
A horribly styled like and subscribe at the end.
Good stuff.
Hey no shame in centering a div with flex!
@@Phatrikko That is actually considered the best way today. Or one of the best, at least.
@@user10476 Yeah, "display: flex" and "align-items: center" is your way to go.
@@VictorRibeiroJV You forgot "justify-content: center"
I've wanted to see one about css for a while, as someone that is starting to do web dev, thanks :)
good luck in your journey :)
As a fellow beginner I think this is a very good primer
When I started I had a lot of trouble with CSS. However, once you understand the "box model", it starts to click. Understand how that works and then learn flexbox + grid. With those tools alone, you can create most of what you want.
@@esquilo_atomico nice profile picture :)
I prefer tailwindcss over vanilla CSS as it has prebuit styles and @apply which allows you to create a class that takes the CSS from the class and merges it
Loving these beginner videos. Sharing this with 100+ of my students!
I'm sending this to everyone I know with a "This is what a REAL programming language looks like".
(seriously though, good job on this and everything else you put out)
Great vid as always. I’m a huge fan of these 100 seconds vids. I share these with my team all the time and they’ve massively helped us grow. Web dev is a huge ecosystem and your bite sized vids are a great way to navigate it. I’ve been a fan for a while and as this comment you’re at 990k subs. Can’t wait to see you get 1 mil subs. You’re doing big things for the web dev community.
Just got to 1M in just 4 days. Damn.
They're not releasing CSS4 because the CSS4 spec has a requirement "One fixed way to center a div" and they still can't figure out what to settle on.
These videos are impeccable. When learning to code, you often don't get the high level explanation that these deliver. It's ironic how in forcing to pare it down to 100 seconds, it can almost be more effective than 10 separate videos which get too far into the weeds.
I've worked with CSS for 5 years now and this is the best intro anyone could get to CSS that I've seen thus far.
Fireship is really a godsend. Sometimes you need a basic description of different kinds of technologies. It really clears the confusion and you know what exactly you need to learn next.
2:14 don't worry you can use "overflow" property to fix that
Been a web dev for over 10 years and been doing CSS the whole time. That being said - I still found this interesting and useful. Amazing stuff!
Outstanding visualization of the concepts, that seemed pretty concise for the short amount of time. Awesome
I wasted thousands of dollars in college and learned nothing compared to what i learned here in this channel for free. You guys are amazing . You people deserve a noble prize for what you are doing here.
Possibly the best CSS resource I've come across in 20 years. Really helped me get an overview of how it is all supposed to go together.
I laughed at your subtle "like and subscribe" error with the text coming out of the box.
I feel like I'm getting addicted to this channel because I'm watching this even though I told myself that I already know what CSS is.
1:54 if only it was that easy to create such a beautiful button
I came here for counter strike source
He forgot to install it
Me too😂
can't wait for counter strike source to be playable in cascading style sheets lmao
Lmfao
Your UA-cam account is just to valuable for all developers. You are not only making videos to every topic but also making very good vides with good visual graphics.
What surprises me is how you managed to mention all the important details about CSS that everyone must be aware of :D
These beginner videos are fantastic, and I'm sharing them with 100 of my students!
I wanted to say THANK YOU I got my first web dev job! I started 9 months ago with this course and now I made a portfolio based on React Typescript projects and will start into my first frontend engineer job in July =) Believe in yourself guys! You can make it!
My man, you are awsome 🤩
Im still waiting for the c++ video, but until then i'll enjoy the rest 😀
just watch the java and the c video simultaneously
Watch The Cherno dude
I can't believe you didn't do this one yet. Glad you did!
Loved it! I really wanted to see this one up here and you did the job :) Thank you so much 😃
Wait this isn't Counter Strike Source.
LMAO
😅😅😂😂
i never watch videos with speed lower than the normal speed, but i think now the time has come, just to admire this masterpiece.
so clean and perfect video,
I was enjoying the presentation/video rather than the actual CSS topic,
Hats off to fireship!!!
The end screen was all we needed :)
Haha, the overflowing text got me in the end 😂
Assembly in 100 Seconds!
I'm waiting :D
I'm dying at the overflow, you're a legend.
Love the CSS Modules logo at the end 😉🌹
One of the best beginner videos I've seen.
Yo it’s here thank you fireship
Your 100 seconds are so addicting, How do you make like this
I actually am learning CSS right now and this helped a lot. Thanks :)
Have you succeeded of leaning Cascading Strong Storm?
At 0:16 you use the color property to change the color of the box when it should really be background-color
The like and subscribe text overflowing the box is just incredible, great idea
This video seemed especially good, the diagrams were great and easy to understand
Really good content🔥. BTW. almost 1M. Good luck.
Some of the visuals people have made using raw css is astounding.
I was looking for CSS tutorials and then only you dropped this
2:06 I'm literally about to work on a zoom transition like this for my next project. Seriously man, you are a freaking god. You manage to CRAM all the BEST info into an extremely high fidelity youtube video. Insane. Very. Nice. Work. 👍👍👍👍👍👍
Awesome video! Funny enough, the move into modularity happened after CSS 2... technically there was never a CSS 3, even if the vast majority of people would refer to it as the current version :s
My professor is requiring us to watch a Fireship video, count me in! Love your videos!
Oh cool! Thanks for wrapping all the scattered pieces I’m learning into a nice little digestible package.
I have probably written more than 100000 lines of css in my projects, and this is everything you need to get started with for css, summarised within 100 seconds.
Love the broken box at the end
Loved the overflow at the end lol
These videos are so addicting
We already knew that Jeff is a master in making things look simpler.
Now let's note the latest tip:
Cover bf before css.
Whatever the art for making these videos is called... you sir, have mastered it!
got my exams today, still enjoying myself cuz of your videos 😎😎🙌🏻
I like the fact that no one notices theses are actually 140 seconds! But great video as always!
How can you pack so much info in such a short amount of time? Genius!
Jeff is still my favourite tech youtuber
Your content is awesome. I just purchased the pro membership
I know CSS for 10 years now, but I will never miss this video
Every fireship video in 100 seconds is longer than 100 seconds
Thanks for this! I am now in.
Quality of this video was amazing for some reason ✌️
the like && subscribe segment had me hollering.
Have you considered covering quantum programming in 100 seconds? It's a very intersting subject and completely different from normal programming.
The generated captions are just hilarious 😄
Taking a CSS course while thinking that CSS is a Computer Science Student, so Kind of taking CS course 😂
Developer: I want this to be centered and blue with rounded corners
CSS: Best I can do is circle, to the right and green
Thanks!
when he said CSS in 20 minutes, he wasn't kidding. He actually wrapped up necessary stuffs within 20 minutes.
I knew all of this, but I can definitely recommend this video for people needing a really brief overview of CSS(3).
I WAS WAITING FOR THIS!
Assembly Language in 100 Seconds would be 🤩 AWESOME 🤩
Congrats on 1 million subs dude
Well deserved!
Congrats on 1 mil subs
Congratulations on reaching 1 MILLION Subscribers 🎉🎉
CSS is my Passchendaele. C++, C#, JavaScript, HTML etc. all have their quirks but at their core they basically do what you expect them to do, are 'mostly' consistent and when you mess up the strictly typed languages will basically scream at you until you sort your life out. With CSS you could be doing nothing 'technically' wrong but because you/someone else did something a 1000 lines up in the sheet nothing you're trying to do actually works the way you think it will work. Not to mention the confusing naming of some of the element properties, 'Align,' 'Center,' 'Justify,' 'Items,' 'Contents,' 'Text' etc. On the surface CSS is simple as, but when I actually have to work with it I get absolutely crushed.
Can't wait for Crystal in 100 seconds!
This was beautifully simple and this is my sign. Thank you.
I really dig this format of your videos man, please do Kafka in 100 secondes thanks !
Your explanations are amazing. Please make one shot for CSS and JS too :D
Congrats on 1mil jeff!!!
2:15 basically sums up all my experience with CSS.
Excellent! I replayed sections several times...
size - color - positioning(grid/flex) - layout(padding/margin)
Fireship in 100s please, Jeff♥️♥️
@Fireship
Just came across this great channel and video and subscribed. Can't believe I missed it all these days. Was looking for this simple and concise explanation.
Have two questions -
1) Which version of CSS has what advantage or when should it be used as per your expertise? Like Tailwind or Boostrap or Vanilla?
2) Can you please also comment on the bgm you used haha?
AMAZING VIDEO!!!! I would love to see a more in depth one about this topic
I love yours videos! Explained well, short and to the point.
Fireship? More like "Fantastic; this intro was lit!" 👍🔥
This channel makes me feel like I've overpaid for my college education in terms of both money and time
Not the video we all wanted, but the video we deserved.
Congratulation for one million subscriber 🥳🥳🥳
Ahh, CSS, the bane of my life...
Even though I hate CSS, I enjoyed the video ;)
This was awesome, thanks for the share. Great work!
what nice subtitles
يا شباب ابسط حاجه نقدر نساعد بيها الباشمهندس اسامه هي اننا نسمع الاعلانات ..متبقوش انانيين و محدش يقولي معنديش وقت اسمع الاعلانات على اساس يعني أن الباشمهندس اسامه عنده وقت يعملك فيديوهات ..هو قدملك معروف ومنزلك كورسات محترمه مجانا فواجب عليك تشكره على الأقل بسماع الاعلانات