A practical, written CSS course that teaches you how to think, build, and debug web layouts.
Taught by
Ahmad Shadeed
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.
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 in isolation, 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:
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.
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.
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.
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.
Take the chance and buy your seat!
I hear you. Why take yet another CSS course, especially when LLMs can build designs?
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 visual CSS guides have become a go-to resource for 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 CoyierCodepen, Formerly CSS-Tricks
Everything included with your purchase.
Filled with written lessons that are explained visually with highly interactive examples.
Not abstract concepts in isolation. You'll see how layout techniques come together in complete, real-world page layouts.
When you purchase the course, you can try Polypane browser with a free trial of 2 months.
When you finish the course, you can ask for a Certificate of Completion to share with friends on social media, whatever makes you happy.
The Layout Maestro won't stop there, it will always be updated for new CSS stuff and recommendations.
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 layered 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.
Jennifer SaenzFront-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.
Johannes MutterDesign Engineer
Hello! I'm Ahmad Shadeed, a designer, developer, and CSS educator. I wrote Debugging CSS Book, Defensive CSS, and RTL Styling 101 guide.
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 on Bluesky, X, or LinkedIn.
The course keeps growing. Here's what I'm working on right now.
The building module contains 7 projects, and more will be added over time.
A deep-dive into anchor positioning.
You will come out different after this course.
Offer ends April 1, 6:00 PM UTC
$249
$199
Full access to all modules
Over 70 written lessons
7+ real-world layout projects
150+ interactive examples
Free copy of Debugging CSS book
Teaches you how to think, not just CSS syntax
Lifetime access and future updates
30-day money back guarantee
Price in USD, before tax if applicable.
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 ShadeedAuthor of Debugging CSS
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.
Take the chance and buy your seat!
Just in case you were thinking about one of these
Every lesson in The Layout Maestro uses interactive demos and detailed visual illustrations that you can explore at your own pace. You can toggle properties, resize elements, and see exactly how the browser makes layout decisions.
It depends on your pace. Usually it's expected to be completed in 12-20 hours.
Basic HTML and CSS (selectors, box model) are enough. You don't need to know Flexbox or Grid in advance. The course builds from mindset and fundamentals up to advanced layout examples.
AI can generate CSS, but it often lacks the judgment of when to use which layout approach. This course teaches you the thinking behind layout decisions so you can evaluate and correct AI output instead of pasting code you don't understand.
This course assumes you know basic selectors, the box model, and how to write a stylesheet. If you haven't written HTML or CSS before, you'll want to learn the basics first.
Yes. After purchase you'll receive a receipt by email. You can also request one from the payment provider if needed.
Yes! Please contact me at support@ishadeed.com along with your proof of enrollment and I'll be happy to provide a discount.
We offer a 30-day money-back guarantee. If the course isn't for you, contact support@ishadeed.com within 30 days for a full refund. We might ask you to provide a reason, but it's optional.
Yes. When you finish the course, you can request a certificate of completion to share or use professionally.
For team or site licenses, get in touch with us. We can arrange bulk access and invoicing for your team.
I plan to offer a workshop format in the future. If you're interested, get in touch with me at support@ishadeed.com.
