The Layout Maestro by Ahmad Shadeed (original) (raw)

Build any web layout,

with confidence.

A written course on how to think about CSS layouts, so you can build them from scratch or fix the ones AI gets wrong.

Why do CSS layouts keep breaking?

You start writing CSS for a layout, things look right,
and it feels like you're making progress.

Then the content changes. An element gets removed. The design is viewed on a different screen.
Suddenly, things start falling apart.

Grid works

Fixed bug #1

Fixed bug #2

Flexbox works

Fixed bug #1

I used to do this all the time before I learned how to think before writing a single line of CSS. I know that feeling. And along the way, we often make mistakes like these:

These mistakes are subtle. They look fine at first, then collapse as soon as requirements change.

The problem is that most of us learned CSS layout modules inisolation, without understanding the thinking behind when and why to use them.

To help you connect the dots, I've built a new CSS course and I called it:

Foundations

Learn the mental model for how CSS layout works, the key concepts that cover every layout decision: types, constraints, slots, and how to think beyond breakpoints.

Core

Sharpen your understanding of modern CSS layout tools and learn how Flexbox, Grid, container queries, and selectors like :has() work and how to use each one intentionally instead of guessing.

Building

Apply what you learned by building real layouts from start to finish. See how layout decisions evolve, how trade-offs are made, and how a layout is adjusted as complexity increases.

Resilient Layouts

This module teaches you how to evaluate your layout decisions, test their limits, and strengthen them before they cause problems. You will learn to stress-test layouts against changing content, missing elements, and edge cases.

Most courses teach you what CSS properties do. This one teaches you when and why to use them. You'll develop the instinct to choose the right layout approach before writing any CSS.

Since 2020, Ahmad Shadeed's interactive CSS guides have become a go-to resource for web developers worldwide. This course is packed with years of experience and knowledge in building and teaching CSS layouts.

Every lesson features custom-built interactive demos that let you explore how CSS layout behaves. Toggle properties, resize containers, and see the results visually.

No abstract (boring) examples. You'll work through layout patterns and learn why certain approaches break down, so you can make informed decisions on real projects.

When you understand how layout works, debugging stops being guesswork. You'll identify root causes instead of trying random properties until "it works".

The course is written in a way that helps you to learn however you want. There is no fixed way of learning.

If you're going to learn layout in CSS, which I think you should as it's the most empowering part about CSS, then you need to learn how to think about a layout before you code it. That's what Ahmad teaches you here in each example. You look at, you identify unique and challenging parts of it, then pick layout methods to pull it all off while accommodating those unique aspects.

Chris Coyier

Chris Coyier

Codepen, Formerly CSS-Tricks

Over 70+ written lessons

Filled with written lessons that are explained visually with highly interactive examples.

7+ real-world layout projects

Not abstract concepts in isolation. You'll see how layout techniques come together in complete, real-world page layouts.

Free trial for Polypane browser

When you purchase the course, you can try Polypane browser with a free trial of 2 months.

Certificate of completion

When you finish the course, you can ask for a Certificate of Completion to share with friends on social media, whatever makes you happy.

Lifetime access & updates

The Layout Maestro won't stop there, it will always be updated for new CSS stuff and recommendations.

What's coming next

I'm actively working on new lessons and sections for the course. Here's what's coming soon.

The building module contains 7 projects, and more will be added over time, including updates for the current projects, too.

A deep-dive into anchor positioning.

The Layout Maestro is thorough in a way I haven't seen before. Ahmad builds your understanding of each layout method, then puts it into practice by showing how to approach layouts, including how they break and walking through the fix.

The visuals and interactive examples make the concepts stick. You could know very little about CSS layout before taking this course and walk away well above the average front-end developer.Valuable at any experience level.

Avatar of Jennifer Saenz

Jennifer Saenz

Front-End Developer

The Layout Maestro is unique among the current courses offered. First off, this is the only course that I am aware of that addresses CSS layout. Second, Ahmad doesn't just dive into syntax but helps you to develop the mindset of a front-end developer.

This equips you to make layout decisions on your own projects. Everyone who takes this course will benefit from Ahmad's clever solutions that combine several modern CSS techniques for more flexible and resilient products. Even an experienced CSS developer has plenty to learn and take away from this course.

Avatar of Jeff Bridgforth

Jeff Bridgforth

Front-End Developer

Layout Maestro is the kind of course that changes the way you think layout.

It trains your eye, challenges old habits and replaces them with a modern CSS toolkit: anchor positioning, container queries, subgrid and more.

Avatar of Johannes Mutter

Johannes Mutter

Design Engineer

I highly recommend this if you're like me, a backend developer looking to understands CSS better. Together with Josh W. Comeau course, it's really what moved the needle for me.

Avatar of Yevhenii Kurtov

Yevhenii Kurtov

Backend Developer

I've been developing websites since 1995 and a course like yours helps to keep me aware to focus on the modern ways of building. All too often I lean on crutches based on learned habits. Layout Maestro and all your css content helps me take the leap into the present.

Thanks for your continued investment in our craft.

Avatar of Hans Verschooten

Hans Verschooten

Web Developer and Designer

I have really enjoyed The Layout Maestro. Even though I know both Flexbox and Grid, I wanted a one stop shop reference for both.

Even though I am not a beginner there were many gotcha moments for me concerning things like flex basis, and I thought including actual site builds with different approaches really helped illustrate and drive home the techniques covered.

Congratulations on creating such a brilliant course, I am super happy to have purchased it and I refer to it all the time.

Enjoying working my way through the course, there's very detailed explanations about each topic. It's nice even covering things you already know, as a lot of times, you know what something does from experience but it's a really great way to understand why things work the way they do.

Ahmad Shadeed's The Layout Maestro provides a clear and effective guide to building modern CSS layouts defensively yet creatively. Almost anyone can google/stackoverflow/ai code a site's CSS but The Layout Maestro is for those who want to understand what and why they are doing, from browser defaults basics to debugging complex CSS APIs. Thank you Ahmad!

Join hundreds of designers and developers who build CSS layouts they actually understand.

Price in USD, before tax if applicable.

I'm a designer who codes. I've been working at the intersection of design and front-end development for over 12 years. I started as a graphic designer, fell in love with CSS, and never looked back.

I write in-depth, visual articles about CSS on ishadeed.com with 145+ articles so far. My work has been featured by Smashing Magazine, CSS-Tricks, Google and many more. I'm also a Google Developer Expert in Web UI & CSS.

I wrote the Debugging CSS book , created Defensive CSS, RTL Styling 101, and Accessibility Matters. I also spoke at conferences like CSS Day, Web Directions, and Paris Web.

Web design and development is what I enjoy most. Whether it's writing visual guides, consulting with teams, building interactive demos, or tinkering with new CSS features, I like helping developers understand how layout actually works. That's exactly what led me to create The Layout Maestro.

Find my articles on my blog, connect with me onBluesky, X, or LinkedIn.

It's not about learning the syntax, but showing you how to think.

Every now and then while working on the course, I will have the wish of having this course early in my career. With over 10 years of working as a front-end developer and web designer, and over 6 years of writing and sharing about CSS, I know exactly the pain points that most front-end developers or CSS learners encounter.

It's not about learning the syntax, but showing a developer how they should think, decide, and choose features before even writing a single line of code. This knowledge is missing and I'm excited that my course will offer it for you.

After finishing the course, you will walk with a mental model on how to approach a layout and think about it, not just memorizing a CSS property.

Ahmad Shadeed

Ahmad Shadeed

Design Engineer, Educator, Speaker

You can center a div, but when a designer hands you a complex page, you're not sure where to start. This course gives you a system for breaking down any layout.

You know the syntax, but you pick one and hope it works. This course teaches you how to decide before writing a single line of CSS.

You learned enough to ship, but things break in ways you can't explain. This course fills the gaps with a clear mental model for how to build layouts confidently.

You understand spacing, hierarchy, and composition, but translating that into CSS feels like a complex task. This course will fix that.

Learn the skills needed to be 2-5x more productive with CSS layouts.

Build better layouts starting today.

Take the chance and buy your seat!