Live Instruction · CSS · Flexbox · Responsive Design
CSS Flexbox & Responsive Design —
Masterschool Coding Bootcamp
A live 57-minute session teaching career-changers how to build responsive layouts with CSS Flexbox — covering every major parent and child property, mobile-first design thinking, and media queries, all through live CodePen demos with real-time student Q&A.
The Session
The layout problem every beginner hits
This session landed at exactly the right moment in the curriculum. Students had a Personal Blog project due in two days and were still fighting with layouts — trying to position elements that refused to go where they wanted, unsure why their CSS wasn't behaving the way they expected.
Flexbox was the answer, but it requires a mental model shift. Before flexbox, developers used floats and the clearfix hack — workarounds layered on top of a layout model never designed for modern UI. I opened the session with that history deliberately: knowing why flexbox exists makes the properties make sense.
I framed the whole session around one goal: by the end, students should be able to look at any UI layout and identify which flexbox properties would build it — and know exactly where to put them.
57
minutes · live session
Masterschool Coding Bootcamp
CSS · Flexbox · Media Queries
Career-change cohort · International
The Content
What the session covered
From viewport fundamentals to nested flex containers — a scaffolded progression through the full flexbox model.
Viewport & Responsive Foundations
Covered the meta viewport tag, the difference between innerWidth and clientHeight, and what "above the fold" means in practice — establishing the conceptual ground before any layout code was written.
Mobile-First Design Thinking
Explained why mobile-first is a performance and efficiency strategy, not just a trend: starting small means writing less CSS for larger breakpoints. Contrasted with the clearfix era to show what problem flexbox actually solved.
Flexbox Parent Properties
Live-coded all major container properties — display: flex, flex-direction (row/column), justify-content (center, space-around, space-between, space-evenly), align-items, and flex-wrap — showing each in action on a container with five colored child divs.
Flexbox Child Properties
Covered flex-grow, flex-shrink, flex-basis (and the flex shorthand), order, and align-self — with emphasis on how flex-grow distributes remaining space and how flex-shrink controls overflow behavior.
Media Queries & Breakpoints
Demonstrated min-width breakpoints for switching flex-direction at specific viewport sizes — making layouts that stack vertically on mobile and align horizontally on wider screens with minimal code.
Nested Flex Containers
Showed how flex children can themselves become flex parents — the pattern behind most real-world layouts. Students asked about gap, column-gap, and grid-template-areas, which became live teaching moments.
The Approach
Live demos, not slides
Every flexbox property was demonstrated live in CodePen — not shown on a slide, not described abstractly. I kept the same starting point for the whole session: one container div with five colored child divs. That consistency let students focus on what changed when each new property was applied, rather than reorienting to a new example every few minutes.
The structure also made Q&A natural. When a student asked about the gap property, I could answer it live in the same CodePen they'd been watching. When another student asked about grid-template-areas,
I could explain why that was grid's territory — and why that distinction matters.
One of the best moments came when a student named Mustafan noticed that a width override on the child elements
was preventing flex-grow from working correctly.
He suggested removing it before I did. That kind of active problem-solving — students debugging live code alongside
the instructor — is the outcome I'm building toward with every demo.
I closed by tying everything back to the deadline: "You have two days on the blog project. Use flex-direction, justify-content, and align-items. That's honestly most of what you need." Specificity over comprehensiveness — meet students where the pressure is.
Context
Why floats failed — the history before flexbox
Setup
Container + 5 colored divs in CodePen
Parent Properties
justify-content · align-items · flex-wrap
Child Properties
flex-grow · flex-shrink · order · align-self
Responsive
Media queries + mobile-first direction switching
Nesting
Children becoming parents — real-world patterns
Student Interaction
Questions that became teaching moments
Live sessions succeed or fail on the quality of student interaction — and this cohort brought strong questions. The chat was active throughout, and the questions weren't just clarification requests: students were actively testing the model, pushing on edge cases, and noticing things.
Mustafan's contribution during the flex-grow demo is a good example of what engaged learning looks like. He didn't wait to be called on — he connected what
he saw on screen to something he'd been thinking about and offered a solution. I confirmed it live, which reinforced
both the concept and the pattern of students trusting their own reasoning.
The grid-template-areas question was equally useful. It gave me the chance to distinguish flexbox (one-dimensional — row or column) from CSS Grid (two-dimensional — rows and columns simultaneously) in a way that was motivated by actual student curiosity rather than a slide I'd planned to show.
Mustafan
"What if we remove the width override?"
Identified why flex-grow wasn't distributing space — a real debugging insight.
Student
"What about gap vs. column-gap?"
Led to a live demo of gap as the combined shorthand for row-gap and column-gap.
Student
"Can the number of columns change with grid-template-areas?"
Distinguished flexbox from CSS Grid and clarified when each tool is the right choice.
Student
"What if the height is auto?"
Demonstrated how align-items: stretch behaves differently when height is explicit vs. auto.
Session Recording
Watch the Session
Full recording of the live CSS Flexbox & Responsive Design session at Masterschool — including live CodePen demos, mobile-first design principles, and student Q&A throughout.
Reflection
Why layout is the hardest concept to teach
CSS layout is hard to teach because it's spatially abstract. Students can memorize
justify-content: space-between without being
able to predict what it will do on a screen they haven't seen. The only fix is showing it — running the demo, changing
the value, watching what moves.
That's why every flexbox property in this session was introduced by changing one line in a live CodePen, not by describing it. The visual before-and-after is the explanation. The words just anchor what the student is already seeing.
Mobile-first thinking adds another layer: it asks students to invert the order they naturally want to work in. Most beginners start with desktop and add complexity for mobile. Mobile-first asks them to start with constraints and expand — a harder cognitive lift, but one that pays off in cleaner, more maintainable CSS. Making that argument explicit, with a historical frame, gives students a reason to adopt the pattern rather than just comply with it.
57
minutes
CSS · Flexbox · Responsive Design
justify-content · align-items · flex-grow
Mobile-First · Media Queries · Nesting
Interested in working together?
I'm open to remote opportunities in technical learning experience design, developer education, and customer enablement.