For workshop updates and demos of workshop content,
subscribe to OddNews.
CSS layout techniques have come a long way
since the early days of responsive design,
but many websites are still using
decade-old approaches
that require more fragile code
and more ongoing maintenance.
Take your sites to the next level
with this 3-session workshop
on building more resilient and maintainable web layouts
using modern CSS.
Miriam is one of the very few people I trust enough to point my own
students toward. She gets the “why” as much as the “how,” and makes
learning CSS feel genuinely empowering.
There are few, if any,
who are more qualified to cover the ins and outs
of CSS layout, and I can tell you that Miriam’s work really helped
inspire and inform the content in my course.
I’m not sure I know anyone
who understands CSS layouts better than Miriam,
but her real skill is being able to explain it all
in easy to understand ways.
She doesn’t just teach how things work,
she explains why they work that way,
and how everything fits together.
It was a treat to learn
from someone involved in writing the specs.
Freelancer and other
need-based scholarships available.
For discounts,
please contact us.
Miriam has a unique talent
of being extremely technical
with CSS but communicates
that so seamlessly
and so inclusively that regardless
of what level you’re at now,
you’ll be so far beyond
that when you learn from her.
A true super talent.
Miriam is your favorite developer’s
favorite developer.
She’s been the driving force
behind a ton of modern CSS features,
and is better positioned
than anyone else
to help you understand them!
Even with my 20 years
of experience writing CSS,
I sometimes hit the wall.
Whenever that’s the case,
I know I can ask Miriam,
and I’ll get a clear and competent answer.
Miriam’s knack for explaining thorny subjects
like CSS layout
in ways that are easy to understand
will put you right at ease,
helping you level up
your CSS game in no time.
Whether you’re a beginner
or an expert,
you’re guaranteed to learn something new.
This workshop is intended for designers & developers
with at least a basic understanding of HTML and CSS.
You don’t need to be an expert to keep up,
but even the experts are likely to learn something new.
Miriam is a developer, teacher,
and pioneer of modern CSS –
an Invited Expert on the
W3CCSS Working Group
and core contributor to the
Sass language.
She created Susy for responsive layouts back in 2009,
and recently co-wrote the CSS specifications for
Container Queries, Cascade Layers, and Scope.
In addition to presenting talks & workshops
at conferences around the world,
Miriam is a former staff writer for CSS-Tricks,
co-founder of the Mozilla Developer Channel,
and co-author of SitePoint’s Jump Start Sass.
She’s also a cross-media artist
with extensive experience in theatre,
writing, music, and visual art.
If I had to pick someone
to lead a workshop
on modern CSS layout strategies,
Miriam would be at the top of the list.
Not only has she been instrumental
in helping CSS evolve
in exciting new ways,
Miriam’s also one of those rare,
gifted educators:
her writing and speaking
consistently helps me see new ways
to approach design and layout for the web.
To learn from Miriam
is truly a privilege,
not only because
she is involved in writing specifications,
but because,
at the end of the day,
she is also a developer like us.
This puts her
in a unique position
to help you understand
not only how to use CSS,
but also to understand why
it works the way it does.
Miriam knows CSS better
than nearly anyone on the planet.
Not only does she help shape CSS specifications,
she applies the nuances of CSS
in honest-to-goodness real-world work.
I’ve learned so much from her,
so I’d strongly recommend
Miriam’s workshop to anyone!
CSS is fundamentally different
from other languages or design tools,
built around a radical vision
for contextual style and user-control.
We’ll dig into the practical implications of that vision,
and how the ‘grain’ of the language
can guide us to more performant and resilient styles.
Layout Modes & Formatting Contexts
Many CSS properties are modal,
behaving differently in different layout contexts.
We’ll start from the default layout mode
called ‘normal flow’ –
a powerful default
that often feels natural,
but hides a lot of complexity just below the surface.
We’ll look at how the DOM is rendered
as a tree of inline and block boxes,
each generating a new ‘formatting context’
for the elements nested inside.
2. Distributing Space
Flowing & Flexing
Unlike the printed page,
web content and context can be unpredictable.
CSS provides tools to manage that uncertainty,
aligning & distributing objects on the page.
We’ll talk about normal flow,
intrinsic and extrinsic sizing,
logical properties,
box sizing & alignment,
and the flexible box model.
Flex & Alignment in Practice
Practical use-cases,
and interactive exercises related to distributing space.
3. Defining Structure
Defining Structure
Sometimes we also need to impose external structure
to create consistent and reliable layouts,
even with unpredictable content.
This is a full session dedicated to grid & subgrid,
the multiple ‘stages of squishiness’,
and container queries.
Grids & Containers in Practice
Practical use-cases,
and interactive exercises related to defining layouts.
