Тёмный

The Only CSS Layout Guide You'll Ever Need 

EdRoh
Подписаться 80 тыс.
Просмотров 76 тыс.
50% 1

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.

Наука

Опубликовано:

 

5 сен 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 91   
@edwardnapatalio853
@edwardnapatalio853 8 месяцев назад
Epic thumbnail 😂
@eazyv9172
@eazyv9172 Месяц назад
thumbnail got me rollin 😂
@MAX-yd2bs
@MAX-yd2bs 26 дней назад
Yea he totally got me
@dragonball41876
@dragonball41876 3 дня назад
😂
@faithwithmandy
@faithwithmandy 8 дней назад
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.
@Brezanova
@Brezanova 3 месяца назад
Finally a very clear and concise explanation for someone staring at a blank page trying to figure this out lol Thank you!
@adymorris7347
@adymorris7347 Месяц назад
Finally....a CSS Layout Guide I understand! Thank you, Sir.
@rajshailey92
@rajshailey92 8 месяцев назад
This was an absolute gem of a video. Thank you for sharing such fundamental concepts.💖
@user-or9ec6tg1k
@user-or9ec6tg1k 3 месяца назад
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.
@Squatrecords
@Squatrecords 2 месяца назад
Everything you done in this video is absolutely amazing! thanks for the work you placed in explaining and demonstrating so well!
@kbonline5473
@kbonline5473 3 месяца назад
This is the best css tutorial to understand the fundamentals of layout
@DrWalterJitsu
@DrWalterJitsu 8 месяцев назад
great video this is probably my favorite software engineering channel
@dc33333
@dc33333 7 месяцев назад
Good video Ed!!! Great speaker and video production.
@metalrunsit
@metalrunsit 11 дней назад
You're a really great speaker. Most sensible and direct too, you're amazing.
@deldridg
@deldridg Месяц назад
Lovely work and thanks mate. Very helpful and has fast-tracked a stage of my project very effectively. Cheers from Sydney - Dave
@dc33333
@dc33333 8 месяцев назад
this is useful. Thanks Ed!!!
@ondrej1031
@ondrej1031 3 месяца назад
Crazy value! Thank you for this!
@jikaikas
@jikaikas 3 месяца назад
ur the only youtuber who Im glad I learned css from, everyone teaches it so bad so much fluff you get right into it
@hardikganatra2453
@hardikganatra2453 8 месяцев назад
Great video man !!!
@eshw23
@eshw23 8 месяцев назад
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
@darkastically
@darkastically Месяц назад
Thank you!! I'm a backend dev learning CSS and javascript for "fun". You saved my a**.
@harithoppil7
@harithoppil7 Месяц назад
Saved a ton of time! n thanks for the Smart Philosophy of using minimum to do maximum.. thus not getting overwhelmed
@FrancoisLampron
@FrancoisLampron Месяц назад
Thank you so much for concise and funny explanations !
@lilyshevchenko7048
@lilyshevchenko7048 8 дней назад
Did not expect to get awesome laughs, as well as content. You're hilarious. Thanks :D
@FrancoisLampron
@FrancoisLampron Месяц назад
Thank you so much for such concise and funny explanations!
@jagannathps
@jagannathps Месяц назад
this is golden youtube content
@cryptofelix5242
@cryptofelix5242 9 дней назад
This video got me a lot of things ordered that I knew already!
@user-js2rt6qo4p
@user-js2rt6qo4p 5 месяцев назад
You have a way of explaining things that is clear than all other videos for css i have watched, THANK YOU for this video, hope to see more :)
@cmarkbmb
@cmarkbmb 4 месяца назад
nice editting, well said explanation 👏
@xsilverx1198
@xsilverx1198 Месяц назад
This was very helpful thank you!
@mhhutton
@mhhutton 2 месяца назад
This is great. Thank you.
@aniksaha8108
@aniksaha8108 Месяц назад
Thank you for this video!
@antonio_carvalho
@antonio_carvalho 2 месяца назад
Excellent video! Here's a tip: use a muffler on your microphone to reduce pops from words like "Pixel Perfect".
@jezza9774
@jezza9774 7 месяцев назад
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 😅
@Chaeboll
@Chaeboll 22 дня назад
the extension name is "google pesticide"
@user-mi8ms5zc7d
@user-mi8ms5zc7d 28 дней назад
Great video! thank you!
@scorcism.
@scorcism. 7 месяцев назад
great video
@GAlvarado
@GAlvarado 3 месяца назад
Thank you!
@metaculos6068
@metaculos6068 17 дней назад
i owe you my life King
@austin4855
@austin4855 8 дней назад
great lesson, ty! and thumbnail was so good i HAD to click.
@yuguanghui4011
@yuguanghui4011 4 месяца назад
awesome video
@fares.abuali
@fares.abuali 27 дней назад
Thanks!
@go_better
@go_better 3 месяца назад
Thanks a lot
@Andersonn.C
@Andersonn.C 2 месяца назад
what a gold video
@davidshanahan6081
@davidshanahan6081 2 дня назад
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.
@MrAviv555
@MrAviv555 14 дней назад
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😅❤
@infini667
@infini667 17 дней назад
Thank you for the video! It's very good. I just wanted to suggest that you use a pop filter :)
@JawsoneJason
@JawsoneJason 2 месяца назад
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?
@gumbilicious1
@gumbilicious1 18 часов назад
I hate messing with css, that is why I am here
@blubblubber9460
@blubblubber9460 3 месяца назад
Great!
@FurqanHun
@FurqanHun 2 дня назад
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
@branypoo
@branypoo 2 месяца назад
Holy crap XANGA
@Lost1nTranslation
@Lost1nTranslation 8 месяцев назад
Niiiiice
@munzutai
@munzutai 3 месяца назад
These are great explanations but please consider getting a pop filter. My subwoofer is popping like crazy.
@vmGrymm
@vmGrymm 2 месяца назад
The Only CSS Layout Guide You'll Ever Need
@Tafa-ul
@Tafa-ul 8 дней назад
can anyone tell me what extension he was using when he was showing youtube box layouts
@mitetoOoOoO
@mitetoOoOoO 3 месяца назад
I came for Pikachu. But learned a lot
@Hydesy
@Hydesy 28 дней назад
What was the chrome extension you showed in your video that reveals the boxes?
@khantsithu4383
@khantsithu4383 8 месяцев назад
What's the extension for box model?
@theturtledave
@theturtledave 5 месяцев назад
It shows when he hovers. It's called Google Pesticide
@anjaneekumarsingh1017
@anjaneekumarsingh1017 20 дней назад
what is that chrome extension which shows boxes around elements ?
@clearthinking5441
@clearthinking5441 Месяц назад
is it normal to use css grid for the layout and then flexbox for the individual items within the grid?
@willbarrett6204
@willbarrett6204 3 месяца назад
Is a container just like or ? I can't seem to find any documentation on it.
@isaacjon
@isaacjon 7 месяцев назад
Liked Subscribed Commented🔥🔥
@evil-resident
@evil-resident 13 дней назад
what is the extension u used to see the layout of youtube?
@ketanmehtaa
@ketanmehtaa 7 месяцев назад
❤❤❤❤❤❤
@joelpww
@joelpww Месяц назад
I was promised a pikachu. Thoroughly disappointed
@dividedtime8529
@dividedtime8529 27 дней назад
what is that chrome extension at the beginning?
@user-hg4sv8ms6n
@user-hg4sv8ms6n 26 дней назад
Wowww what do you use for your charts?
@mon0theist_tv
@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
@anujmourya18_
@anujmourya18_ 29 дней назад
2:23 which extension
@mhd_Code
@mhd_Code 27 дней назад
@samriddhi6129
@samriddhi6129 10 дней назад
what browser extension is that?
@nkthehustler
@nkthehustler 18 часов назад
Love from india
@lostmotion18
@lostmotion18 8 дней назад
"Only use float if you enjoy suffering" lmao
@NadidLinchestein
@NadidLinchestein 2 месяца назад
That was a interesting forum, with $100 Billion dollars Alat can definitely make Saudi Arabia a hub for Advanced Technology and Innovation
@lokeshr9794
@lokeshr9794 Месяц назад
Where is my Pikachu???
@Omar-dp8ob
@Omar-dp8ob Месяц назад
Is this vanilla CSS ?
@azozsalem3602
@azozsalem3602 Месяц назад
the thumbnail is so me.
@benja303
@benja303 15 дней назад
- 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
@Dragonmastur24
@Dragonmastur24 3 месяца назад
R.I.P. Lofi girl
@T25de
@T25de 5 месяцев назад
I’m old enough to have grown up using Netscape 😂
@Shrimphat
@Shrimphat 2 месяца назад
Steven he?
@motion69
@motion69 2 дня назад
Am I in 2000?
@trans_Steph
@trans_Steph 11 дней назад
Is it just me or is he using windows 95 in 2024? Aaaaaand you wanna talk about CSS?
@arkansavalder
@arkansavalder 2 месяца назад
nobody writes css these days
@santhanamss
@santhanamss 21 день назад
What do they do
@thecoolnewsguy
@thecoolnewsguy 21 день назад
If you're talking about TailwindCSS and the friends, they're still CSS just abstracted
@pockyislife
@pockyislife 5 месяцев назад
🖤🤍🖤🤍
Далее
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 387 тыс.
How to take control of Flexbox
16:01
Просмотров 70 тыс.
Сенкью😂
00:17
Просмотров 295 тыс.
Godzilla Attacks Brawl Stars!!!
00:39
Просмотров 6 млн
7 ways to deal with CSS
6:23
Просмотров 1 млн
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,3 млн
Use these instead of vh
6:06
Просмотров 425 тыс.
Complete Course On Layout Design (MASTER LAYOUT)
21:04
Просмотров 625 тыс.
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 465 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 868 тыс.
Learn CSS Grid the easy way
37:04
Просмотров 855 тыс.
The secret to mastering CSS layouts
17:11
Просмотров 259 тыс.