CSS in 100 Seconds

Подписаться 3 млн

Просмотров 525 тыс.

50% 1

Cascading Style Sheets or CSS is the language that makes HTML websites look pretty. Learn how concepts like cascade, specificity, inheritance, and the box model influence the appearance of a webpage fireship.io/tags/css/
#css #webdev #100SecondsOfCode
The sequel to HTML in 100 Seconds • HTML in 100 Seconds
🔗 Resources
CSS Docs developer.mozilla.org/en-US/d...
Flexbox in 100 Seconds • CSS Flexbox in 100 Sec...
Grid Layout in 100 Seconds • CSS Grid in 100 Seconds
CSS Animation codepen.io/ainalem/pen/oNxXRgW
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is CSS?
- How does CSS cascade?
- What is specificity in CSS?
- CSS Box Model explained
- CSS for absolute beginners
- What is CSS used for?
- When was CSS3 created?
- Will there be a CSS4?

Наука

Опубликовано:

13 дек 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 573

@maqsud4521 2 года назад

HTML is a noun, CSS is an adjective and javascript is a verb.

@SahilP2648 2 года назад

Speaking the language of the gods

@abhiramam5752 2 года назад

He is out of line but he got a point

@monika.alt197 2 года назад

Yes

@henior 2 года назад

no, css is an adjective

@gimp3695 2 года назад

I like this thought

@tejasn3835 2 года назад

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

@UselessDuckCompany 2 года назад

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 2 года назад

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

@UselessDuckCompany 2 года назад

@@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 2 года назад

>css >programming >code wheeze

@chepossofare 2 года назад

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

@chepossofare 2 года назад

@@UselessDuckCompany omg lotus notes is my personal Vietnam

@robinmartijn9041 2 года назад

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

@jdboyce 3 месяца назад

This is the best comment in recent memory 🥲

@theatypicaldeveloper 2 года назад

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

@Centorios 2 года назад

Currently working with jss, and it's very useful

@robertbrown1338 2 года назад

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 2 года назад

@@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 2 года назад

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 2 года назад

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

@SimplyFizz 2 года назад

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

@esquilo_atomico 2 года назад

good luck in your journey :)

@thecanmanification 2 года назад

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

@joemobes1632 2 года назад

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 2 года назад

@@esquilo_atomico nice profile picture :)

@mavquill 2 года назад

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

@desidev69 2 года назад

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

@kevybost 2 года назад

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)

@yeaitsme6834 2 года назад

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

@JohnSmith-xh6zx 2 года назад

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

@Phatrikko 2 года назад

Hey no shame in centering a div with flex!

@user10476 2 года назад

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

@VictorRibeiroJV 2 года назад

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

@jacobhassel5860 2 года назад

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 2 года назад

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

@Iceehockey21 2 года назад

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.

@wlockuz4467 2 года назад

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.

@alexwilkinsgames 2 года назад

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

@thessianheart9816 11 месяцев назад

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.

@heheboi9415 2 года назад

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

@dreamisover9813 2 года назад

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

@cli23 2 года назад

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!

@dishantpatel7548 2 года назад

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

@martinmohammed4087 2 года назад

Your RU-vid 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.

@mexicanmax227 2 года назад

Wow I miss coding lol. Perfection as always Fireship. Your one of the few RU-vid 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! 💪

@cosmq 2 года назад

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

@cobaltno51 2 года назад

just watch the java and the c video simultaneously

@stickguy9109 2 года назад

Watch The Cherno dude

@Computeshorts 2 года назад

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.

@h_maina 2 года назад

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.

@CHITUS 2 года назад

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

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

@ChrisPirillo147 2 года назад

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

@yitzchaksviridyuk932 2 года назад

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

@urishmueli 2 года назад

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

@matevarga1401 2 года назад

Haha, the overflowing text got me in the end 😂

@mrjson3039 2 года назад

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

@Accuraid 2 года назад

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

@user-ry4ip9ps9x 2 года назад

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

@facundocorradini 2 года назад

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

@kirdow 2 года назад

Assembly in 100 Seconds! I'm waiting :D

@rodrigocornidez1917 2 года назад

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

@ronakpatil1 2 года назад

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

@jersoncarin1952 2 года назад

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

@MentorMode 2 года назад

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

@philippesteve7734 2 года назад

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

@icutshapes8164 2 года назад

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

@davids9096 2 года назад

Love the broken box at the end

@JassarDev 2 года назад

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

@iamnexom 2 года назад

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.

@GeorgeStamoulis81 2 года назад

The end screen was all we needed :)

@CrazyCodingChannel 2 года назад

One of the best beginner videos I've seen.

@arcanaido6415 7 месяцев назад

loved the ending where the subscrive mensage went outside of the box borders hhahah

@teodorchirileanu 2 года назад

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

@JoelDzs 2 года назад

Notification squad !

@MrGreen-hr5cq 2 года назад

Reporting for duty!

@nettion 2 года назад

Your content is awesome. I just purchased the pro membership

@kirbodev 2 года назад

Congrats on 1mil jeff!!!

@PreciousGaming15902580rAf 2 года назад

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

@bernarddevkonan 4 месяца назад

Have you succeeded of leaning Cascading Strong Storm?

@sebastiantrygg4310 2 года назад

Congrats on 1 million subs dude Well deserved!

@DoughnutBricks 2 года назад

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

@BryndilleYT 2 года назад

Loved the overflow at the end lol

@shiliseifeddine5140 2 года назад

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

@Murdokstankfoot Год назад

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

@bl4ckk 2 года назад

I WAS WAITING FOR THIS!

@adrishkumarde4155 2 года назад

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

@santisoza1364 2 года назад

These videos are so addicting

@basarat 2 года назад

Love the CSS Modules logo at the end 😉🌹

@Youtube_user09.s 4 месяца назад

Amazing Video , Keep going !!👍👍

@whitetoggled5546 Год назад

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

@user-bp5xc9bv4m 2 года назад

Quality of this video was amazing for some reason ✌️

@schedarian- 2 года назад

Can't wait for Crystal in 100 seconds!

@AronAdler 2 года назад

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

@riskacendana8085 3 месяца назад

size - color - positioning(grid/flex) - layout(padding/margin)

@theencryptedpartition4633 10 месяцев назад

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

@WillMitchell3 Год назад

Excellent! I replayed sections several times...

@sjoerdvanbommel9784 2 года назад

Every fireship video in 100 seconds is longer than 100 seconds

@PunmasterSTP Месяц назад

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

@adityavikramsinha408 2 года назад

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

@Martonic 2 года назад

Congrats on 1 mil subs

@MercyFromOverwatch2 2 года назад

Jeff is still my favourite tech youtuber

@AshishDha 10 месяцев назад

amazing! thank you!!!

@aryangarg9187 2 года назад

Lovely video, thanks!

@BlackdestinyXX 2 года назад

Great work!

@buttrepenut5132 2 года назад

the like && subscribe segment had me hollering.

@MikeHalk100 2 года назад

Great explanation -- subscribed! Please do an *HTML Picture Element in 100 Seconds.*

@tomfoolary4892 2 года назад

ive been waiting for this one.

@WilsontheWolf 2 года назад

Thank you very cool. Now I just got to figure out how to make stuff look pretty

@ForTheOmnissiah 2 года назад

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

@porrasm 2 года назад

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

@savroful 2 года назад

Perfect timing!

@spektred 2 года назад

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

@deady42 Год назад

Wait this isn't Counter Strike Source.

@lopsanggurung5870 2 года назад

Assembly Language in 100 Seconds would be 🤩 AWESOME 🤩

@0xbyt3z 2 года назад

i was waiting for this

@bearfm 2 года назад

Yo it’s here thank you fireship

@ErFyAgario 2 года назад

Now I know how to center a div.

@GrandlineClips 2 года назад

congrats on 1 million!

@parzh 2 года назад

The generated captions are just hilarious 😄

@KingstonTrap 2 года назад

Really loved it 🥰

@barbarianater 2 года назад

Love ur channel 😃 Please do a video on the Ada language

@igordasunddas3377 2 года назад

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

@NorthernChimp 2 года назад

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

@F3PIZZA 3 месяца назад

Thanks for this! I am now in.

@HazemTamimi 2 года назад

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

@NooglerNafiz 2 года назад

Fireship in 100s please, Jeff♥️♥️

@zuhair4967 2 года назад

Congratulations on reaching 1 MILLION Subscribers 🎉🎉