CSS Layout

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 26 December 2018

⏱️ 54 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. CSS In Depth and In Motion - Sponsor CSS in Depth in Motion from Manning Publications is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout. Show Notes 4:15 When to use position fixed/static/absolute/relative/sticky 15:18 When to use height, width, max-height, max-width, top, bottom, left, right, etc. 21:28 What about relationships between containers and their children? 27:37 What about positioning behaviors of elements like , , , etc.? 30:09 Floating and clearing 35:55 Flexbox, Grid and responsive design 36:58 Mobile-first or desktop-first? 41:20 Viewport units - vw, vh, vmin, vmax, etc Links Keycode.info ××× SIIIIICK ××× PIIIICKS ××× Scott: Last Seen Podcast Wes: Flying a DJI Tello Drone with React and Node.js Shameless Plugs Scott’s Design Systems Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	You're listening to Syntax, the podcast with the tastiest web development treats out there.
0:06.0	Strap yourself in and get ready.
0:08.0	Here is Scott Telinsky and West Boss.
0:10.4	Hey everybody, welcome to Syntax.
0:12.0	Today we're going to be talking all about
0:13.4	CSS layout we got this awesome question come through our potluck button and if you
0:18.2	don't know our pollluck button is where you submit questions to the show and generally
0:21.5	we answer them on a potluck however this question came by
0:24.9	John Lynch who's from west of Ireland which is kind of fun and he said dear
0:30.6	west and Scott you would make me and I'm sure many other novice front-end
0:34.2	developers very happy if you could do an episode of Syntax FM and maybe a
0:38.2	tutorial on the topic of CSS positioning and sizing and then he goes into break down this incredibly in-depth
1:04.5	CSS layout so basically we're just taking this layout that he's given us and we're going to go through it and and talk through some of how CSS works because it's often an overlooked thing I even do this myself where I don't have a CSS course out and I would love to people to ask me all the time, like, when is the CSS course coming out? Because it's such a, CSS is hard, don't you think, Scott?
1:07.6	Yeah, the biggest indicator that CSS is just how many people have problems with it or hate it or whatever or you know that that classic
1:16.5	CSS is awesome mug where the text is going out of the box. I mean I think that mug right there is
1:21.8	an indication of just how hard CSS can be sometimes.
1:26.6	So I've got on my laptop. I met somebody at a conference. I'm totally forgetting who this is.
1:31.1	Sorry if you're listening, but he printed new CSS
1:34.3	is awesome ones where the box just properly fits around it.
1:37.6	He's like, I fixed it.
1:38.9	And I like that because...
1:40.8	Actually, yeah, I'm going to get one of those yeah it's awesome because like if if you do know how to use CSS you're not going to run into those issues and and that joke and that mug that everyone's talking about is a bit of a thing of the past I think because like obviously these aren't issues anymore
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.