Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

CSS Layout

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more!</p> <h2><a id="Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p>If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. 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 <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2><a id="CSS_In_Depth_and_In_Motion__Sponsor_13" name= "CSS_In_Depth_and_In_Motion__Sponsor_13"></a>CSS In Depth and In Motion - Sponsor</h2> <p><a href="https://deals.manning.com/webdev">CSS in Depth in Motion from Manning Publications</a> 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 <a href= "https://deals.manning.com/webdev">deals.manning.com/webdev</a> and using the coupon code syntax40 at checkout.</p> <h2><a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p>4:15</p> <ul> <li>When to use position fixed/static/absolute/relative/sticky</li> </ul> <p>15:18</p> <ul> <li>When to use height, width, max-height, max-width, top, bottom, left, right, etc.</li> </ul> <p>21:28</p> <ul> <li>What about relationships between containers and their children?</li> </ul> <p>27:37</p> <ul> <li>What about positioning behaviors of elements like <code><img></code>, <code><iframe></code>, <code><video></code>, etc.?</li> </ul> <p>30:09</p> <ul> <li>Floating and clearing</li> </ul> <p>35:55</p> <ul> <li>Flexbox, Grid and responsive design</li> </ul> <p>36:58</p> <ul> <li>Mobile-first or desktop-first?</li> </ul> <p>41:20</p> <ul> <li>Viewport units - vw, vh, vmin, vmax, etc</li> </ul> <h2><a id="Links_51" name="Links_51"></a>Links</h2> <ul> <li><a href="http://keycode.info/">Keycode.info</a></li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__54" name= "_SIIIIICK__PIIIICKS__54"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://www.wbur.org/lastseen">Last Seen Podcast</a></li> <li>Wes: <a href="https://wesbos.com/drone-javascript/">Flying a DJI Tello Drone with React and Node.js</a></li> </ul> <h2><a id="Shameless_Plugs_59" name= "Shameless_Plugs_59"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro">Scott’s Design Systems Course</a></li> <li><a href="https://wesbos.com/courses">Wes’ Courses</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_64" name= "Tweet_us_your_tasty_treats_64"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

CSS Layout

Poslechněte si podcast