Тёмный

The fundamentals of CSS layout | Workshop 

Chrome for Developers
Подписаться 761 тыс.
Просмотров 72 тыс.
50% 1

Learn about the key CSS layout methods of flexbox and grid. Discover how these layout methods enable responsive, content-aware designs, and how to choose the best layout method for the component you need to build.
Resources:
CSS Layout Workshop → goo.gle/3BmBoXR
Speaker: Rachel Andrew
Watch more:
Watch all Chrome Developer Summit videos → goo.gle/cds21-...
Subscribe to Google Chrome Developers → goo.gle/Chrome...
#ChromeDevSummit

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

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 48   
@batchrocketproject4720
@batchrocketproject4720 2 года назад
Paused at 20:00 to get a coffee - this one is worth full attention, a gold-mine of clear, logically-progressed information that I know will save hours of frustration. Thank you very much for sharing.
@KwadwoFirempongBoakye
@KwadwoFirempongBoakye 2 года назад
Thank you Rachel. Been studying CSS for the past month and this has answered a lot of the questions around the mechanics of both grid and flex layouts. Brilliant resource and info shared.
@mikeniimon
@mikeniimon 2 года назад
Wow, Rachel this was immensely helpful. I realize now how little I knew and all the irritating "bugs" I now understand aren't bugs 😅. This breakdown has saved me an a lot of time, and given me a lot more confidence.
@nikolaypetrov9789
@nikolaypetrov9789 Год назад
Thanks. I already knew most of it, but it's still very interesting to listen an expert passionately talking about tech.
@mariamm.s532
@mariamm.s532 Год назад
this workshop is a must if you’re new to web development
@palanivisu1344
@palanivisu1344 2 года назад
one of the best tutorial I have come across. I was a trail and error css user but this gave good fundamental understanding. very useful thanks VM
@bennychewDev
@bennychewDev 2 года назад
Thank you for sharing this talk! I have learned a bunch of new things. Things I have been holding off learning (grid-column: 1 / 3 etc), but have now learned thanks to the clear explanation.
@bangwail1510
@bangwail1510 Год назад
Thank you Rachel , I learned a lot about css with you !
@mdhridoy-dw8sc
@mdhridoy-dw8sc 8 месяцев назад
so many clear understandable and smooth , thanks google comunity
@sacrajah
@sacrajah 2 года назад
I am impressed with your basic presentation of grid n flex in layout.
@KonRud5
@KonRud5 2 года назад
============================= Grid Timeline (highlights) ============================= 7:23 - `auto` size 8:37 - `min-content` / `max-content ` 10:53 - `fit-content()` 14:47 - `minmax(0, 1fr)` - forces a track to be the fraction of the available space 47:33 - align or justify? [`align-*` for block axis. `justify-*` for inline axis] ============================= Flexbox Timeline (highlights) ============================= 1:06:18 - alignment in flexbox - `justify-*` [on the main axis] / `align-*` [on the cross axis] 1:16:09 - `flex` property in depth 1:18:42 - equal items in flexbox - `flex: 1 1 0`
@dondogoberto
@dondogoberto 2 года назад
Thanks for the fundamentals perspective! i love to learn from there.
@OlegYuzvik
@OlegYuzvik 2 года назад
Thanks Rachel! You explain very well!
@MythicEcho
@MythicEcho 2 года назад
loved the workshop. But the cat have more patience than me.
@Oli312
@Oli312 2 года назад
Awesome content, thank you very much for this.
@tamalchowdhury
@tamalchowdhury 2 года назад
Good one. I participated this workshop.
@walterhafner2910
@walterhafner2910 2 года назад
wish I knew this minmax(0,1fr) thing before I started adding Content to my grid... every container blew up and I ended up adding max height width to every single one of them
@eno1796
@eno1796 Год назад
cant wait to see an event
@Skatox
@Skatox 2 года назад
Nice workshop!
@havefun5519
@havefun5519 2 года назад
I like grid system gap property, however, seems flexbox is still more popular than grid at least for simple basic layout, flexbox is still easier.
@AlexanderBarakhov
@AlexanderBarakhov 2 года назад
Thanks a lot Rachel!
@user-jt7wb3zc1m
@user-jt7wb3zc1m 2 года назад
Thank you, Good Corp!
@user80204
@user80204 2 года назад
really thank you very much
@mutazkanaan6796
@mutazkanaan6796 2 года назад
small fonts i can not read the code
@Taylor-hu2no
@Taylor-hu2no 2 года назад
Thank you!
@adnuzzolillo
@adnuzzolillo 2 года назад
Very helpfull. Thanks!
@rajrupani6124
@rajrupani6124 2 года назад
Loved it 🔥🔥
@adil8132
@adil8132 2 года назад
Amazing ! thanks google ✌
@josephwong2832
@josephwong2832 2 года назад
awesome !! thanks Rach
@taz2392
@taz2392 2 года назад
We really need sub grid, firefox has it why don't the rest?
@kalidsherefuddin
@kalidsherefuddin 2 года назад
Thanks
@maitrikmakwana5873
@maitrikmakwana5873 2 года назад
It's better to learn to code then to write code (webflow, i mean)
@juanpumpkinpie6550
@juanpumpkinpie6550 2 года назад
@hansschenker
@hansschenker 2 года назад
css for cats?
@user-ms8ei9le7x
@user-ms8ei9le7x 2 года назад
Thank the ch®️me
@user-ms8ei9le7x
@user-ms8ei9le7x 2 года назад
Rachel the best teacher , Thank
@ducksu_6243
@ducksu_6243 2 года назад
KITTY IN THE BACK
@genesistv5912
@genesistv5912 2 года назад
nobody told her Rachel to be placed above or below and minimized since we are interested in seeing the code and not her ..
@karlroth7082
@karlroth7082 2 года назад
Hem. Hem hem.. helllooooo!
@webdeveloperninja9220
@webdeveloperninja9220 2 года назад
cat!
@cheng6523
@cheng6523 2 года назад
🤣 "Centring: one of the hardest problems in web development."
@lacasadeacero
@lacasadeacero 2 года назад
so, who is gonna develop internet on 10 years later?
@pratibhalovesu
@pratibhalovesu 2 года назад
This video is not mobile friendly... 😂😂😂
@LLMA2
@LLMA2 2 года назад
good
@memaimu
@memaimu 2 года назад
I may have disliked this video, but no one will ever know for sure... :)
@burya_
@burya_ 2 года назад
so that was you?! this video has only 1 dislike so far. "Return RU-vid Dislike" chrome plugin is still working ;)
@memaimu
@memaimu 2 года назад
@@burya_ Didn't realize that was a thing. Pretty cool. I dislike censorship, so I'm definitely getting this.
@kalidsherefuddin
@kalidsherefuddin 2 года назад
Thanks
Далее
Learn CSS Grid the easy way
37:04
Просмотров 914 тыс.
CSS Masonry Layouts | Nicole Sullivan | CSS Day 2024
41:59
КОГДА НАКРОШИЛ НА ПОЛ #shorts
00:19
CSS Layout: Flexbox & Grid Basics
55:52
Просмотров 85 тыс.
The secret to mastering CSS layouts
17:11
Просмотров 284 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 78 тыс.
Building a web application in Angular | Workshop
1:19:50
How to Properly Layout A Website (For Beginners)
14:50
Просмотров 612 тыс.
Flexbox or grid - How to decide?
18:51
Просмотров 730 тыс.
Josh Comeau - Secret Mechanisms of CSS
44:53
Просмотров 15 тыс.