No video

The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts

  Рет қаралды 449,808

Fireship

Fireship

Күн бұрын

Пікірлер: 371
@toxaq
@toxaq 4 жыл бұрын
Your content is unmatched in quality, timeliness and usefulness.
@jackrdye
@jackrdye 3 жыл бұрын
Couldn't agree more
@durandekamga2298
@durandekamga2298 2 жыл бұрын
Still the GOAT :)
@jamesbest3347
@jamesbest3347 4 жыл бұрын
Man your content is so on point and so professionally made. Blows my mind how you can keep up content like this. Thank you so much for your support of developers. Like Steve Balmer always said, "DEVELOPERS, DEVELOPERS, DEVELOPERS!!!"
@RicardoBarbosaSousa
@RicardoBarbosaSousa 4 жыл бұрын
James Best I have to agree
@DavidElstob73
@DavidElstob73 4 жыл бұрын
Definitely - my understanding of grid was growing, but five minutes of this video and it's multiplied ten fold.
@ypucandeleteit
@ypucandeleteit 4 жыл бұрын
you took the words out of my mouth. Hip hip for Fireship
@netxyz00
@netxyz00 4 жыл бұрын
Indeed, amazing lesson!
@cianmoriarty7345
@cianmoriarty7345 Жыл бұрын
Like Steve Balmer always said: "I'm hungry. Bring me another baby"
@AlexDBaxter
@AlexDBaxter 3 жыл бұрын
Great vid! Really like the animated entry. One technique I have used instead of lots of :nth-child(1) rules is to put variables on the element in the HTML. So for the animated grid example, the divs look like: a b c d and the CSS can be done in one rule: .card { animation: cardEntrance 700ms ease-out; animation-fill-mode: backwards; grid-area: var(--g); animation-delay: calc(var(--i) * var(--stagger-delay)); } - this keeps the repetition in the HTML where it is going to be anyway.
@RobertMcGovernTarasis
@RobertMcGovernTarasis 2 жыл бұрын
Thank you
@cedwards427
@cedwards427 2 жыл бұрын
OOooo, I like this. Coming from Python/Java any kind of repetition has that bad code smell. The next thing I want to work out is to make the grid general enough to handle a variable number of children.
@vellendev
@vellendev 4 жыл бұрын
I need to start using this over Bootstrap. Awesome video as always!
@Fireship
@Fireship 4 жыл бұрын
You won't be disappointed, it only took an hour or two to replace all my grids on Fireship.io
@abednegosteven-4423
@abednegosteven-4423 4 жыл бұрын
@@Fireship wth man, your fireship.io website is just so awesome dang it
@KedarKanekar
@KedarKanekar 11 ай бұрын
It's been 3 years and I keep coming back to videos like this to re-learn. Lots of love, my Captain!
4 жыл бұрын
It's amazing how in a short period of time you manage to cover alot about the topic. Simple, highly educational and easy to watch, simply awesome!
@igorskyflyer
@igorskyflyer 4 жыл бұрын
2:57 let's start by giving our children a little bit of spacing. 🤣 Jeff, you must/will be a great father. 😍
@zafirhasananogh2421
@zafirhasananogh2421 2 жыл бұрын
I was just watching this video now and saw your comment, Jeff had a child recently! Congratulations to him:3
@igorskyflyer
@igorskyflyer 2 жыл бұрын
@@zafirhasananogh2421 wow, thanks for reminding of this comment I made, now it's come true, I say congratulations again, Jeff, as well. 🥳😄
@alihaydargubatov2790
@alihaydargubatov2790 3 жыл бұрын
*A backend dev here* just to say that İ understood everything amazing
@LeoStaley
@LeoStaley 3 жыл бұрын
Front end is so hard. Back end has it easy.
@Dima1415
@Dima1415 2 жыл бұрын
Ï don't understand your letter Ī
@iftruth
@iftruth 4 жыл бұрын
been practicing grid for a year and didn't know about auto-fit / auto-fill mode thanks a lot!
@abednegosteven-4423
@abednegosteven-4423 4 жыл бұрын
lol yeah me too
@ziaahmad8738
@ziaahmad8738 4 жыл бұрын
lool
@punsmith
@punsmith 4 жыл бұрын
Goddammit, I have subscribed already and I somehow managed to miss this one. I'm a late-starter Millenial, but you make me feel like a little kid that sees new and exciting things with glee. The more we can do ourselves without relying on systems like bootstrap, the better. Not that bootstrap should be hated on either, but it's far too large for many projects. Thanks for your hard work!
@akhillshetty2140
@akhillshetty2140 4 жыл бұрын
KZfaq really needs to add a Superlike button, especially for this video! I'd hit it in a heartbeat
@meakra5350
@meakra5350 4 жыл бұрын
I watch this video during my workout, and I have to hurry finishing it up so that I can write the code out. Awsome video, man
@jaydenmoon1165
@jaydenmoon1165 2 жыл бұрын
I find it insane that you don't have like a billion subs - your videos are extremely helpful and perfect length - freaking great man!!!
@arjunyelamanchili3517
@arjunyelamanchili3517 4 жыл бұрын
The card entry animation is beautiful 😍
@Noone-ig5ui
@Noone-ig5ui 4 жыл бұрын
It is nice to see developer advocate using Firefox for their demos.
@Fireship
@Fireship 4 жыл бұрын
I actually use brave for the most part, but firefox has an awesome grid inspector.
@codewithlenny
@codewithlenny 3 жыл бұрын
I am a full-stack developer focused primarily on the backend. I am currently working on my frontend skills and your channel has been a very helpful resource. Thanks
@AlexSpieslechner
@AlexSpieslechner 4 жыл бұрын
i absolutely love the mix of on-point content, clear structure and the occasional gifs and memes. your channel is one of instant recommendations for any web dev. thank you for putting so much effort into these videos.
@petedejager
@petedejager 2 жыл бұрын
I can only agree with what everyone else is saying, your content is in a class of its own. You simplify complexity and have a talent for understanding concepts in such depth that you can convey the most useful bits clearly and logically. No surprise that your channel is doing so well. Thank you and respect!
@gouravkumar772
@gouravkumar772 2 жыл бұрын
Super helpful, Each part deserve a detailed video itself, thanks
@fabianw.7896
@fabianw.7896 2 жыл бұрын
Respect, die best tutorial i watched for CSS-Grid right now!
@hillycrypto3416
@hillycrypto3416 Жыл бұрын
I've been watching a lot of KZfaq videos to understand grid but never understood it but your videos explanations are so simple and easy to understand. Thanks bro
@HardHitMag
@HardHitMag 7 ай бұрын
THANK YOU i was looking for ages for such an easy to follow Explanation
@mahin_panchal
@mahin_panchal 3 жыл бұрын
This is literally an underrated channel!
@suvraneelsaha7857
@suvraneelsaha7857 10 ай бұрын
As a newbie web developer , Learning grid for me is super awesome , thanks to you mate cheers .
@enan0sh
@enan0sh 2 жыл бұрын
I saw this video a couple of months back, today a bug was raised at my current job about some cards not being shown correctly on smaller screens and I just had to come back to this video to remember how to do it, thanks man!
@user-kn4oi9oh4i
@user-kn4oi9oh4i 7 ай бұрын
You earned yourself another subscriber good sir! Thank you! P.S. (edited) I just finished watching and this is exactly what I was looking for! Thank you very much!
@JerWodke2012
@JerWodke2012 2 жыл бұрын
I love the clips you add in your videos, they crack me up lol.
@digigoliath
@digigoliath 4 жыл бұрын
Good job man! Teaches GRID very well. Great presentation with simple-to-understand demos! SMASHING the LIKE button!!!!
@auguststas7770
@auguststas7770 2 жыл бұрын
I'm working on website for 8 hours now, and seeing this video is blessing
@omrividal
@omrividal Жыл бұрын
Two years later still incredible
@rebelion1
@rebelion1 2 жыл бұрын
Wow that was two years ago?!?!?!?! Great video. CSS is so much
@shiro3940
@shiro3940 2 жыл бұрын
how could one make an explanation video in such a short duration, yet the explanation itself is so on-point
@ashwinkumarpillai8923
@ashwinkumarpillai8923 4 жыл бұрын
I have used grid before and watched many videos on it but this is by far the best video I came across.
@almohaiminfarabi9181
@almohaiminfarabi9181 3 жыл бұрын
You are just different then others. I am a begainer. To understand grid i have already watched 20+ video on KZfaq. But no one explained how i can make a photo gallery like this. This video is only 11 minutes long. But its explain a lot. 👌👌👌
@yt-sh
@yt-sh 4 жыл бұрын
I think this maybe the best css Grid video I have yet seen
@DarkPa1adin
@DarkPa1adin 3 жыл бұрын
I watch a few videos and read a few articles on CSS Grid. Your explanation helps me understand repeat(#, size)
@code-maestro
@code-maestro 3 жыл бұрын
THE BEST GRID LAYOUT VIDEO THERE IS
@edberaga
@edberaga 2 жыл бұрын
This is the best grid lesson ever!
@mahmoudiamir
@mahmoudiamir 2 жыл бұрын
This is great😬I was struggling with css fitting for years, I just learned how grid can wrap all the problems up...
@strahinja1107
@strahinja1107 4 жыл бұрын
Pure gold. Short and precise, 0 bullshit. Reminds me of legendary 'kudvenkat' channel for .NET.
@josephlivengood4508
@josephlivengood4508 2 жыл бұрын
ooohh how I miss Boss Ross' show. I'm not an artist but his voice and the energy he put into his paint work is almost like me building a website for a client!
@trimbotee4653
@trimbotee4653 4 жыл бұрын
This video is great! I've been trying to level up my CSS. There is way too much CSS in my projects. This is a perfect way to cut down my CSS volume.
@frankieflood7936
@frankieflood7936 3 жыл бұрын
That idea for passing the grid-area as the shape it occupies in the final layout is fantastic, I love it! Great video, thank you!
@xerxes-ei9gl
@xerxes-ei9gl 3 жыл бұрын
grids are a lifesaver
@abeechr
@abeechr 4 жыл бұрын
Unbelievable the quantity of amazing content you crank out. Thank you!
@ThiagoVieira91
@ThiagoVieira91 4 жыл бұрын
Man I was woefully in need of good grid tutorials. Yours is awesome! 👏🏼 Please keep more grid coming!
@Migueligr2000
@Migueligr2000 4 жыл бұрын
I never writte coments on videos but yours is just sublime, thanks alot.
@stevieholland3579
@stevieholland3579 2 жыл бұрын
This the the most well structured video I have seen on grid and it helped a ton. Thank you. Impressive how well you had such a liner path. Most vids I see kind of just throw a zillion terms at you and it’s kind of like information through a fire hose, but the flow of your video and the execution was perfect.
@traustitj
@traustitj 2 жыл бұрын
Wow. Wish other tutorials were this good
@JoolsParker
@JoolsParker 4 жыл бұрын
Great informative video! Question: When should you use Flexbox and when should you use CSS Grid for layout? Does one have an advantage over the other in terms of layout flexibility?
@Fireship
@Fireship 4 жыл бұрын
I would lean towards grid if you have a layout that requires BOTH columns and rows. Lean towards flexbox you just have something with single row/col, like a card or navbar.
@JoolsParker
@JoolsParker 4 жыл бұрын
Fireship yup, makes sense - cheers for the reply 👍
@MrAlexVelik
@MrAlexVelik 2 жыл бұрын
That is exactly what I was looking for! ily man
@aijiexi
@aijiexi 2 жыл бұрын
You explain this very well, and thank you so much for not having distracting background music!
@Hohumbogey
@Hohumbogey 4 жыл бұрын
Starting off with the legendary Bob Ross! Instant fan
@kaustabhchakraborty4721
@kaustabhchakraborty4721 11 ай бұрын
These videos r the best for recap.
@codersujit5427
@codersujit5427 3 жыл бұрын
The best content in time. Loved it
@youranonymousyoutuber4051
@youranonymousyoutuber4051 4 жыл бұрын
dude your course is golden
@pablovirus
@pablovirus 2 жыл бұрын
holy cow grid is so much better than bootsrap. Thanks for the detailed explanations!!
@saurabh75prakash
@saurabh75prakash 2 жыл бұрын
The highest quality content on web-dev on the web. Thanks 🙏
@meetbardoliya6645
@meetbardoliya6645 2 жыл бұрын
Thnaks a lot :) You made me fall in love with CSS
@MaamarYacineMEDDAH
@MaamarYacineMEDDAH 4 жыл бұрын
SO PROUD of this channel ! Thank you so much Jeff for your excellent work
@12PnT12
@12PnT12 2 жыл бұрын
The basic grid was exactly what I needed for my website. Thanks!
@ricardohernandezmendez4207
@ricardohernandezmendez4207 Жыл бұрын
🤯. I just learned css-grid. Thanks you!
@juanandrescastillofuenmayo6619
@juanandrescastillofuenmayo6619 3 жыл бұрын
Man, I love your content so much, you and Traversy media are like the Webdev gods hahaha, both of you are incredibly helpful. I'll be sure to tell you if I ever get a job, cause it'll be thanks to your teachings.
@juanandrescastillofuenmayo6619
@juanandrescastillofuenmayo6619 2 жыл бұрын
Doing my Databases 1 class final project rn on Angular with Material Design. This is VERY helpful. I'm 100% sure I'll still be checking out this video when in my first job.
@DavidNBooth
@DavidNBooth Жыл бұрын
This was great! Followed along and learned a lot. One note for others: if you don't get the `grid-template-areas` exactly right, it will break everything. E.g. if you don't assign the "main" element correctly or have even one element misassigned, the whole layout gets destroyed.
@duckmasterflex
@duckmasterflex 4 жыл бұрын
I started playing with grid for the first time last week. I LOVE IT.
@coderwork8335
@coderwork8335 Жыл бұрын
your editing is on whole under level, loved 0:40 a lot 😂😂
@supremebeme
@supremebeme 4 жыл бұрын
Thanks from New Zealand
@Fireship
@Fireship 4 жыл бұрын
Thanks, I just had an awesome vacation in NZ last month :)
@supremebeme
@supremebeme 4 жыл бұрын
@@Fireship oh word!
@dennisbarzanoff9025
@dennisbarzanoff9025 4 жыл бұрын
How can you keep uploading so many videos so fast and in such great quality. Have you premade them? GJ✌️
@FriedrichBoettger
@FriedrichBoettger 3 жыл бұрын
I use basic grid, but I had no idea you could do these animations with only css. That's a killer. I might never use this in a production app, but it sure is fun learning how. Thanks.
@altdelette
@altdelette Жыл бұрын
hear hear!!!
@Riko2909
@Riko2909 4 жыл бұрын
Found this Channel around one week ago and man i love every single Minute of your content. :)
@shadowpenteado
@shadowpenteado 3 жыл бұрын
Sensational content. I love the way you explain and demonstrate how things works. Big thank you!
@mfrdbigolin
@mfrdbigolin 3 жыл бұрын
I have never heard about this until now, interesting feature.
@godnyx117
@godnyx117 Жыл бұрын
Some people truly have a charisma!
@mountainslopes
@mountainslopes 3 жыл бұрын
Finally, Chrome Dev Tools has grid visualization 😍
@jonnyp
@jonnyp 2 жыл бұрын
the videos that you like before you even start watching them
@LeoPacheco87
@LeoPacheco87 4 жыл бұрын
Omg, thats amazing... incredible how you can work for years in the code writing industry and learn something every day
@Potatis1337
@Potatis1337 4 жыл бұрын
Your videos are godlike in both presentation, flow and content. 11/10
@shreerangvaidya9264
@shreerangvaidya9264 4 жыл бұрын
Great video! Your channel deserves more than this.
@iqwebserve3973
@iqwebserve3973 Жыл бұрын
Great video. As an update to it, we now have @container in CSS 3.
@GR_BackingTracks
@GR_BackingTracks Жыл бұрын
...could this be the video I've searched a month for?
@pepisnazos
@pepisnazos 4 жыл бұрын
I love your videos, I was looking just because they are entertainment, but after a while you present me this complex world in a way so enjoyable and simple that i love it and i start to build apps. THX YOU (LLL)
@ProgrammingwithShahan
@ProgrammingwithShahan 2 жыл бұрын
Well enough to understand grid.
@johanledel1407
@johanledel1407 4 жыл бұрын
Awesome video as always! Well made and easy to follow. Thank you.
@ziaahmad8738
@ziaahmad8738 4 жыл бұрын
Thank u very much. I knew how to work with basic grid properties but u made it very easy and clear for me.
@inflame1994
@inflame1994 4 жыл бұрын
Such perfect video on grid and mainly lot of valuable information put together in 12min video..that is just great
@TheJacklwilliams
@TheJacklwilliams 2 жыл бұрын
You, kick my ass. Your like "Tech with Tim" on coke. I realized as you were buzzing through this tonight, my solution. I can watch your vid's, consume the mega cool content, but slow the video down by about 50% and then I' can follow. LOL, seriously, you are that teacher, that walks in, smokes through the presentation while the classroom goes numb. I bet you think at this speed too. LOL, kicks my ass everytime. Quality content, delivered FULL FREAKING SPEED WITHOUT ANY PAUSES. lol..... kudos.
@josephlivengood4508
@josephlivengood4508 2 жыл бұрын
Yes, the only thing I was lost was the html and where he was putting those classes. I couldn't get it to take up the 3 rows but only two regardless of what I put in the css properties, so he lost me there. I'm sure I'll figure it out after a few more videos and playing around with it.
@TheJacklwilliams
@TheJacklwilliams 2 жыл бұрын
@@josephlivengood4508 Yeah, I think his stuff is more "overview" and geared towards those that are a little ways along in the mission. Aka, you fill in the blanks. It's always good stuff, high quality, it's just delivererd at blistering speed.
@Fubbel42
@Fubbel42 3 жыл бұрын
Wow, that's really impressive!
@randomly_random_0
@randomly_random_0 2 жыл бұрын
this is what im looking for
@shibuyajin_music
@shibuyajin_music 4 жыл бұрын
0:33 not gonna lie this snippet would make a banger of a lo-fi hip hop track
@michelribbens8014
@michelribbens8014 4 жыл бұрын
Awesome video and examples! Hope you will add a lot more of these about CSS Grid
@ashrafulhaque8710
@ashrafulhaque8710 4 жыл бұрын
I started learning Grid today and you uploaded it!
@AshishDha
@AshishDha Жыл бұрын
this is soooo good. thanks!!! hope to use this on my database website soon! :)
@gregoriodia
@gregoriodia 2 жыл бұрын
❤Best YT video ever
@alexdith9024
@alexdith9024 4 жыл бұрын
Jeez, Im in love with this channel. It's like Jeff knows what I want to learn about!
@zummon
@zummon 2 жыл бұрын
auto-fit for responsive is the best that I didn't know about. I'm from using CSS framework. All of them even the best out there didn't get what I want like code split for each pages. Now I need to learn pure CSS to get more control
@outpost31737
@outpost31737 Жыл бұрын
Two years later and you're a Tailwind fan which is nothing but crazy mark up :)
@arnauddonnay3648
@arnauddonnay3648 4 жыл бұрын
thank you very much for your video, it feels so good to follow you step by step, keep up the great work man
@mrashad_com
@mrashad_com 2 жыл бұрын
You save me from wasting hours of my life learning these subjects the hard way
@habib97se
@habib97se 3 жыл бұрын
Thank you so much for this video. I had difficulties to learn grid in the last days but now you solved all my problems :p
@SaretGnasoh
@SaretGnasoh 2 жыл бұрын
I LOVE GRID
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Slaying The Dragon
Рет қаралды 536 М.
❌Разве такое возможно? #story
01:00
Кэри Найс
Рет қаралды 3,8 МЛН
Please Help Barry Choose His Real Son
00:23
Garri Creative
Рет қаралды 23 МЛН
English or Spanish 🤣
00:16
GL Show
Рет қаралды 8 МЛН
7 ways to deal with CSS
6:23
Fireship
Рет қаралды 1,1 МЛН
10 modern layouts in 1 line of CSS
21:39
Chrome for Developers
Рет қаралды 1,1 МЛН
Reacting to Controversial Opinions of Software Engineers
9:18
Fireship
Рет қаралды 2 МЛН
Learn how to create a responsive CSS grid layout
31:52
Kevin Powell
Рет қаралды 129 М.
Tailwind CSS is the worst…
3:55
Fireship
Рет қаралды 1,4 МЛН
10 CSS Pro Tips - Code this, NOT that!
9:39
Fireship
Рет қаралды 2,2 МЛН
100+ Web Development Things you Should Know
13:18
Fireship
Рет қаралды 1,4 МЛН
Flexbox or grid - How to decide?
18:51
Kevin Powell
Рет қаралды 721 М.
3 More Life-Changing CSS Tips
2:59
Fireship
Рет қаралды 207 М.
The Magic of CSS Grid AUTO-FIT vs AUTO-FILL
11:25
DesignCourse
Рет қаралды 178 М.
❌Разве такое возможно? #story
01:00
Кэри Найс
Рет қаралды 3,8 МЛН