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
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.
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.
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'm a backend guy, I think that should say enough about how good I am at CSS It's overwhelming, the thousands of properties, the tutorials that don't feel like are actually helping, it annoys me how so much material doesn't focus on the basics and how to think in CSS nearly as much as other programming languages (Well CSS is not much of a language but I digress)
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 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?
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.
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.
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.
Finally....a CSS Layout Guide I understand! Thank you, Sir.
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
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.
let me build you a website lets connect on X app
00:00 Part 1 - thinking of css
3:01 Part 2 - thinking of flexbox
9:59 Part 3 - thinking of grid
Thanks you very much
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
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 😁
Epic thumbnail 😂
thumbnail got me rollin 😂
Yea he totally got me
😂
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
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.
Everything you done in this video is absolutely amazing! thanks for the work you placed in explaining and demonstrating so well!
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!
I just started coding and I was struggling with understanding CSS. This is some God sent content broo
This is the best css tutorial to understand the fundamentals of layout
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
That flex cheatsheet website is super helpful! Awesome video!
This was an absolute gem of a video. Thank you for sharing such fundamental concepts.💖
Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed
You're a really great speaker. Most sensible and direct too, you're amazing.
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
Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.
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.
The way you design your classes for reusability is really smart and opened my eyes to a way more efficient way of writing css.
Thank alot! im just starting programming a website, and this absolutely helped me think in better structuring
Excellent video! Here's a tip: use a muffler on your microphone to reduce pops from words like "Pixel Perfect".
This was the video I was searching for. Thank you! 🙇♂
this is golden youtube content
great video
this is probably my favorite software engineering channel
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
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 :)
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, finally an efficient way to teach how grids work.
2:23 which extension
Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D
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
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!
I think only this channel show realworld and professional case you will find in your world
What's the chrome extension you use? at 1:58... Great video!
I'm a backend guy, I think that should say enough about how good I am at CSS
It's overwhelming, the thousands of properties, the tutorials that don't feel like are actually helping, it annoys me how so much material doesn't focus on the basics and how to think in CSS nearly as much as other programming languages
(Well CSS is not much of a language but I digress)
You have a great way of explaining things, thanks!
This tutorial is soooo informative! Explained very good and understandable. Thanks a lot.
Thank you so much for such concise and funny explanations!
Thank you so much for concise and funny explanations !
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 😅
Your voice is so perfect, good tutorial, thanks
Good video Ed!!! Great speaker and video production.
Thank you for making this video. I now understand how were used it
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?
can anyone tell me what extension he was using when he was showing youtube box layouts
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?
I use Quickly CSS Grid to build HTML CSS, and it works perfect :)
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.
This video got me a lot of things ordered that I knew already!
Me watching this video with my css filled with floats...
Same
How did you make that wavy chart at 14:57 "Revenue and Expenses"?
nice editting, well said explanation 👏
It's good practice to use both, but I prefer grid
What's the extension for box model?
It shows when he hovers. It's called Google Pesticide
Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave
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.
I'm finding this channel right before my practical examinations..😢 on web development...😂 Are you kidding me! 😫😫 My project is trash as it is ..😫😫😫
Incredibly well explained!
What is the name of this admin theme at 10:17?
Is this vanilla CSS ?
Is a container just like or ? I can't seem to find any documentation on it.
what is the extension u used to see the layout of youtube?
Crazy value! Thank you for this!
The Only CSS Layout Guide You'll Ever Need
The Chrome extension to highlight the elements is called 'Pesticide'.
This is the best CSS video, and hilarious lol
Thank you for the video! It's very good. I just wanted to suggest that you use a pop filter :)
This is so helpful! thank u so much!
this is useful. Thanks Ed!!!
The whole video I've been focusing on your hair man, it's so unique. It feels unnatural.
what's the name of the extension to display the boxes on websites?
Kinda disappointed because there's no Pikachu but indeed it's the only layout guide I'll ever need
what browser extension is that?
I came for Pikachu. But learned a lot
What’s the song at the end? Thank you
what tool does he use for putting in code and seeing the results in real time at the same timme? I'm using sublime text 3
whats the extension name sir , to see the page layout?
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
What was the chrome extension you showed in your video that reveals the boxes?
So much great thanks 🎉
This was very helpful thank you!
Great work! Thanks man!
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.
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?
I hate messing with css, that is why I am here
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😅❤
Thank you! It was very useful
name of the extension for container boxes?
Great video man !!!
Amazing explanation
Whats the name of the extension to see all boxes?
is it normal to use css grid for the layout and then flexbox for the individual items within the grid?
Which app do you use for prototying your layout. I see an app in the background