CSS in 100 Seconds

[@tejasn3835]

shout out to the dedication in the "like and subscribe" at the end 2:15 you'll always be the best

[@UselessDuckCompany]

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]

Back in my day, we had to support ie6. Uphill. Both ways.

[@UselessDuckCompany]

@@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!

[@c0smo709]

>css >programming >code wheeze

[@chepossofare]

Well, have fun compiling a C++ project, mate.

[@chepossofare]

@@UselessDuckCompany omg lotus notes is my personal Vietnam

[@robinmartijn9041]

He centered a div without googling? HE'S A WITCH!

[@jdboyce]

This is the best comment in recent memory 🥲

[@BoredEditor4k]

text-align: center; justify-content: center; align-items:(or item i forgot) center;

[@Atkafası-31]

@@BoredEditor4k nope. .flex { display: flex; justify-content: center; align-items: center; }

[@Kryptonn682]

​@@Atkafası-31

[@hortusdeescapismo]

display: grid place-items: center or smt

[@theatypicaldeveloper]

🔥 Great work as usual! Lots of ppl are using styled components now, it would be great to see one about JSS too!

[@Centorios]

Currently working with jss, and it's very useful

[@robertbrown1338]

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)

[@lanye2708]

@@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

[@igordasunddas3377]

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.

[@peaklander1]

​@@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?

[@yeaitsme6834]

Loving these beginner videos. Sharing this with 100+ of my students!

[@jacobhassel5860]

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.

[@manasnagelia]

Just got to 1M in just 4 days. Damn.

[@SimplyFizz]

I've wanted to see one about css for a while, as someone that is starting to do web dev, thanks :)

[@esquilo_atomico]

good luck in your journey :)

[@thecanmanification]

As a fellow beginner I think this is a very good primer

[@joemobes1632]

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.

[@Jorgen1040]

@@esquilo_atomico nice profile picture :)

[@kaidoesthingsxyz]

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

[@kevybost]

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)

[@Iceehockey21]

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.

[@JohnSmith-xh6zx]

The humor is incredible.... An inclusion of centering a div using flex. A horribly styled like and subscribe at the end. Good stuff.

[@Phatrikko]

Hey no shame in centering a div with flex!

[@user10476]

@@Phatrikko That is actually considered the best way today. Or one of the best, at least.

[@VictorRibeiroJV]

@@user10476 Yeah, "display: flex" and "align-items: center" is your way to go.

[@MsYvie]

​@@VictorRibeiroJV You forgot "justify-content: center"

[@dreamisover9813]

Outstanding visualization of the concepts, that seemed pretty concise for the short amount of time. Awesome

[@cli23]

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!

[@thessianheart9816]

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.

[@PallGudnason-l5u]

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.

[@Computeshorts]

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.

[@martinmohammed4087]

Your KZbin 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.

[@heheboi9415]

Loved it! I really wanted to see this one up here and you did the job :) Thank you so much 😃

[@desidev69]

2:14 don't worry you can use "overflow" property to fix that

[@wlockuz4467]

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.

[@dishantpatel7548]

so clean and perfect video, I was enjoying the presentation/video rather than the actual CSS topic, Hats off to fireship!!!

[@CHITUS]

These beginner videos are fantastic, and I'm sharing them with 100 of my students!

[@cosmq]

My man, you are awsome 🤩 Im still waiting for the c++ video, but until then i'll enjoy the rest 😀

[@cobaltno51]

just watch the java and the c video simultaneously

[@stickguy9109]

Watch The Cherno dude

[@whitetoggled5546]

1:54 if only it was that easy to create such a beautiful button

[@hmaina0]

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.

[@bonczy_flips]

I came here for counter strike source

[@PapBenedek]

He forgot to install it

[@The_amazing_cousins]

Me too😂

[@ArjunTheRageGuy]

can't wait for counter strike source to be playable in cascading style sheets lmao

[@Atkafası-31]

Lmfao

[@alexwilkinsgames]

I laughed at your subtle "like and subscribe" error with the text coming out of the box.

[@iamnexom]

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.

[@hamdibeep4]

What surprises me is how you managed to mention all the important details about CSS that everyone must be aware of :D

[@crowlsyong]

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. 👍👍👍👍👍👍

[@stamoulohta]

The end screen was all we needed :)

[@CrazyCodingChannel]

One of the best beginner videos I've seen.

[@yitzchaksviridyuk932]

I can't believe you didn't do this one yet. Glad you did!

[@BorisValenta]

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!

[@MentorMode]

Really good content🔥. BTW. almost 1M. Good luck.

[@deady42]

Wait this isn't Counter Strike Source.

[@naveensundar0]

LMAO

[@AbdelkaderBoukhalfoun]

😅😅😂😂

[@icutshapes8164]

I'm dying at the overflow, you're a legend.

[@basarat]

Love the CSS Modules logo at the end 😉🌹

[@matevarga1401]

Haha, the overflowing text got me in the end 😂

[@kirdow]

Assembly in 100 Seconds! I'm waiting :D

[@ronakpatil1]

i never watch videos with speed lower than the normal speed, but i think now the time has come, just to admire this masterpiece.

[@user-ry4ip9ps9x]

This video seemed especially good, the diagrams were great and easy to understand

[@codyivy9612]

My professor is requiring us to watch a Fireship video, count me in! Love your videos!

[@iwatobi0127]

I actually am learning CSS right now and this helped a lot. Thanks :)

[@bernardkonan96]

Have you succeeded of leaning Cascading Strong Storm?

[@JassarDev]

Whatever the art for making these videos is called... you sir, have mastered it!

[@santisoza1364]

These videos are so addicting

[@BryndilleYT]

Loved the overflow at the end lol

[@philippesteve7734]

The like and subscribe text overflowing the box is just incredible, great idea

[@davids9096]

Love the broken box at the end

[@jersoncarin1952]

Your 100 seconds are so addicting, How do you make like this

[@Martonic]

Congrats on 1 mil subs

[@adrishkumarde4155]

I was looking for CSS tutorials and then only you dropped this

[@sebastiantrygg4310]

Congrats on 1 million subs dude Well deserved!

[@facundocorradini]

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

[@mexicanmax227]

Wow I miss coding lol. Perfection as always Fireship. Your one of the few KZbin channels relating to code Im still subscribed to just cuz I respect you so much. Don’t get me wrong 😈, I still have saved videos of my most resourceful videos per genre/field/technology/breakthrough/tutorials/guides/etc. I’m just so proud to say I’m still subscribed to you 😁. Yhosh! 💪

[@nettion]

Your content is awesome. I just purchased the pro membership

[@kirbodev]

Congrats on 1mil jeff!!!

[@cyb3rdragon]

Thanks!

[@urishmueli]

I love yours videos! Explained well, short and to the point.

[@teodorchirileanu]

How can you pack so much info in such a short amount of time? Genius!

[@user-bp5xc9bv4m]

Quality of this video was amazing for some reason ✌️

[@AronAdler]

At 0:16 you use the color property to change the color of the box when it should really be background-color

[@ForTheOmnissiah]

Some of the visuals people have made using raw css is astounding.

[@Murdokstankfoot]

Oh cool! Thanks for wrapping all the scattered pieces I’m learning into a nice little digestible package.

[@bearfm]

Yo it’s here thank you fireship

[@Accuraid]

This was beautifully simple and this is my sign. Thank you.

[@rodrigocornidez1917]

This was awesome, thanks for the share. Great work!

[@adityavsx]

got my exams today, still enjoying myself cuz of your videos 😎😎🙌🏻

[@DoughnutBricks]

I like the fact that no one notices theses are actually 140 seconds! But great video as always!

[@cosiam8dx]

the like && subscribe segment had me hollering.

[@mrjson3039]

AMAZING VIDEO!!!! I would love to see a more in depth one about this topic

[@parzh]

The generated captions are just hilarious 😄

[@lilrex2015]

Developer: I want this to be centered and blue with rounded corners CSS: Best I can do is circle, to the right and green

[@WillMitchell3]

Excellent! I replayed sections several times...

[@bl4ckk]

I WAS WAITING FOR THIS!

[@DailyHomerClips]

I really dig this format of your videos man, please do Kafka in 100 secondes thanks !

[@F3PIZZA]

Thanks for this! I am now in.

[@omegahishumata1548]

Lets see how my webdev exam will play out tomorrow... This taught me more than my prof :D

[@zuhair4967]

Congratulations on reaching 1 MILLION Subscribers 🎉🎉

[@NotePortal]

congrats on 1 million!

[@igordasunddas3377]

I knew all of this, but I can definitely recommend this video for people needing a really brief overview of CSS(3).

[@MercyFromOverwatch2]

Jeff is still my favourite tech youtuber

[@lopsanggurung5870]

Assembly Language in 100 Seconds would be 🤩 AWESOME 🤩

[@sjoerdvanbommel9784]

Every fireship video in 100 seconds is longer than 100 seconds

[@porrasm]

Have you considered covering quantum programming in 100 seconds? It's a very intersting subject and completely different from normal programming.

[@HazemTamimi]

I know CSS for 10 years now, but I will never miss this video

[@NorthernChimp]

We already knew that Jeff is a master in making things look simpler. Now let's note the latest tip: Cover bf before css.

[@BrunaMiranda-l3q]

Your explanations are amazing. Please make one shot for CSS and JS too :D

[@LimitlesslyUnlimited]

@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?

[@BillionaireDeveloper]

Fireship in 100s please, Jeff♥️♥️

[@schedarian-]

Can't wait for Crystal in 100 seconds!

[@laptopuser5198]

That 1 million looks good. Congrats

[@theencryptedpartition4633]

Taking a CSS course while thinking that CSS is a Computer Science Student, so Kind of taking CS course 😂

[@philiphayes4283]

Excellent tempo on this video.

[@PunmasterSTP]

Fireship? More like "Fantastic; this intro was lit!" 👍🔥

[@theplant4046]

Congratulation for one million subscriber 🥳🥳🥳

[@HaryanviKashmiri]

what nice subtitles

[@tomfoolary4892]

ive been waiting for this one.

[@ErFyAgario]

Now I know how to center a div.

[@mmaLyons]

أقسم بالله إنت أفضل مبرمج في العالم العربي وافضل مدرس

[@spektred]

Glad I learned much of this in the early 90s. 😊