CSS in 100 Seconds
HTML-код
- Опубликовано: 13 дек 2021
- 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? 
Наука
HTML is a noun, CSS is an adjective and javascript is a verb.
Speaking the language of the gods
He is out of line but he got a point
Yes
no, css is an adjective
I like this thought
shout out to the dedication in the "like and subscribe" at the end 2:15
you'll always be the best
He centered a div without googling?
HE'S A WITCH!
This is the best comment in recent memory 🥲
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?
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
Wait this isn't Counter Strike Source.
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.
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)
Loving these beginner videos. Sharing this with 100+ of my students!
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.
I laughed at your subtle "like and subscribe" error with the text coming out of the box.
2:14 don't worry you can use "overflow" property to fix that
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.
Loved it! I really wanted to see this one up here and you did the job :) Thank you so much 😃
Outstanding visualization of the concepts, that seemed pretty concise for the short amount of time. Awesome
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!
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.
so clean and perfect video,
I was enjoying the presentation/video rather than the actual CSS topic,
Hats off to fireship!!!
Your RUclips 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'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.
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!
The like and subscribe text overflowing the box is just incredible, great idea
I can't believe you didn't do this one yet. Glad you did!
Haha, the overflowing text got me in the end 😂
I'm dying at the overflow, you're a legend.
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.
Really good content🔥. BTW. almost 1M. Good luck.
Your 100 seconds are so addicting, How do you make like this
I love yours videos! Explained well, short and to the point.
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
This video seemed especially good, the diagrams were great and easy to understand
Wow I miss coding lol. Perfection as always Fireship. Your one of the few RUclips 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! 💪
AMAZING VIDEO!!!! I would love to see a more in depth one about this topic
This was beautifully simple and this is my sign. Thank you.
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. 👍👍👍👍👍👍
Oh cool! Thanks for wrapping all the scattered pieces I’m learning into a nice little digestible package.
This was awesome, thanks for the share. Great work!
i never watch videos with speed lower than the normal speed, but i think now the time has come, just to admire this masterpiece.
Assembly in 100 Seconds!
I'm waiting :D
Love the broken box at the end
One of the best beginner videos I've seen.
Whatever the art for making these videos is called... you sir, have mastered it!
Congrats on 1mil jeff!!!
The end screen was all we needed :)
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.
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
Loved the overflow at the end lol
Every fireship video in 100 seconds is longer than 100 seconds
Congrats on 1 million subs dude
Well deserved!
Congrats on 1 mil subs
Amazing Video , Keep going !!👍👍
Love the CSS Modules logo at the end 😉🌹
Excellent! I replayed sections several times...
Your content is awesome. I just purchased the pro membership
Can't wait for Crystal in 100 seconds!
These videos are so addicting
How can you pack so much info in such a short amount of time? Genius!
I was looking for CSS tutorials and then only you dropped this
Some of the visuals people have made using raw css is astounding.
I WAS WAITING FOR THIS!
amazing! thank you!!!
Great work!
1:54 if only it was that easy to create such a beautiful button
I actually am learning CSS right now and this helped a lot. Thanks :)
Have you succeeded of leaning Cascading Strong Storm?
Lovely video, thanks!
This channel makes me feel like I've overpaid for my college education in terms of both money and time
I really dig this format of your videos man, please do Kafka in 100 secondes thanks !
Quality of this video was amazing for some reason ✌️
Thank you very cool. Now I just got to figure out how to make stuff look pretty
I like the fact that no one notices theses are actually 140 seconds! But great video as always!
the like && subscribe segment had me hollering.
Taking a CSS course while thinking that CSS is a Computer Science Student, so Kind of taking CS course 😂
Have you considered covering quantum programming in 100 seconds? It's a very intersting subject and completely different from normal programming.
I know CSS for 10 years now, but I will never miss this video
ive been waiting for this one.
Glad I learned much of this in the early 90s. 😊
Really loved it 🥰
The generated captions are just hilarious 😄
Fireship? More like "Fantastic; this intro was lit!" 👍🔥
Now I know how to center a div.
Yo it’s here thank you fireship
Developer: I want this to be centered and blue with rounded corners
CSS: Best I can do is circle, to the right and green
congrats on 1 million!
i was waiting for this
At 0:16 you use the color property to change the color of the box when it should really be background-color
I came here for counter strike source
got my exams today, still enjoying myself cuz of your videos 😎😎🙌🏻
SOLID design principles in 100 seconds
Perfect timing!
loved the ending where the subscrive mensage went outside of the box borders hhahah
Finally I now know how to center a div
Assembly Language in 100 Seconds would be 🤩 AWESOME 🤩
Congratulations on reaching 1 MILLION Subscribers 🎉🎉
We already knew that Jeff is a master in making things look simpler.
Now let's note the latest tip:
Cover bf before css.
Not the video we all wanted, but the video we deserved.
Time to do one on @container queries!
Thanks appreciate you ❤