Flexbox is one of the biggest changes to how we build web page layouts. It's sturdy and native. It has broad modern browser support. It's the perfect tool for replacing float-based layouts that are easier to code and maintain. In this course you'll experience a concise way to learn how to use Flexbox on your next project.
I am the creator of CraftQuest, a web developer, and former software team manager. I spend most of my time improving CraftQuest with code and courses. When I'm not in front of the computer, I spend my time with my family, and running on the roads and trails of Austin, TX.
Up and Running with Flexbox is made up of the following videos:
|1||Introduction||A short introduction to the course to set the agenda before we get started with Flexbox fun!||02:30|
|2||What We're Building||For this course we are going to build a product listing page for the fictional used shoe website called “On the Run Again.”||02:30|
|3||What is Flexbox?||Now that we have our project ready to go, we need to get a bit more familiar with Flexbox. Let’s pause for a moment and dig into the fundamentals of Flexbox.||04:00|
|4||The Flex Container||We’re ready to go back to the “On the Run Again” page and start the process of adapting it to use Flexbox instead of floats.||17:06|
|5||The Flex Items||With the Flex Container set, it's time to focus on the Flex Items--the elements inside the Flex Container.||08:11|
|6||Nested Flex Containers||Did you know you can nest Flex Containers? it's a great way to gain more control over your layout.||14:14|
|7||Growing Items using flex-grow||flex-grow allows us to give Flex Items instructions on how they should grow if there's available space in the Flex Container.||03:42|
|8||Overriding Source Order||One nice feature of Flexbox is that you can reorder content regardless of source order. Two thumbs up to that!||09:02|
|9||Flexbox Shorthand||We've written longhand properties up to this point. It's good we did (because it's better for learning) but we should learn the shorthand, too, for cleaner code.||04:33|
|10||Wrapping Up||We did it! Now let's review what we learned and celebrate our achievement of turning the float layout to Flexbox.||01:32|
Andrew demonstrates how he uses an extended template to set global variables right in Twig. No PHP required!
Ryan and Andrew answer the viewer question on hosting.
Ryan and Andrew answer questions about where to start with front-end tooling, what makes a good Craft CMS hosting provider, and how to create a Twig global variable in Twig.
Ryan walks through some of the most important features of Craft 3.7 (now in beta).
Ryan and Andrew talk about the journey of learning and offer some tips on continuing to learn new things.
Ryan streams live while rebuilding a section of the CraftQuest site with the new Vizy plugin from Verbb.
Andrew introduces Vite, his Craft Vite plugin, and demos and how Vite can be used as a build tool for Craft CMS projects.
We answer questions about macro performance considerations. syncing databases, and introduce you to Vite.