The Only CSS Layout Guide You'll Ever Need
HTML-код
- Опубликовано: 8 фев 2025
- CSS gets real messy but people insist on continually approach css with a chaotic approach. In this video, I go through a step by step process of how you should approach css layouts, an exact strict guide on how you can approach it without leading to css chaos. As someone who experienced a lot of chaotic and poorly maintained css codebases, this guide will truly help you find a good process for laying out your entire website
Links:
piratefsh.gith...
dev.to/ziizium...
stackoverflow....
-----------
Subscribe to my channel: / @edrohdev
for more web development
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
I'm here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
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
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
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!
Everything you done in this video is absolutely amazing! thanks for the work you placed in explaining and demonstrating so well!
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
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
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.
Finally, someone who understands enough to explaining it in a simple way. Marvelous!!!
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
😂
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
This was an absolute gem of a video. Thank you for sharing such fundamental concepts.💖
That flex cheatsheet website is super helpful! Awesome video!
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
Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed
Thanks Ed this has beyond excellent. Didn't think i could learn so much in such a short amount of time.
ur the only youtuber who Im glad I learned css from, everyone teaches it so bad so much fluff you get right into it
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 alot! im just starting programming a website, and this absolutely helped me think in better structuring
Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.
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.
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 video
this is probably my favorite software engineering channel
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.
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
this is golden youtube content
This was the video I was searching for. Thank you! 🙇♂
Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D
thank you, finally an efficient way to teach how grids work.
helped a lot in revising and enhancing the concepts , thank you!
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.
Flexbox
Grid
Pattern: relative parent, absolute child
Thank you for the video
This tutorial is soooo informative! Explained very good and understandable. Thanks a lot.
I think only this channel show realworld and professional case you will find in your world
You have a great way of explaining things, thanks!
Thank you so much for such concise and funny explanations!
Thank you so much for concise and funny explanations !
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)
Your voice is so perfect, good tutorial, thanks
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 😅
Good video Ed!!! Great speaker and video production.
Thank you for making this video. I now understand how were used it
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
This video got me a lot of things ordered that I knew already!
Incredibly well explained!
Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave
I use Quickly CSS Grid to build HTML CSS, and it works perfect :)
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?
Crazy value! Thank you for this!
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
It's good practice to use both, but I prefer grid
nice editting, well said explanation 👏
The Chrome extension to highlight the elements is called 'Pesticide'.
this is useful. Thanks Ed!!!
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
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 :)
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.
This is so helpful! thank u so much!
Me watching this video with my css filled with floats...
Same
I'm finding this channel right before my practical examinations..😢 on web development...😂 Are you kidding me! 😫😫 My project is trash as it is ..😫😫😫
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.
Kinda disappointed because there's no Pikachu but indeed it's the only layout guide I'll ever need
Great work! Thanks man!
Great video man !!!
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?
- 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
These are great explanations but please consider getting a pop filter. My subwoofer is popping like crazy.
This was very helpful thank you!
The Only CSS Layout Guide You'll Ever Need
i owe you my life King
Amazing explanation
great lesson, ty! and thumbnail was so good i HAD to click.
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
Thank you! It was very useful
Thank you for this video!
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?
THis is amazing, thank you!
What's the chrome extension you use? at 1:58... Great video!
The whole video I've been focusing on your hair man, it's so unique. It feels unnatural.
can anyone tell me what extension he was using when he was showing youtube box layouts
Nice one bro
So much great thanks 🎉
I hate messing with css, that is why I am here
thank you man!
Great video! thank you!
Is this vanilla CSS ?
Good video about CSS layout, thank you 10:10
"Only use float if you enjoy suffering" lmao
Is a container just like or ? I can't seem to find any documentation on it.
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😅❤
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.
2:23 which extension