The Only CSS Layout Guide You'll Ever Need
HTML-код
- Опубликовано: 5 сен 2023
- 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.github.io/how-to/20...
dev.to/ziizium/thinking-in-bo...
stackoverflow.com/questions/3...
-----------
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. 
Наука
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.
I just started coding and I was struggling with understanding CSS. This is some God sent content broo
Finally....a CSS Layout Guide I understand! Thank you, Sir.
Everything you done in this video is absolutely amazing! thanks for the work you placed in explaining and demonstrating so well!
This was an absolute gem of a video. Thank you for sharing such fundamental concepts.💖
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
This is the best css tutorial to understand the fundamentals of layout
You're a really great speaker. Most sensible and direct too, you're amazing.
Epic thumbnail 😂
thumbnail got me rollin 😂
Yea he totally got me
😂
great video
this is probably my favorite software engineering channel
Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D
Thank alot! im just starting programming a website, and this absolutely helped me think in better structuring
Good video Ed!!! Great speaker and video production.
The way you design your classes for reusability is really smart and opened my eyes to a way more efficient way of writing css.
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
Finally a very clear and concise explanation for someone staring at a blank page trying to figure this out lol Thank you!
same
Crazy value! Thank you for this!
Thank you so much for such concise and funny explanations!
Thank you so much for concise and funny explanations !
Incredibly well explained!
This video got me a lot of things ordered that I knew already!
Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed
ur the only youtuber who Im glad I learned css from, everyone teaches it so bad so much fluff you get right into it
Great video man !!!
this is useful. Thanks Ed!!!
I just love your retro background. so many memories lol
00:00 Part 1 - thinking of css
3:01 Part 2 - thinking of flexbox
9:59 Part 3 - thinking of grid
nice editting, well said explanation 👏
this is golden youtube content
Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.
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 was very helpful thank you!
This is the best CSS video, and hilarious lol
This is great. Thank you.
Great video! thank you!
Thank you for this video!
the extension name is "google pesticide"
on any browser extension marketplace, just write "pesticide"
Omg thank you so much for posting 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
Important stuff, thanks. That flow talk at around 5:20 I would call ’structural layout’, getting a little closer to the conceptual core.
Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave
Excellent video! Here's a tip: use a muffler on your microphone to reduce pops from words like "Pixel Perfect".
Me watching this video with my css filled with floats...
Same
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 usefull !!!
great lesson, ty! and thumbnail was so good i HAD to click.
Thank you!
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
i owe you my life King
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😅❤
What was the chrome extension you showed in your video that reveals the boxes?
awesome video
what is that chrome extension which shows boxes around elements ?
can anyone tell me what extension he was using when he was showing youtube box layouts
what is the extension u used to see the layout of youtube?
Nice!
Thanks!
Is a container just like or ? I can't seem to find any documentation on it.
great video
Thanks a lot
is it normal to use css grid for the layout and then flexbox for the individual items within the grid?
The Chrome extension to highlight the elements is called 'Pesticide'.
thanks for the video. Anyone, what's the Chrome tool to see the box display architecture? thanks, bye .
Great!
what a gold video
Thank you for the video! It's very good. I just wanted to suggest that you use a pop filter :)
Which app do you use for prototying your layout. I see an app in the background
what is that chrome extension at the beginning?
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
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?
Wowww what do you use for your charts?
name of the extension for container boxes?
Whats the name of the extension to see all boxes?
uhmm correct me if im wrong but flex wrap fixes everything u needed to treat it like a grid so grid isn't necessary anymore right?
what browser extension is that?
It's good practice to use both, but I prefer grid
whats the extension name sir , to see the page layout?
I'm finding this channel right before my practical examinations..😢 on web development...😂 Are you kidding me! 😫😫 My project is trash as it is ..😫😫😫
What's the extension for box model?
It shows when he hovers. It's called Google Pesticide
bruh whats the extension name to visualize border boxes?
I was promised a pikachu. Thoroughly disappointed
☹️
Thumbnail isn't in the video?
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?
2:23 which extension
The Only CSS Layout Guide You'll Ever Need
These are great explanations but please consider getting a pop filter. My subwoofer is popping like crazy.
bravo
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.
I came for Pikachu. But learned a lot
Is this vanilla CSS ?
"Only use float if you enjoy suffering" lmao
Niiiiice
Holy crap XANGA
"And you should only use it if you like suffering." - Yeah!🤣🤣🤣
Me: "I love pain. More pain! Oopps... overlapped the ? Yeah! More pain!"
Love from india
I hate messing with css, that is why I am here
Liked Subscribed Commented🔥🔥
❤
❤❤❤❤❤❤
Where is my Pikachu???
- 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
the thumbnail is so me.