The Only CSS Layout Guide You'll Ever Need

[@adymorris7347]

Finally....a CSS Layout Guide I understand! Thank you, Sir.

[@faithwithmandy]

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.

[@juanamuom2125]

let me build you a website lets connect on X app

[@AbhimanueVBiju]

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.

[@MohamedAhmed-mp6qr]

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

[@samdavidh]

i remember being on Twitter and seeing the different panes as these separate entities all related but different and was like...ahhh

[@Brezanova]

Finally a very clear and concise explanation for someone staring at a blank page trying to figure this out lol Thank you!

[@unknownbanned7415]

same

[@williamhu9567]

hah, aren't we all xD hope your web dev journey is going great

[@argh5665]

00:00 Part 1 - thinking of css 3:01 Part 2 - thinking of flexbox 9:59 Part 3 - thinking of grid

[@SilentKiller-ep7bw]

Thanks you very much

[@emiliormclimbing9508]

Finally, someone who understands enough to explaining it in a simple way. Marvelous!!!

[@toesiluutaga]

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.

[@edwardnapatalio853]

Epic thumbnail 😂

[@eazyv9172]

thumbnail got me rollin 😂

[@MAX-yd2bs]

Yea he totally got me

[@dragonball41876]

😂

[@kidyoshi007]

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

[@dchumik]

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 😁

[@Squatrecords]

Everything you done in this video is absolutely amazing! thanks for the work you placed in explaining and demonstrating so well!

[@Chae-dudu]

the extension name is "google pesticide"

[@tmpmail]

on any browser extension marketplace, just write "pesticide"

[@jasonsiew23]

Omg thank you so much for posting this!

[@ajaxajax-dw3rb]

you are right

[@sskopintsev]

thanks!

[@zerken7220]

I just started coding and I was struggling with understanding CSS. This is some God sent content broo

[@kbonline5473]

This is the best css tutorial to understand the fundamentals of layout

[@davidmesaros9733]

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

[@RockTheCage55]

Thanks Ed this has beyond excellent. Didn't think i could learn so much in such a short amount of time.

[@mooglglius]

That flex cheatsheet website is super helpful! Awesome video!

[@harithoppil7]

Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed

[@rajshailey92]

This was an absolute gem of a video. Thank you for sharing such fundamental concepts.💖

[@metalrunsit]

You're a really great speaker. Most sensible and direct too, you're amazing.

[@darkastically]

Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.

[@yf4jm]

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

[@antonio_carvalho]

Excellent video! Here's a tip: use a muffler on your microphone to reduce pops from words like "Pixel Perfect".

[@jikaikas]

ur the only youtuber who Im glad I learned css from, everyone teaches it so bad so much fluff you get right into it

[@jagannathps]

this is golden youtube content

[@Just_Chuk]

The way you design your classes for reusability is really smart and opened my eyes to a way more efficient way of writing css.

[@johnborron1059]

My god it finally makes sense to me! No one has ever described the process like that to me. Thank you sir!

[@TopNotchVideosYT]

when he sais blocks, does he mean boxes?

[@johnborron1059]

@@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.

[@maikeltoxix1716]

Thank alot! im just starting programming a website, and this absolutely helped me think in better structuring

[@sparta117corza]

This was the video I was searching for. Thank you! 🙇‍♂

[@AnsonHunnell]

great video this is probably my favorite software engineering channel

[@ALStarsSprinkle]

Important stuff, thanks. That flow talk at around 5:20 I would call ’structural layout’, getting a little closer to the conceptual core.

[@kopilkaiser8991]

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.

[@ramoreacher5322]

thank you, finally an efficient way to teach how grids work.

[@filipnikolic2280]

Great job man!!! Thank you for these fundamentals! And the music at the end is like i defeated a chapter boss! :D so rewarding :)

[@SamuTheFrog]

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.

[@lilyshevchenko7048]

Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D

[@zakaria20062]

I think only this channel show realworld and professional case you will find in your world

[@achyutkayastha4248]

helped a lot in revising and enhancing the concepts , thank you!

[@AntonioRonde]

Flexbox Grid Pattern: relative parent, absolute child Thank you for the video

[@mon0theist_tv]

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

[@junior.santana]

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

[@joseluis7118]

You have a great way of explaining things, thanks!

[@FrancoisLampron]

Thank you so much for such concise and funny explanations!

[@FrancoisLampron]

Thank you so much for concise and funny explanations !

[@Elena_Moralez]

This tutorial is soooo informative! Explained very good and understandable. Thanks a lot.

[@jezza9774]

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 😅

[@dc33333]

Good video Ed!!! Great speaker and video production.

[@TimAyro]

Me watching this video with my css filled with floats...

[@Potato-c6r]

Same

[@JawsoneJason]

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?

[@anujmourya18_]

2:23 which extension

[@anoymouschannel3513]

Thank you for making this video. I now understand how were used it

[@freechain]

Your voice is so perfect, good tutorial, thanks

[@vamoosTV]

What's the chrome extension you use? at 1:58... Great video!

[@khari_baat]

Incredibly well explained!

[@cryptofelix5242]

This video got me a lot of things ordered that I knew already!

[@joelpww]

I was promised a pikachu. Thoroughly disappointed

[@ceribrolord3893]

☹️

[@NotKyleChicago]

Thumbnail isn't in the video?

[@vine.as0]

Thank you, I won't spend my time on this video anymore

[@terrypark3690]

Ty useful comment

[@GDNachoo]

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)

[@nikj1178]

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?

[@davidshanahan6081]

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.

[@bambinoesu]

It's good practice to use both, but I prefer grid

[@ondrej1031]

Crazy value! Thank you for this!

[@Tafa-ul]

can anyone tell me what extension he was using when he was showing youtube box layouts

[@deldridg]

Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave

[@josu_tv]

nice editting, well said explanation 👏

[@nikitamigushev]

Great work! Thanks man!

[@br1580]

The Chrome extension to highlight the elements is called 'Pesticide'.

[@_____vieve]

This is so helpful! thank u so much!

[@dc33333]

this is useful. Thanks Ed!!!

[@munzutai]

These are great explanations but please consider getting a pop filter. My subwoofer is popping like crazy.

[@wknight92]

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.

[@Aosses]

I use Quickly CSS Grid to build HTML CSS, and it works perfect :)

[@hardikganatra2453]

Great video man !!!

[@infini667]

Thank you for the video! It's very good. I just wanted to suggest that you use a pop filter :)

[@outpost31737]

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.

[@spacemanXVI.]

What would this do?

[@JimmyCrackorn]

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.

[@willbarrett6204]

Is a container just like or ? I can't seem to find any documentation on it.

[@eshw23]

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

[@senorlua6116]

How did you make that wavy chart at 14:57 "Revenue and Expenses"?

[@kloworman]

Kinda disappointed because there's no Pikachu but indeed it's the only layout guide I'll ever need

[@bhoomisharma3802]

I'm finding this channel right before my practical examinations..😢 on web development...😂 Are you kidding me! 😫😫 My project is trash as it is ..😫😫😫

[@Omar-dp8ob]

Is this vanilla CSS ?

[@marissapowser1755]

This is the best CSS video, and hilarious lol

[@xsilverx1198]

This was very helpful thank you!

[@vmGrymm]

The Only CSS Layout Guide You'll Ever Need

[@khantsithu4383]

What's the extension for box model?

[@theturtledave]

It shows when he hovers. It's called Google Pesticide

[@metaculos6068]

i owe you my life King

[@Celticlight6]

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

[@kliMaLd]

What is the name of this admin theme at 10:17?

[@MrAviv555]

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😅❤

[@JS-vw7to]

Amazing explanation

[@shaileshchotoe]

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?

[@benja303]

- 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

[@FurqanHun]

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

[@ampermetre_]

Thank you! It was very useful

[@evil-resident]

what is the extension u used to see the layout of youtube?

[@adeebquraishi]

what's the name of the extension to display the boxes on websites?

[@hamzaomari7052]

The whole video I've been focusing on your hair man, it's so unique. It feels unnatural.

[@Dimitar-T-Radev]

I came for Pikachu. But learned a lot

[@aniksaha8108]

Thank you for this video!

[@ricoweeland2301]

THis is amazing, thank you!