- 32
- 1 851 699
Layout Land
United States
Registrace 22. 08. 2016
Learn what's now possible in graphic design on the web - layout, CSS Grid, and more. A series for web designers and developers, created by Jen Simmons.
What if CSS Grid Changes?
There are so many new tools coming out, does it make sense to chase them all? Is it too early to learn CSS Grid? What happens if it changes? Wouldn't it be safer to wait until things settle down?
Jen talks about the struggles to keep up and why it is, indeed, a safe time to invest effort into learning CSS Grid.
Jeremy Keith, presented the ideas about Materials vs Tools at An Event Apart 2018, in a talk titled “The Way Of The Web”. The slides listing materials and tools are his. You can see more of his talks at: noti.st/adactio, and find all his work at adactio.com.
Jen talks about the struggles to keep up and why it is, indeed, a safe time to invest effort into learning CSS Grid.
Jeremy Keith, presented the ideas about Materials vs Tools at An Event Apart 2018, in a talk titled “The Way Of The Web”. The slides listing materials and tools are his. You can see more of his talks at: noti.st/adactio, and find all his work at adactio.com.
zhlédnutí: 24 188
Video
9 Biggest Mistakes with CSS Grid
zhlédnutí 164KPřed 6 lety
It's easy to make lots of mistakes with a new technology, especially something that's as big of a change from the past as CSS Grid. Jen lists the 9 Biggest Mistakes she sees people making when using CSS Grid, with advice and tips for avoiding these pitfalls and old habits. Mistake 1: Thinking CSS Grid is Everything “Flexbox vs. CSS Grid - Which is Better?”: czcams.com/video/hs3piaN4b5I/video.ht...
CSS Grid Uncollapses Your Margins. What?
zhlédnutí 13KPřed 6 lety
Sometimes margins smash together. Sometimes they stay separate. This is called "margin collapsing". It can be confusing. Some people wish the web never had such a thing. Well, with CSS Grid, you can make margin collapsing go away. Jen will show you how. Links: The Demo: codepen.io/jensimmons/pen/pVxrMK The Tweet: jensimmons/status/996811135226695680 Firefox CSS Grid Inspector: devel...
Hot metal : Pasteup :: Floats : CSS Grid
zhlédnutí 18KPřed 6 lety
Jen takes a look at the evolution of the printing press and typesetting technology - from letterpress and the Linotype machine, to photo-based paste-up techniques - and how these advances radically changed graphic design. History has taught us that big changes to the underlying technologies can open up new communication possibilities. This is happening again, now, on the web. Today, with CSS Gr...
MinMax in CSS Grid - 3/3 Flexibility
zhlédnutí 44KPřed 6 lety
We can define tracks in CSS Grid using `minmax`. What does that mean and how can we best combine it with other ways of measuring space? Jen presents the beginnings of Intrinsic Web Design here, showing how this new technology provides multiple stages of flexibility and gets us even further away from ideas of 'pixel perfect'. Demos: • labs.jensimmons.com/2017/01-003C.html • labs.jensimmons.com/2...
FR Units in CSS Grid - 2/3 Flexibility
zhlédnutí 53KPřed 6 lety
What is an "fr" (aka fractional) unit anyway? Why are they a million times better than percents? How can we mix them with other sized tracks? Jen explains how to intuitively use FR units in CSS Grid. gridsetapp.com alistapart.com/article/content-out-layout
Min & Max Content Sizing in CSS Grid - 1/3 Flexibility
zhlédnutí 62KPřed 6 lety
CSS Grid changes the way flexibility works on the web. When there is more or less space available, Grid allows us to precisely design how content moves. Using simple percent-based widths is not the only option anymore. In the first of a three-part series, Jen explains how to use min-content and max-content to size Grid tracks. Demos: • Der Film - labs.jensimmons.com/2017/02-004.html • Jan Tschi...
Designing for A Viewport
zhlédnutí 34KPřed 6 lety
The web is a medium that has a viewport. What does it mean to truly be designing for the web - a medium that reveals the page slowly, from inside a viewport frame? Examples: labs.jensimmons.com/2017/03-008.html labs.jensimmons.com/2017/01-006.html labs.jensimmons.com/2017/01-008C.html labs.jensimmons.com/2017/01-010.html To see more clips, or order the whole series of Hollywood Camera Work's Ma...
Cropping images with Object Fit
zhlédnutí 38KPřed 6 lety
If we want to create a layout where we specify both the height and width of an image, creating a flexible layout, we can use `object-fit` to crop the image. Demos: • Simple photos: labs.jensimmons.com/2016/examples/object-fit-photos.html or on CodePen: codepen.io/jensimmons/pen/jqKNxg?editors=1100 • Article w/ header layout: labs.jensimmons.com/2016/examples/grace-hopper-page.html or on CodePen...
Introduction to Viewport Units
zhlédnutí 64KPřed 6 lety
How can you use new CSS units - viewport units - to size content that changes in response to the viewport size? Jen introduces you to how vw, vh, vmin, vmax can be used in creative ways. Demos: • labs.jensimmons.com/2017/01-010.html • labs.jensimmons.com/2016/examples/coversheet-3.html
Drop Caps on the Web Using Initial Letter
zhlédnutí 13KPřed 6 lety
Designers have struggled for years to do robust drop caps on the web. We've tried a series of techniques, but in the end, the enlarged letter usually ends up mis-aligned with the content surrounding it. What's the deal? Well, now we have a new CSS property, Initial Letter, that will make it easy to create a drop cap, an enlarged cap, an initial letter that lines up in every browser. When or why...
Overlap on the Web, Graphic Design Made Easy with CSS Grid
zhlédnutí 57KPřed 6 lety
CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web. For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explore what's now possible. Jen walks you through an exam...
Use Clip Path to Vary Your Designs on the Web
zhlédnutí 25KPřed 6 lety
Everything on the web is a rectangle, but it doesn't have to be. Use the Clip Path property to alter elements in your layouts to be polygons, circles, triangles, and more. My simple clip-path demo: labs.jensimmons.com/2016/examples/clip-path.html Wide Hive: www.widehive.com Clip path on MDN: developer.mozilla.org/en-US/docs/Web/CSS/clip-path Support for clip-path on Can I Use: caniuse.com/#feat...
Making Your CSS Fail Excellently - 7/7 Resilient CSS
zhlédnutí 13KPřed 6 lety
In the last of the Resilient CSS series, Jen explains when you can't use a newer CSS property. It all depends on whether or not that property will fail well. Thanks to Jeremy Keith for this idea of understanding if something “fails well” being key in deciding whether or not it's a good idea to use it. He has a great talk about this, Evaluating Technology: czcams.com/video/wAekLOUpMB4/video.html
The Magic of Feature Queries, Part 1 - 5/7 Resilient CSS
zhlédnutí 20KPřed 6 lety
The Magic of Feature Queries, Part 1 - 5/7 Resilient CSS
The Magic of Feature Queries, Part 2 - 6/7 Resilient CSS
zhlédnutí 13KPřed 6 lety
The Magic of Feature Queries, Part 2 - 6/7 Resilient CSS
Unlocking the Power of CSS Overrides - 4/7 Resilient CSS
zhlédnutí 21KPřed 6 lety
Unlocking the Power of CSS Overrides - 4/7 Resilient CSS
How Browsers Handle Errors in CSS - 3/7 Resilient CSS
zhlédnutí 20KPřed 6 lety
How Browsers Handle Errors in CSS - 3/7 Resilient CSS
The Secrets of ‘Can I Use’ - 2/7 Resilient CSS
zhlédnutí 30KPřed 6 lety
The Secrets of ‘Can I Use’ - 2/7 Resilient CSS
HTML Source Order and When There’s No CSS
zhlédnutí 16KPřed 6 lety
HTML Source Order and When There’s No CSS
Whitespace on The Web! - with CSS Grid
zhlédnutí 26KPřed 6 lety
Whitespace on The Web! - with CSS Grid
Using Flexbox + CSS Grid Together: Easy Gallery Layout
zhlédnutí 111KPřed 6 lety
Using Flexbox CSS Grid Together: Easy Gallery Layout
Innovative & Practical Graphic Design with CSS Grid
zhlédnutí 34KPřed 6 lety
Innovative & Practical Graphic Design with CSS Grid
Flexbox vs. CSS Grid - Which is Better?
zhlédnutí 301KPřed 6 lety
Flexbox vs. CSS Grid - Which is Better?
Responsive Mondrian - a demo of CSS Grid
zhlédnutí 66KPřed 6 lety
Responsive Mondrian - a demo of CSS Grid
Jen please make more youtube videos!
Asperger’s
“Layouts are super exciting” 😳😳😳😳😳😳😳. The whole time just stares right through the screen
after 6 year still usefull
Her thumbnail looks like she flexing a gang sign 😭
This is amazing. Thanks for your explanation!
Your way of talk is so beautiful
This is so amazing... thank you madam, Jesus bless you real.
I am beginning to use CSS. This video was helpful. I will probably be watching all your other videos for a while. Thank you for sharing your knowledge so succinctly.
wow, nice
No wonder she works for Apple now! this vid is a very solid reference, thank you very much!
I changed my whole code i had a bad thoughts about vh and vw . I was changing the font size each break with media queries. now I guess I don't need to. thanks to you
❤🩹❤🩹❤🩹👍👍👍
You explained everything in such an easy way that no one else can understand, please make more videos because the web-development community needs people like you to help please make more videos on web development thanks.
Thank you it was very useful
I love the introduction. Great video!
Just wanna say thank you for this treasure trove of videos. They are so helpful, and so clearly explained. Thank you for sharing your knowledge with us!
I found your CSS grid card layout so important to my learning that I would like to ask your permission to add a link on my website to the CodePen and CZcams lesson. Many thanks Dan
Oh of course! I’d love for you to link to this video.
Thanks so much. Your card layout is so awesome.
Very good explanation
Revisiting these excellent videos, Jen. Please update: The `auto-fit` shown at @4:21 doesn't have a comma, but it should, just like the code view @3:30 & @5:05 Thank you!
sooo coool! love these grid possibilities
What happened to Jen Simmons?? She dropped off the face of the Earth after creating this channel and her website. I have been so incredibly inspired but everything she left is frozen in time.
I got COVID. Which led to long covid. And yes, that causes us to go missing. 🥺
You ARE that someone Jen, you are leading the charge, - inspired by your brilliant design and thought processes, I'll be joining you there. Thank you so much ! <3
Thank you, Jen. Very good and clearly explained content.
Well done !
If I keep reducing the viewport width once column #4 hits the min, the gaps disappear next, and columns #2 and #3 re-appear! How could we give the space coming free from the gaps to column #1 instead? That would continue the fluid experience. Thanks for your amazing videos!
thanks for sharing greetings from peru
Your super intelligent, evolutionary approach to web design is so inspiring. I'm not a "just learn the basics" sort of person, and your channel is exactly what I needed to deep dive into css to MY standards. Thank you so much! More than that, your beautiful, badass layouts have had an expansive effect on my idea of what web d&d can be. <3
4 years later all frameworks advertise they support css grids... As a coder I'm a bit sad actually.
It will still be useful to see your video in 2023, thanks
6:46 "lichtbildervortrag" should scale to match "freier free free...", or "die neue typographie" should escape that grid so that there is no gap on the left. Great video but I guess we still cain't reproduce these designs without JS
is there any updated version of this video?? @LayoutLand
I miss your podcast!
I've been learning web development for a few months now, specifically html and css, and my biggest problem since the beginning has been figuring out the overall layout of the page. I've watched video after video on flexbox and grid, and although they've taught me some useful things, it wasn't enough to be able to just go ahead and do it myself. Kinda like learning to drive with or without an instructor.....you're fine with the instructor, but not without. Your videos have helped me manage that drive on my own without the instructor! Excellent tutorials, very well explained. Thank you for doing these, you have restored my faith in myself! Now I'm going to make myself a cuppa and watch some more :)
Thank you very much for making video css grid layout.
Awesome, 4:35
Out of curiousity, what does grid do differently than old school css: display:inline-block; margin: 1rem; min-width:300px? It appears to give the same result. Or does the grid layout maintain the same size of each item regardless of the inner content?
wow. this right here is gold. thank you
where have you been all my css life? THANK YOU!
Excellent tutorial! Thanks a lot!
I read your book Jen. You are such a goddess on this. ❤❤❤
Hey. What book?
Wow this is an amazing explanation 🙏🙏... am I the only thinking Jen didn't explain about inage going out of grid 😛 or maybe covered in future videos 🤔.... Anyways I'm loving this playlist and Jen thankk youu soo soo much for creating one such 🙏... 🎩s off
You can only explain at this level and make people understand it easier if you are directly involved in working groups 🤷♂️ Jen is the bestest of bests 🙌🙏
Appreciate the explanation, on my way towards getting a career in IT through the Odin Project! Wish me luck
I love the way you make me think about the possibilities to design for the web.
thank you so much
I'm so glad I found this channel :D
so dope. Thanks Jen!