Тёмный

Basics of CSS Grid: The Big Picture 

Layout Land
Подписаться 78 тыс.
Просмотров 190 тыс.
50% 1

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

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 207   
@RealToughCandy
@RealToughCandy 6 лет назад
Best explanation of the grid. Mozilla, please give this woman a raise!
@andrerothweiler9191
@andrerothweiler9191 6 лет назад
Yes, women in tech are really great!
@Bayo106
@Bayo106 5 лет назад
@@andrerothweiler9191 lol
@GinjouArmy
@GinjouArmy 5 лет назад
Oh she works for Mozilla! I have to change my opinion about them. Very good work.
@andrerothweiler9191
@andrerothweiler9191 5 лет назад
@marcin mikołajczak It was sort of a joke. Women in tech are kind of lazy and entitled. But this women is pretty dope
@andrerothweiler9191
@andrerothweiler9191 5 лет назад
@marcin mikołajczak Please, all that is feminist agenda, don't get fooled, mate! Why you don't see companies fighting to have more male nurses or in child care? People should do that, what they want. Women will never be attracted by tech as much as men. They should finally stop that shit!
@gsbcrown
@gsbcrown 6 лет назад
I love how articulate you are. No umming and ahhing. Nice, precise content. Thank you.
@lyingcat9022
@lyingcat9022 4 года назад
Greg Brown she was a teacher sooo.... ;)
@sallylauper8222
@sallylauper8222 3 года назад
She explains things in a very understandable way. I think she should give more actual code examples though.
@israelteixeira7165
@israelteixeira7165 5 лет назад
This is when technical skills meet teaching skills.
@GeoffCottorone
@GeoffCottorone 6 лет назад
"Let go of those ideas, purge that from your mind"... Jen's Zen of the Grid. Just an incredible overview of grid concepts! Love this series.
@scottonanski4173
@scottonanski4173 4 года назад
You just accelerated my understanding of CSS one hundred fold. Your ability to teach in a clear and concise manner is uncanny.
@kishoreandra
@kishoreandra Год назад
You can only explain at this level and make people understand it easier if you are directly involved in working groups 🤷‍♂️ Jen is the bestest of bests 🙌🙏
@MinervaDoe
@MinervaDoe 6 лет назад
These videos are unbelievably helpful.
@praxisdev1884
@praxisdev1884 6 лет назад
How could there be even one dislike? This is possibly the best overview I’ve ever seen... super clear and concise, and her delivery style is so cool. I’m now a fan.
@ejt7655
@ejt7655 6 лет назад
Your videos on CSS Grid are by far the most thorough and helpful that I've come across. Thanks for your efforts in making these videos!!!
@LayoutLand
@LayoutLand 6 лет назад
You are welcome!
@bababooeybababooey
@bababooeybababooey 6 лет назад
I could watch these videos for days straight.
@milleniummoses
@milleniummoses 6 лет назад
I find myself binge-watching, if you will, CSS videos myself.
@bababooeybababooey
@bababooeybababooey 6 лет назад
bruh you polite af , cheers
@Psyop666
@Psyop666 5 лет назад
Without a doubt the best CSS grid explanation ever.
@RC-bl2pm
@RC-bl2pm 6 лет назад
Im just getting my head around grid and the more time passes the more I enjoy this woman talking. Shes very good at explaining the subject.
@jwhubert91
@jwhubert91 5 лет назад
This is the best explanation of the overall concept of Grid usage and how flexible it is.
@TheJacklwilliams
@TheJacklwilliams 2 года назад
Thank you Jen. I had to jumpt to your site(s). I came for CSS, I stayed for you. I'm impressed, intrigued, and undeniably smitten. I'm surprised and somewhat taken aback that you are in NYC during the pandemic years. Frisco is awesome, my heart will always be NYC, my location is the Midwest. My career spans back to 1996. Not as illustrious, some speaking, etc... Yeah, there you are, thanks for this, good stuff. I'd love to have dinner, go for a walk in Central Park and/or the pier in Frisco, name it, I'm there. LOL, I'm going to bed, been at it since 4am and it's 9pm now. You are lovely, talented, intelligent, and, and and... LOL, I know, it's not a dating website. Thank you Jen and I hope you are fairing well in my favorite city on this planet. Hopefully we'll see the end of this thing in the near future.
@ogwurupatrick5641
@ogwurupatrick5641 4 года назад
I'm totally amazed by this lesson. Super clear, super articulate. Very speculative. And no distracting procrastinate explanation. ❤️❤️
@richardpratt16
@richardpratt16 5 лет назад
Being self taught. Trying to figure out floats and displays was frustrating. You fix one thing and something else breaks.Grrrr! This grid stuff has opened a whole new world for me. I might even be able to make a career out of it one day!Thank you for your time and explanation. They need a two thumbs up for videos like this!
@dav1d_andrew
@dav1d_andrew 5 лет назад
I dont know how your videos started showing up in my suggested section, but I am so thankful they did. You explain CSS Grid amazingly!
@diblui
@diblui 4 года назад
I love that this doesn't have any css property! It's a blessing not trying to memorize properties but only concepts that will be explored thoroughly in a second moment! Thanks!!!!
@michaela.thompson8986
@michaela.thompson8986 4 года назад
Thank you for being precise, concise and none of that annoying & useless "ahhh" or "ummm" none sense. You remind me of a Jen I met in 1991 at Keesler AFB in Biloxi, MS. Very intelligent and helpful.
@JS-zm5se
@JS-zm5se 3 года назад
One of such person, who knows stuff in detail.
@RobFos
@RobFos 6 лет назад
I love all your videos. Very calming, relaxing & soothing while teaching. And the way you explain things makes me want to learn more. :) ALL your videos are the best explanation ive ever found on the internet. Thank you.
@LayoutLand
@LayoutLand 6 лет назад
Oh, thank you.
@davidhernandez1699
@davidhernandez1699 6 лет назад
Superb! This is what I've been missing from other tutorials. Great job!
@ig8200
@ig8200 6 лет назад
Thank you very much, a very complete and professional explanation, your English is very fluent and well pronounced for those of us who are learning this beautiful language.
@gickygackers
@gickygackers 5 лет назад
You are the best teacher. I’ve watched many videos and you are the one I recommend to friends. Thank you!
@FrenchinPlainSight
@FrenchinPlainSight 5 лет назад
You clearly understand this in your core. No cuts, just wonderfully clear. Thanks! I'm coming to learn grid before really having much experience with flexbox so I want to learn both and make informed decisions on my future layouts. You've helped me a lot already.
@rahnetruong1169
@rahnetruong1169 3 года назад
I was your student on linkedin learning :D hello teacher, glad to see you again
@adelinrapcore
@adelinrapcore 3 года назад
I could listen to you, explaining for ages..
@fabiclubb786
@fabiclubb786 5 лет назад
I needed one tiny bit of information that was not covered anywhere else. I got it from this video. Thank you!
@sametkaraca5976
@sametkaraca5976 4 года назад
She is gold ! I wish she shares more information about other topics too.
@Freebird1122
@Freebird1122 5 лет назад
Thank you!!! So much! New to CSS after learning some HTML back in the late 90's. I've been so confused, and more confused the more I read. FINALLY it makes SENSE! I'm with ToughCandy. Mozilla give her a raise! Jen you are amazing.
@lianamikulin1281
@lianamikulin1281 3 года назад
oh wow! 🙌🏼bless! clearest intro ever! yes, give this woman a raise :D!
@MarkusEicher70
@MarkusEicher70 2 года назад
Thanks a lot Jen! A perfect entry for me. I need to learn how you do it, that it fits for all browsers without a ton of media queries. I like that. Thanks for sharing. Have a good time.
@erfling1
@erfling1 5 лет назад
This is such good stuff. I love the way you combine a deep expertise with a learned practicality.
@calvinebun-amu5397
@calvinebun-amu5397 4 года назад
The quality of this video is exceptional. Truly A1 content! Thank you
@chio3112
@chio3112 5 лет назад
Big thanks! I like your way of explaining "How to do" and talking clear language. Super easy to understand each word. Well deserved SUB!
@kakairecharles3474
@kakairecharles3474 4 года назад
You are a real teacher. Million thanks!
@tezdogs
@tezdogs 4 года назад
These videos are fantastic! By far the most concise and easy to understands explanation of any programming concepts I have ever seen. Thank you Jen!! :D
@edwassermann8368
@edwassermann8368 Год назад
Excellent introduction on the matter. Thanks!
@funkyshade
@funkyshade 5 лет назад
Great video and good explanation. One tip: raise the volume, have someone check the levels.
@christhompson8384
@christhompson8384 3 года назад
These are some of the best videos I have come across on any technical topic -- extremely clear delivery and they cover the content at a good pace. But the suggestion to use a element as a generic container is nasty from a semantic point of view and not something I would expect from an educator in this field!
@kurtthorsten4463
@kurtthorsten4463 3 года назад
wow this is very well explained. you make it understandable while still being very concise. thank you for the content
@nivita9830
@nivita9830 6 лет назад
Being able to style the empty grid cells would be awesome (I love visible grid lines) - hope Grid level 2 does give us this ability!
@VaiGo
@VaiGo 5 лет назад
One of the best channels. Please, come back with the videos
@luchtaj
@luchtaj 6 лет назад
Jen, thank you for explaining it so well and for your awesome narrative style! I came here after watching the wonderful Rachel Andrew’s vids which made me start using the grid. But then you add so much necessary depth and reasoning!
@jl1331
@jl1331 3 года назад
Liked & Subscribed. This is what quality content looks like.
@jakubrpawlowski
@jakubrpawlowski 6 лет назад
Another great video Jen! Thank you for this content. Also congrats on 500 subscribers in 1 day!
@realmumptastic
@realmumptastic 6 лет назад
More gold! Thank you Jen!
@KelseyThornton
@KelseyThornton 3 года назад
Great explanation! You mentioned trying to get an orange line down the left - you could add a "border-left:solid 3rem orange" style element to achieve something like this. (Answering a long time after the video went live so things may well have progressed by now!)
@FireStarfashion
@FireStarfashion 4 года назад
This helped my understanding so much!
@mttmortensen527
@mttmortensen527 5 лет назад
Programming tutorials on youtube would be so much more enjoyable if Jen was doing them. Just so informative without making you feel intimidated. Bravo.
@zaigamakhtar9237
@zaigamakhtar9237 2 года назад
Thanks Jen! This was really insightful and elaborate.
@progtom7585
@progtom7585 4 года назад
i first found Jen on Mozilla's channel... so glad i found this thru other searches... thanks for the explanations Jen...
@FredSkullsmash3208
@FredSkullsmash3208 4 года назад
Amazing presentation!!! I'm learning web development and this has been the best explanation of GRID that I have found so far!
@user-um7tw6kx4r6
@user-um7tw6kx4r6 Год назад
Thanks to you I went from never having made a single grid, to figuring it out and making one, without having to read another lame tutorial...THANK YOU!!
@Vahidaam
@Vahidaam 3 года назад
Thank you so much. This is the best tutorial I've ever seen about Css stuff. It is really usefull and I want you to keep teaching and make videos about Css.
@RunOs3
@RunOs3 6 лет назад
This is the best explanation of a grid.
@phkoon
@phkoon 16 дней назад
Woman, why did you stop making videos? Your content is way too good.
@briandelaney6354
@briandelaney6354 3 года назад
Glad I found this channel!! Thank you for your clear explanations 😀😀
@arigatouroboto5856
@arigatouroboto5856 6 лет назад
Thank you so much for this explanation. I have been using flexbox and have been having a hard time getting layouts like I want them. Excited to get started with CSS Grid!
@mcmorales3008
@mcmorales3008 5 лет назад
Very nice explanation, technical and simple to follow, thanks so much!
@lucillekenney8311
@lucillekenney8311 5 лет назад
Great explanation of the grid. It all makes perfect sense. Thank you!
@gelliravikumar018
@gelliravikumar018 6 лет назад
Simple and crispy info. Thanks! Appreciated your efforts ☺️.
@coreyethology9084
@coreyethology9084 6 лет назад
Jen, you are a GEM. Thank You!
@kenyadigittt
@kenyadigittt 6 лет назад
Thank you for making the grid so easily digestible!!! Subbed!
@aminemakhlouf5283
@aminemakhlouf5283 6 лет назад
There's something that bothers me a lot these days since I'm very new to web dev (I started learning in January, with no prior knowledge on the subject matter). And I found myself confronted to a lot of things going on, I mean I feel like I'm in a middle of a huge shift right know, sometimes I start thinking that it's maybe not the best time to do it, then after doing a lot of research I've discovered that It's never a good time to do it if I look at it from that perspective, since it's evolving in a pace where no one can find the perfect spot to start with...bottom line: Do It, and start now!! Everyone have felt or will feel the same way when starting to code for sure!! Now my question is: Experimented people always suggest that we need to know the basics, and it's something that I agree with, but when it comes to new things, do we need to go through the old stuff?, I mean do I really need to know about the float based layout techniques and frameworks Or I move on and work with a newest and easiest technique ? In other words, witch is better : learn CSS Grids without putting the old stuff in your mind? Or learn the old stuff (basics) and then "purge that out of your mind" and work with CSS Grids? ps: I love your vids they're very informative! THANK YOU!
@alisamuzafarova4131
@alisamuzafarova4131 6 лет назад
As someone with over 10 years of experience I'd advise, as you look into LAYOUT 1) learn flex box first 2) learn CSS grid second or at the same time; 3) read about float but SKIP all "float layouting knowledge", as it is indeed outdated and was a hack; it's still very much useful to learn all display modals developer.mozilla.org/en-US/docs/Web/CSS/display (the basics of how DOM elements flow)
@aminemakhlouf5283
@aminemakhlouf5283 6 лет назад
Alisa Muzafarova Thank you so much for the reply, finally a sincere answer, no one is using the word "skip" anymore as though they've been through the whole process since the 80's or so..Thanks again..have a great day.
@TheDonBry
@TheDonBry 6 лет назад
i also had the same problems thank you for the reply, it give me some ideas
@AmieB2005
@AmieB2005 6 лет назад
Alisa Muzafarova I'm also very new to this so I don't really understand how accepted or "best practice" is the Grid model or any layout model. Everywhere I hear is that accessibility comes first, and if a fairly new feature is still not accepted by a user in Cambodia using a 2008 browser, you shouldn't be using it.
@UrraSergio
@UrraSergio 5 лет назад
13:07 The grid is the "architectural layout". The elements of the interface are "furniture".
@catwhisperer911
@catwhisperer911 6 лет назад
I was a little confused when you explained that only direct children of the container are placed on the grid and that children of those are not placed on the grid. I was interpreting "not placed on the grid" too literally. I now believe I understand what you said to mean that only direct child elements of the container can be items and have item-specific css attributes and their children will be placed on the grid but not as items but rather as the item's content. I tried making a grandchild element an item and the browser rendered the parent of the grandchild as an anonymous (implicit) item and its child (the element upon which I actually placed grid-row and grid-column attributes on) as the anonymous item's content. I think your videos and presentations are awesome. Watching them has reignited my love for web development after having walked away from it a few years back due to illness. Thankfully I am 100% well now and dying to get back into the game and in large part that is because of you. Thank you so much.
@LayoutLand
@LayoutLand 6 лет назад
This is very helpful feedback! You are right, I could explain how the flow works to put all grandchildren+ onto the grid as a child of a placed item. Yup. I'm glad you figured it out.
@catwhisperer911
@catwhisperer911 6 лет назад
CSS grids are awesome and your videos have convinced me to use them :)
@itsfahid
@itsfahid 6 лет назад
I like the way you explain. I get the vibe that few of the points were on the spot and I guess that's why you didn't include the slides for those.
@ricardocalderon9823
@ricardocalderon9823 4 года назад
this playlist is amazing
@ac-xt8ps
@ac-xt8ps 6 лет назад
Just found your videos today: It's awesome seeing a woman teaching web design/development (almost every place I've been to, the dev department is a bunch of dudes), and I'm learning SO MUCH. Thank you for explaining everything in detail. As a graphic designer trying to improve on my front-end development, it's wildly helpful. :)
@Textras
@Textras 6 лет назад
Fantastic Jen. As always!
@longtimedeveloper6498
@longtimedeveloper6498 3 года назад
Outstanding tutorial, I learned a lot, thank you!
@pnjegosh
@pnjegosh 4 года назад
Excellent explanation, good job!
@Credin84
@Credin84 4 года назад
Jen is amazing
@hamishmac100
@hamishmac100 5 лет назад
Awesome - articulated so clearly - so eloquently - thank you :)
@Andrei-ds8qv
@Andrei-ds8qv 6 лет назад
That was really really nice, deep and useful video!! THANKS A LOT!
@prawnyb
@prawnyb 4 года назад
you make excellent videos, I can see why you have so many subscribers
@ruffneck718
@ruffneck718 5 лет назад
Thank you SO Much Jen.
@AlessandroMuraroIT
@AlessandroMuraroIT 6 лет назад
Wow didn't know about these videos, thanks Jen!
@GrymligastPS4
@GrymligastPS4 6 лет назад
Am new to grid, and in this video had a couple of "ahhhhhh!" moments. Very well explained, thanks!
@LayoutLand
@LayoutLand 6 лет назад
I'm glad it helped! I'm thinking of doing a more in-depth series on CSS Grid. Let me know what else would help to learn the whole thing.
@GrymligastPS4
@GrymligastPS4 6 лет назад
Sorry i've been on holiday! I notice i've got a few new Grid vids to catch up on. If i come across anything in my Grid travels I will add a reply to your latest videos :) Thanks again.
@DimitriBoyarski
@DimitriBoyarski 6 лет назад
Very well explained. Thank you.
@stevenseah9168
@stevenseah9168 6 лет назад
Great videos! Please post more!
@kieranbarker1902
@kieranbarker1902 6 лет назад
Thank you! I admittedly know nothing about grid and I thought “what better place to get an intro”? 🤓
@parhamd7333
@parhamd7333 4 года назад
wow Thank you very much for explaining
@michelsena2076
@michelsena2076 4 года назад
It looks like you've done it. You're so amazing
@21thTek
@21thTek 5 лет назад
with all due respect, you do not need subgrids, I am already nesting grids within grids succesfully using css grid, nested grids have a totally diferently layout and if you wish you can make this complex whole structure responsive too. THANKS for your video !
@ganeshacharya234
@ganeshacharya234 4 года назад
may be a what she meant was if there a specification for sub grids to cater for basic layout design it could already solve most of the problems! Yes you can already do stuff without them but you and i or other person might have 3 different ways to approach it. My views :)
@21thTek
@21thTek 4 года назад
@@ganeshacharya234 indeed, all diferent aproaches lead us to a richer informatic culture, have a great day !! :)
@ganeshacharya234
@ganeshacharya234 4 года назад
@@21thTek thanks.! Indeed, Couldnt agree more :)
@amygailable
@amygailable 6 лет назад
Excellent teacher.
@gustborges
@gustborges 4 года назад
Best teacher! Thanks a lot.
@mmahgoub
@mmahgoub 7 месяцев назад
No wonder she works for Apple now! this vid is a very solid reference, thank you very much!
@Clawzoftime
@Clawzoftime 6 лет назад
Can you please detail or show example how we can make the last part you talked about happen? I am trying to do exactly that, have some sprt of color scheme or stripe run down or across or maybe even diagnol but can't seem to find a way using grid that will also be responsive. Plz plz plz
@GeorgeaBrooks
@GeorgeaBrooks 4 года назад
Love Jen
@gabrielveron6993
@gabrielveron6993 4 года назад
jen this is awesome, greeting from argentina! ♥
@georgebockari289
@georgebockari289 6 лет назад
well I feel like I could write documentation on this...not really but I definitely understand it now. Thanks
@seemsas
@seemsas 6 лет назад
Thanks for the good explanation.
@reidwalley
@reidwalley 2 года назад
So helpful!
@RioWaller
@RioWaller 6 лет назад
Great job!!! Thanks Jen!!!
@Joker200084
@Joker200084 6 лет назад
Ahhh explained well....i've just started to transition and i'm used to heavily nesting. This makes sense.
@climbingworkouts
@climbingworkouts 5 лет назад
Thank you for the explainer
@raccoon0413
@raccoon0413 5 лет назад
I'm quite amazed by the fact that she knows korean can be written vertically. Kids from nowadays even don't know that.
@Clawzoftime
@Clawzoftime 5 лет назад
Do you have an example of the tag stripe on a track that can go across a page or go down an entire page? I have been looking for way to perfect this and perhaps a diagnol line etc..
Далее
Incredibly Easy Layouts with CSS Grid
9:02
Просмотров 139 тыс.
Using Flexbox + CSS Grid Together: Easy Gallery Layout
8:52
9 Biggest Mistakes with CSS Grid
14:21
Просмотров 163 тыс.
CSS Grid like you are Jan Tschichold
13:51
Просмотров 62 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 75 тыс.
Responsive Mondrian - a demo of CSS Grid
13:27
Просмотров 65 тыс.
Probably the most underrated (and useful) CSS feature
21:11
CSS Grid vs Flexbox
11:43
Просмотров 247 тыс.
Designing for A Viewport
13:30
Просмотров 33 тыс.
Become A Master Grid CSS In 13 Minutes
13:46
Просмотров 43 тыс.