Mentor · Live Session · CSS · Masterschool · Udacity · 2022
Personal Blog —
Project Walkthrough & Live Q&A
A live project walkthrough session for Masterschool students working through the Personal Blog project on the Udacity curriculum — covering CSS architecture, mobile-first responsive design, CSS Grid, and Flexbox with live Q&A throughout.
The Session
Live guidance through a real CSS project, start to finish
Masterschool incorporated Udacity's curriculum into their program, and the Personal Blog project was one of the key hands-on assignments students tackled early in the course. Building a personal blog from scratch requires students to make real decisions about CSS architecture, file organization, and responsive layout — concepts that are straightforward in theory but immediately complex when applied to a real project.
I led a live walkthrough session for a cohort of international students, guiding them through the project while fielding questions in real time. The session covered how to think about CSS structure before writing a single line of code, why mobile-first is the right default approach, and how to use CSS Grid and Flexbox to build flexible, responsive layouts.
The format was open and collaborative — students asked questions throughout, raised alternative approaches, and worked through common points of confusion together. That kind of live Q&A environment is where a lot of the real learning happens.
Blog
Masterschool · Udacity
Mentor · Live Session
CSS · Grid · Flexbox
January 2022
Session Topics
CSS fundamentals applied to a real project
Each topic came up organically through the project — questions from students shaped the conversation as much as the walkthrough itself.
CSS Architecture
How to structure CSS files for a multi-page project — covering the role of reset/normalize stylesheets, how to organize mobile and responsive styles, and why file structure decisions matter before you start writing rules.
Mobile-First Design
Why mobile-first is the recommended approach and how to apply it in practice — writing base styles for mobile, then layering responsive breakpoints for tablet (768px) and desktop (1024px+) using media queries.
CSS Grid Layout
Building flexible page layouts with CSS Grid — covering grid structure, placement, and how to adapt layouts across breakpoints. Shared hands-on resources including Jen Simmons' labs and Grid by Example for further practice.
Flexbox
Using Flexbox for component-level layout — navigation, sidebars, and content alignment. Covering when to reach for Flexbox vs. Grid and how the two work together in a real project.
Live Q&A
Students asked questions throughout — on CSS file organization, breakpoint strategy, custom images, sidebar placement, and responsive pixel values. The session was shaped as much by student questions as by the walkthrough itself.
Developer Resources
Shared a curated set of CSS Grid and Flexbox references during the session — including labs.jensimmons.com, gridbyexample.com, grid.malven.co, and flexbox.malven.co — giving students tools to keep learning independently.
Session Recording
Watch the Walkthrough
Live project walkthrough and Q&A session for Masterschool students on the Udacity Personal Blog project, January 2022.
Personal Blog Project Walkthrough — CSS, Grid & Flexbox
Reflection
Live sessions surface the questions that written guides can't anticipate
What made this session valuable wasn't the walkthrough itself — it was the questions. Students asked about things that written project instructions never address: whether to split CSS into separate files by device size, how to think about pixel breakpoints when Apple tablets blur the line, and what "mobile-first" actually means in practice when you're staring at a blank stylesheet.
That's the instructional design insight embedded in live sessions: the gaps in understanding only become visible when learners have a space to ask. A well-structured walkthrough creates the conditions for those questions to surface — and the answers, given in context, are far more durable than anything a student reads in isolation.
The same principle applies to AI adoption training. When employees are learning to use new tools, the questions they ask in live sessions reveal exactly where the documentation falls short — and those gaps are where targeted, practical training content makes the biggest difference.
Mentor, Masterschool — Personal Blog Project Walkthrough, Udacity Curriculum, January 2022.
2022
Masterschool · Udacity
Mentor · Live Session
Personal Blog Project
CSS · Grid · Flexbox
Keep Exploring
More project walkthroughs
JavaScript DOM & Events
Landing Page Project — JavaScript DOM & Scroll Events
The next major Udacity frontend project: dynamic nav generation, getBoundingClientRect() for viewport detection, scrollIntoView() for smooth scrolling, and toggling active state classes as sections enter view.
React Project Intro
myReads Book Tracker — React Project Intro
Orienting students to the myReads book tracking app — component architecture, state management, and the Udacity project requirements — before they start building their first full React application.
OOP & DOM Project
Dinosaur Infographic — Live Debugging and OOP Walkthrough
A live debugging session for the Udacity Dinosaur Infographic project — covering prototypal inheritance, constructor functions, JSON loading, and the full render pipeline with real debugging moments throughout.
Interested in working together?
I'm open to remote opportunities in instructional design and technical learning experience design.