HTML All The Things is a podcast for developers navigating the modern web industry.
Hosted by web development agency owners Matt Lawrence and Mike Karan, the show explores web development, AI-driven industry shifts, and the realities of building a sustainable career in tech.
Matt and Mike discuss foundational technologies like HTML, CSS, and JavaScript along with modern tools and frameworks such as Svelte, Vue, WordPress, React, and Tailwind. But beyond the code, the show also dives into freelancing, running a web agency, dealing with clients, and how developers can stay competitive as the industry evolves.
If you're a developer who wants to sharpen your technical skills, understand where the industry is heading, and build long-term leverage in your career or business, this podcast is for you.
Episodes
Wednesday Sep 26, 2018
Wednesday Sep 26, 2018
We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.
Segment 1 - Layout Models
- StackChief reference article
- Box Model
- Elements comprise of: content, padding, border, margin
- Dimensions like height and width
- Floats and clearfix
- CSS Box Model - W3Schools article
- Flexbox
- Evolution of the box model
- Comprises of a container element called the flex container, which "control" their child elements called flex items
- Flexbox is fantastic for responsive layouts
- 1 dimensional layouts
- CSS Grid
- New CSS layout method that is supported in the latest version of major browsers (IE doesn't have support)
- 2 dimensional layouts
- Can customize every property of the grid
- # of rows and columns
- size of row in various metrics (px, %, vh, vw, auto)
- spacing between rows and columns
- Very clean code - no need for row and column containers
Segment 2 - Box vs Flexbox vs Grid
- Responsivity
- Box, flexbox, and grid can all be used to make responsive layouts
- Many of our production websites are still in box layout, they still work without issue on modern browsers and devices
- Layouts
- Basic sites can use any of the layout models
- Site components (ie navbar) can be made easily with flexbox due to their one dimensional layout
- Full site structures are easier to make with CSS grid due to two dimensional column and row functionality
- Easy of Use
- Matt believes the box model is easiest to learn - especially when learning how web pages flow
- Box model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging
- Matt believes the box model is easiest to learn - especially when learning how web pages flow
- Links
- Box Model - https://caniuse.com/#feat=inline-block
- Flexbox - https://caniuse.com/#search=flex
Web News - 'Unobtrusive Ads'
- Ad strategies - which are you ok with?
- Sponsored posts
- Banner ads (Google Ads, etc.)
- Full page timed ads
- Sidebar ads
- Chumbox (From around the web, recommended for you)
- What are some ad strategies that annoy you?
- Do you think ads on a web page or app are a fair way to monetize? (freemium ad supported)
- Do you care what companies' ads are served to you? (ie you don't like Coke but like Pepsi)
Support Us
- TP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)
- Become a Patreon Supporter
You can find us on...
No comments yet. Be the first to say something!