Mastering CSS Layout Welcome

Introduction to Mastering CSS Layout using Design Patterns

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:05] Hello, welcome to this course on Mastering CSS Layouts using design patterns. I am Travis Wartner.

  • [00:06 - 00:14] I am the creator of the Bedrock Layout Primitives Library. And I spent years honing my skills, grappling with challenges of web layout design.

  • [00:15 - 00:26] Today, I am thrilled to guide you through a learning experience that goes beyond just syntax and properties and teaches practical solutions to everyday problems. Have you ever felt confined by the rid structure of bootstraps 12 column grid system?

  • [00:27 - 00:34] Or found yourself throwing metaphorical mud at the wall hoping that your layout will stick? You're not alone.

  • [00:35 - 00:41] For years, I shared the same struggle. Uncertain which combinations of properties was essential to achieve the perfect layout.

  • [00:42 - 00:53] That is until I discovered the power of design patterns. In this course, we will break free from the constraints of CSS frameworks and delve into design patterns.

  • [00:54 - 01:00] No longer will you feel bound by predefined grids. And instead, you'll learn to think in patterns like stacks, splits or inline clusters.

  • [01:01 - 01:14] My goal is to equip you with the confidence to tackle any layout challenge armed with real practical solutions. Design patterns are the key to unlocking intentional web layouts.

  • [01:15 - 01:28] They help you focus on problems and provide solutions tailored to those challenges. Throughout the course, we'll explore these patterns initially using CSS grid syntax and then later transitioning into CSS flux box.

  • [01:29 - 01:38] You'll recognize layout problems and instinctively know which design patterns are best suited to solve them. Armed with this knowledge, you'll be adept at implementing these patterns.

  • [01:39 - 01:49] Equipped with tools to conquer everyday challenges encountered in web layouts. This course is divided into four sections, each building on the previous one.

  • [01:50 - 02:03] First, you'll grasp the essence of design patterns and familiarize yourself with the common problems and solutions to these problems. Then we'll dive into practical implementations of these patterns using both CSS grid and CSS flex box.

  • [02:04 - 02:20] Finally, in the fourth section, we'll explore which implementations tend to work best, as well as some other patterns that we use in web layouts that complement the design pattern way of thinking. This will provide you with a holistic understanding of effective web layout strategies.

  • [02:21 - 02:35] Now, should questions arise along your learning journey, feel free to comment in line or join our Discord community. I'm genuinely excited to have you here and together, will unravel the intricacies of mastering CSS layouts using design patterns.

  • [02:36 - 02:36] Let the journey begin.