For someone that knows NOTHING about ANYTHING YOU'RE TALKING ABOUT, I was able to follow and pick up a few things. I'm interested in coding and building a website but I have no clue whatsoever. But THE FACT that I could understand what you're saying, says a lot about your teaching skills. I'm impressed.
Thinking in boxes is what I found out on my own, I had so much trouble with layouts until that specific point where I started to think in boxes.. It made my life easier! I wish more and more people who are in this just started out their dev journey knows about it.
me too, i always think in boxes like a can already the see the box model of any tag or div. i already know where the margin,padding and positions are taking place. this helps me understand what i am working with
Absolutely OUTSTANDING!! As a beginner I have watched a number of videos on HTML and CSS and this just made my life a piece of cake, with double frosting 😁
After spending two solid hours up to midnight going back and forth , back and forth over and over again trying to follow and understand, I think I agree with you sir, CSS is a real mess. But there is something special about you that not many people have; the ability to make somebody like me not to give up easily. Thanks a lot.
This explains 80% of what you need to know in css . i never knew when i need to even use grid of flex i thought flex can do all the job. I dont usually comment on tutos but this video is truly that good and i have understanding of how complexe clean interactive layouts are made. Thanks so much brother
@@TopNotchVideosYT I would say yes. Chunks of text are referred to as blocks. It might help to visualise the layout as actual physical blocks being stacked on one another. That is certainly one of the techniques I'll be using going forward.
Absolutely lovely tutorial. I just love watching a great programming TUTORIAL :D I'm like addicted to learning technologies and techniques to do programming and advance my knowledge. Liked, Subscribed, and Commented your video. You have earned it absolutely in every way. You are a great teacher and able to convey knowledge smoothly and simply which is needed to learn all of these difficult technologies.
Man I feel old seeing xanga, early 2000s in middle school vibes lmao great explanation video, helped me understand positioning a lot better as a visual learner 😅
That was incredibly well explained, thanks. As you said there are so many properties, especially for grid, and I've tried to learn them one-by-one but the best approach is what you did, studying each scenario and purpose. Also, I never heard of flex-basis and will definitely start using it, I had some funny issues with flexbox+width recently, probably should be using this property instead
I don't know shite about CSS. In fact, it's so unknown to me I thought you were talking about Counter Strike Source until I clicked and heard the first few words.
You mention that the 3 main props you need to know are: 1. display 2. justify-content 3. align-items ..you then go into detail about justify-content and align-CONTENT, completely skipping align-items.
You don't need to use an implicit 12 column grid, besides it isn't responsive, much easier method is one line of code: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); Adjust to your liking.
- In Css you should be thinking in Boxes - Understand Margin Border Padding Content - Every element has a parent child relationship - Pixels and Floats are outdated
Theeeeese are great videos. You can also make more videos relating to what tech stack we should use, Like Nextjs, vs MERN, or pages vs app router, etc, etc
I see this question all over, and I can't find a clear answer with visual aids. How do we make the grid show itself in Chrome? This could be the solution I've been looking for so that I can properly center elements in a responsive way, but I can't make the grid visible regardless of what advice I follow. It's pretty difficult to believe that Google doesn't use its own browser to design its sites, but I'm starting to feel like maybe it doesn't because this seems to be an impossible task. I just don't want to keep repositioning items or settling for imperfections whenever I resize the browser window. I can center something in maximize, but then it's wayyyyyyyyyy off-center the more I horizontally shrink the window. I'm new to your content. Do you have a tutorial for this? It's the exact problem you described, but I don't have access to the solution. It's driving me crazy.
I am confused as to why you would use a grid in some of the shown examples, or why you would use a single giant grid instead of splitting it into smaller grids. For your 12x5 grid example, why not just split the whole thing into three rows, each being it's own grid. That way you could mostly avoid spans, and you wouldn't have to bother with "calculating" the specific grid size. Another worry of mine is what happens with most of the shown layout on different screen sizes. Do you just completely hide them and show a different layout?
For someone that knows NOTHING about ANYTHING YOU'RE TALKING ABOUT, I was able to follow and pick up a few things. I'm interested in coding and building a website but I have no clue whatsoever. But THE FACT that I could understand what you're saying, says a lot about your teaching skills. I'm impressed.
Thinking in boxes is what I found out on my own, I had so much trouble with layouts until that specific point where I started to think in boxes.. It made my life easier! I wish more and more people who are in this just started out their dev journey knows about it.
me too, i always think in boxes like a can already the see the box model of any tag or div. i already know where the margin,padding and positions are taking place. this helps me understand what i am working with
i remember being on Twitter and seeing the different panes as these separate entities all related but different and was like...ahhh
Finally....a CSS Layout Guide I understand! Thank you, Sir.
Finally a very clear and concise explanation for someone staring at a blank page trying to figure this out lol Thank you!
same
hah, aren't we all xD
hope your web dev journey is going great
Epic thumbnail 😂
thumbnail got me rollin 😂
Yea he totally got me
😂
the extension name is "google pesticide"
on any browser extension marketplace, just write "pesticide"
Omg thank you so much for posting this!
you are right
thanks!
Absolutely OUTSTANDING!! As a beginner I have watched a number of videos on HTML and CSS and this just made my life a piece of cake, with double frosting 😁
This is the best css tutorial to understand the fundamentals of layout
THIS IS THE BEST CSS VIDEO I HAVE EVER SEEN IN MY LIFE !!! this the the most perfect video explanation of what CSS is! BEAUTIFUL
Everything you done in this video is absolutely amazing! thanks for the work you placed in explaining and demonstrating so well!
After spending two solid hours up to midnight going back and forth , back and forth over and over again trying to follow and understand, I think I agree with you sir, CSS is a real mess. But there is something special about you that not many people have; the ability to make somebody like me not to give up easily. Thanks a lot.
I just started coding and I was struggling with understanding CSS. This is some God sent content broo
00:00 Part 1 - thinking of css
3:01 Part 2 - thinking of flexbox
9:59 Part 3 - thinking of grid
I was promised a pikachu. Thoroughly disappointed
☹️
Thumbnail isn't in the video?
Thank you, I won't spend my time on this video anymore
Ty useful comment
Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed
This was an absolute gem of a video. Thank you for sharing such fundamental concepts.💖
I had a hard time understanding CSS but this video simplified the concept of positioning. I found it really hard to wrap around positioning concepts
You're a really great speaker. Most sensible and direct too, you're amazing.
Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.
That flex cheatsheet website is super helpful! Awesome video!
This explains 80% of what you need to know in css . i never knew when i need to even use grid of flex i thought flex can do all the job. I dont usually comment on tutos but this video is truly that good and i have understanding of how complexe clean interactive layouts are made. Thanks so much brother
The way you design your classes for reusability is really smart and opened my eyes to a way more efficient way of writing css.
Excellent video! Here's a tip: use a muffler on your microphone to reduce pops from words like "Pixel Perfect".
thank you, finally an efficient way to teach how grids work.
ur the only youtuber who Im glad I learned css from, everyone teaches it so bad so much fluff you get right into it
My god it finally makes sense to me! No one has ever described the process like that to me. Thank you sir!
when he sais blocks, does he mean boxes?
@@TopNotchVideosYT I would say yes. Chunks of text are referred to as blocks. It might help to visualise the layout as actual physical blocks being stacked on one another. That is certainly one of the techniques I'll be using going forward.
Thank alot! im just starting programming a website, and this absolutely helped me think in better structuring
this is golden youtube content
Absolutely lovely tutorial. I just love watching a great programming TUTORIAL :D I'm like addicted to learning technologies and techniques to do programming and advance my knowledge. Liked, Subscribed, and Commented your video. You have earned it absolutely in every way. You are a great teacher and able to convey knowledge smoothly and simply which is needed to learn all of these difficult technologies.
Great job man!!! Thank you for these fundamentals! And the music at the end is like i defeated a chapter boss! :D so rewarding :)
Man I feel old seeing xanga, early 2000s in middle school vibes lmao great explanation video, helped me understand positioning a lot better as a visual learner 😅
I think only this channel show realworld and professional case you will find in your world
great video
this is probably my favorite software engineering channel
That was incredibly well explained, thanks. As you said there are so many properties, especially for grid, and I've tried to learn them one-by-one but the best approach is what you did, studying each scenario and purpose. Also, I never heard of flex-basis and will definitely start using it, I had some funny issues with flexbox+width recently, probably should be using this property instead
helped a lot in revising and enhancing the concepts , thank you!
Important stuff, thanks. That flow talk at around 5:20 I would call ’structural layout’, getting a little closer to the conceptual core.
I just love your retro background. so many memories lol
Thank you so much for such concise and funny explanations!
This tutorial is soooo informative! Explained very good and understandable. Thanks a lot.
Thank you for making this video. I now understand how were used it
Thank you so much for concise and funny explanations !
Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D
Me watching this video with my css filled with floats...
Same
I use Quickly CSS Grid to build HTML CSS, and it works perfect :)
Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave
I'm finding this channel right before my practical examinations..😢 on web development...😂 Are you kidding me! 😫😫 My project is trash as it is ..😫😫😫
This video got me a lot of things ordered that I knew already!
What's the chrome extension you use? at 1:58... Great video!
Good video Ed!!! Great speaker and video production.
Incredibly well explained!
There are plenty of cases where flex and flex-wrap are the choice. The question is: do you need to align things in one dimension or two?
This is the best CSS video, and hilarious lol
I came for Pikachu. But learned a lot
The Only CSS Layout Guide You'll Ever Need
The whole video I've been focusing on your hair man, it's so unique. It feels unnatural.
I don't know shite about CSS. In fact, it's so unknown to me I thought you were talking about Counter Strike Source until I clicked and heard the first few words.
It's good practice to use both, but I prefer grid
nice editting, well said explanation 👏
This is so helpful! thank u so much!
You mention that the 3 main props you need to know are:
1. display
2. justify-content
3. align-items
..you then go into detail about justify-content and align-CONTENT, completely skipping align-items.
Crazy value! Thank you for this!
Great work! Thanks man!
These are great explanations but please consider getting a pop filter. My subwoofer is popping like crazy.
Thank you for the video! It's very good. I just wanted to suggest that you use a pop filter :)
You don't need to use an implicit 12 column grid, besides it isn't responsive, much easier method is one line of code: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); Adjust to your liking.
What would this do?
this is useful. Thanks Ed!!!
great lesson, ty! and thumbnail was so good i HAD to click.
- In Css you should be thinking in Boxes
- Understand
Margin
Border
Padding
Content
- Every element has a parent child relationship
- Pixels and Floats are outdated
Fantastic video thank you sir!!!
Anyone got the Chrome extension at 1:59? EDIT: Nvm it's called Pesticide
4:16 that looks like the identical layout of Monarch Money
Nice one bro
Kinda disappointed because there's no Pikachu but indeed it's the only layout guide I'll ever need
Theeeeese are great videos. You can also make more videos relating to what tech stack we should use, Like Nextjs, vs MERN, or pages vs app router, etc, etc
Great video man !!!
This was very helpful thank you!
Amazing explanation
I see this question all over, and I can't find a clear answer with visual aids. How do we make the grid show itself in Chrome? This could be the solution I've been looking for so that I can properly center elements in a responsive way, but I can't make the grid visible regardless of what advice I follow. It's pretty difficult to believe that Google doesn't use its own browser to design its sites, but I'm starting to feel like maybe it doesn't because this seems to be an impossible task. I just don't want to keep repositioning items or settling for imperfections whenever I resize the browser window. I can center something in maximize, but then it's wayyyyyyyyyy off-center the more I horizontally shrink the window. I'm new to your content. Do you have a tutorial for this?
It's the exact problem you described, but I don't have access to the solution. It's driving me crazy.
Thank you! It was very useful
Is a container just like or ? I can't seem to find any documentation on it.
THis is amazing, thank you!
The Chrome extension to highlight the elements is called 'Pesticide'.
Thank you for this video!
"And you should only use it if you like suffering." - Yeah!🤣🤣🤣
Me: "I love pain. More pain! Oopps... overlapped the ? Yeah! More pain!"
When you reference align-content at 7:08, I think you have confused it for align-items. Align-content is used when a row has wrapped.
can anyone tell me what extension he was using when he was showing youtube box layouts
I hate messing with css, that is why I am here
I am confused as to why you would use a grid in some of the shown examples, or why you would use a single giant grid instead of splitting it into smaller grids. For your 12x5 grid example, why not just split the whole thing into three rows, each being it's own grid. That way you could mostly avoid spans, and you wouldn't have to bother with "calculating" the specific grid size.
Another worry of mine is what happens with most of the shown layout on different screen sizes. Do you just completely hide them and show a different layout?
Where is my Pikachu???
"Only use float if you enjoy suffering" lmao
i owe you my life King
So much great thanks 🎉
How did you make that wavy chart at 14:57 "Revenue and Expenses"?
what is that chrome extension which shows boxes around elements ?
Amazing video!!
Does anybody know the name of the chrome extension he chooses? I've been looking for something like that for a while now😅❤
Which app do you use for prototying your layout. I see an app in the background
i understood flex easily i do use it tho didnt knew about it in detail, bu yes grid is terrifying would probably take more to to get familiar with
What was the chrome extension you showed in your video that reveals the boxes?
Yo bro I have actually seen that kid's 4th dimension video!
what is the extension u used to see the layout of youtube?
2:23 which extension