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 was promised a pikachu. Thoroughly disappointed
☹️
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
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
Epic thumbnail 😂
thumbnail got me rollin 😂
Yea he totally got me
😂
00:00 Part 1 - thinking of css
3:01 Part 2 - thinking of flexbox
9:59 Part 3 - thinking of grid
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 tutorial to understand the fundamentals of layout
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
You're a really great speaker. Most sensible and direct too, you're amazing.
The way you design your classes for reusability is really smart and opened my eyes to a way more efficient way of writing css.
the extension name is "google pesticide"
on any browser extension marketplace, just write "pesticide"
Omg thank you so much for posting this!
great video
this is probably my favorite software engineering channel
Thank alot! im just starting programming a website, and this absolutely helped me think in better structuring
Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed
Good video Ed!!! Great speaker and video production.
Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D
Thank you so much for concise and funny explanations !
ur the only youtuber who Im glad I learned css from, everyone teaches it so bad so much fluff you get right into it
Thank you so much for such concise and funny explanations!
this is golden youtube content
Crazy value! Thank you for this!
Incredibly well explained!
Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.
This video got me a lot of things ordered that I knew already!
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 useful. Thanks Ed!!!
nice editting, well said explanation 👏
Great video man !!!
This was very helpful 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.
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
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 😅
Excellent video! Here's a tip: use a muffler on your microphone to reduce pops from words like "Pixel Perfect".
This is great. Thank you.
Thank you for this video!
Great video! 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
Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave
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?
Thank you!
great lesson, ty! and thumbnail was so good i HAD to click.
i owe you my life King
Thank you for the video! It's very good. I just wanted to suggest that you use a pop filter :)
Thanks a lot
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 is that chrome extension which shows boxes around elements ?
Thanks!
I hate messing with css, that is why I am here
Is a container just like or ? I can't seem to find any documentation on it.
That was usefull !!!
can anyone tell me what extension he was using when he was showing youtube box layouts
Is this vanilla CSS ?
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.
what is the extension u used to see the layout of youtube?
is it normal to use css grid for the layout and then flexbox for the individual items within the grid?
What was the chrome extension you showed in your video that reveals the boxes?
I'm finding this channel right before my practical examinations..😢 on web development...😂 Are you kidding me! 😫😫 My project is trash as it is ..😫😫😫
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
It's good practice to use both, but I prefer grid
great video
I came for Pikachu. But learned a lot
awesome video
what a gold video
These are great explanations but please consider getting a pop filter. My subwoofer is popping like crazy.
Great!
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?
Wowww what do you use for your charts?
what is that chrome extension at the beginning?
2:23 which extension
Which app do you use for prototying your layout. I see an app in the background
The Only CSS Layout Guide You'll Ever Need
What's the extension for box model?
It shows when he hovers. It's called Google Pesticide
thanks for the video. Anyone, what's the Chrome tool to see the box display architecture? thanks, bye .
what browser extension is that?
Whats the name of the extension to see all boxes?
"Only use float if you enjoy suffering" lmao
name of the extension for container boxes?
bravo
Love from india
Holy crap XANGA
Where is my Pikachu???
❤
Me watching this video with my css filled with floats...
Same
Liked Subscribed Commented🔥🔥
Niiiiice
❤❤❤❤❤❤
- 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.
R.I.P. Lofi girl
Damn you look like Steven He, Emoooootional Damage 😂
EdRoh do you teach people front end. I'm interested pls get back to me asap thanks.
I’m old enough to have grown up using Netscape 😂
Steven he?
WHAT ARE YOU TALKING ABOUT WHO IMMEDIATELY REACHES FOR ABSOLUTE POSITIONING
That was a interesting forum, with $100 Billion dollars Alat can definitely make Saudi Arabia a hub for Advanced Technology and Innovation
Am I in 2000?
Great video but bro... you need a pop filter on that mic. (Sound-sensitive autistics like me are driven crazy by plosives.)