1:1 Mentoring · CSS · Responsive Design · OpenClassrooms · Guild Education
OpenClassrooms 1:1 Mentoring —
Guild Education Students
Live one-on-one mentoring sessions with working adults enrolled in OpenClassrooms through Guild Education — helping students through real project blockers, from CSS layout issues to responsive design, the night before a project review.
The Program
Working adults, real deadlines, real stakes.
Guild Education partners with employers to offer education benefits to their workforce — giving working adults access to degree programs, certificates, and bootcamps tuition-free through their employer. OpenClassrooms was one of those partners. The students I mentored were employees at companies like Walmart, Chipotle, and Disney who were upskilling into web development while working full-time.
That context matters. These weren't traditional students with unlimited time to iterate. They were balancing shifts, family, and a structured program with real project review deadlines — often reaching out the night before a submission because something wasn't working and they needed it solved now. The sessions had to be direct, efficient, and leave students capable of finishing the work themselves.
As a Web Developer Mentor at OpenClassrooms, I held regular 1:1 sessions with each student — reviewing their code, unblocking technical issues, and coaching them through the concepts they'd need to pass their project reviews.
Guild
Ed.
OpenClassrooms
Web Developer Mentor
1:1 Student Mentoring
Guild Education Partnership
The Work
What 1:1 mentoring sessions involved
Real project blockers, live in the browser — from flexbox layout to responsive breakpoints, solved together.
Live Code Review
Reviewed student code in real time — opening their project in the browser, inspecting the CSS in DevTools, and identifying exactly what was causing the layout to break before writing a single line of fix.
Flexbox Layout
Explained flex-wrap behavior and why child element widths must exceed 100% to trigger row wrapping — then applied flex-direction column to restack accommodation and activity card grids for mobile.
Media Query Strategy
Walked through desktop-first max-width media queries — explaining breakpoint logic, why you only specify width (not height), and how to layer mobile, larger-phone, and tablet targets inside separate query blocks.
Chrome DevTools Debugging
Used the responsive view in Chrome DevTools to read current viewport dimensions, find the natural breakpoint where the layout collapsed, and test CSS changes live before writing them into the stylesheet.
Project Review Coaching
Helped students understand what the reviewer was looking for — not pixel-perfect cross-device support, but demonstrated understanding of the concept. Coached how to present work confidently with what they'd built.
CSS Naming Conventions
Flagged lowercase file naming as a developer convention worth following — the kind of detail some reviewers notice and others don't, but that signals professional awareness regardless.
Inside a Session
The night before the review.
The session recorded here was a typical Guild mentoring call — a student had a project review at noon the next day and had just realized responsive design wasn't done. They'd watched the one OpenClassrooms video on media queries, tried to follow W3Schools, and found the two explanations contradictory. They weren't wrong: the approaches are different, and the course hadn't given them enough to connect the dots.
Rather than explain it abstractly, we opened their project, found the breakpoint where the layout collapsed, and wrote the first media query together — live, in their stylesheet. Twenty lines of CSS later, they had a working mobile layout. The session closed with a walkthrough of how to present it to the reviewer: click through each view, explain what you did and why, and demonstrate that you understand the concept even if every device size isn't covered.
That reframe — from "I need to cover every device" to "I need to demonstrate I understand the concept" — is often the most valuable thing a mentor can offer the night before a deadline.
Find the break point
Resize in DevTools → read the pixel width → set max-width
Stack the cards
flex-direction: column inside the media query
Reset the widths
width: 100% on child elements — remove fixed widths
Clean up spacing
margin: 0, padding: 0 — strip what breaks the column
Add the next breakpoint
min-width: 321px up to 768px → tablet layout
Coach the presentation
Demo each view — show you understand the concept
Sessions
Recorded 1:1 Sessions
A growing collection of recorded one-on-one mentoring sessions with Guild Education students in the OpenClassrooms Web Developer path.
Reflection
What working adults need from a mentor.
Guild Education students are different from traditional coding bootcamp students in one important way: they already have jobs. The stakes of failing a project review aren't just academic — for many of them, this education is tied to employer support, career advancement goals, and a significant personal investment of time outside of work hours. That changes what good mentoring looks like.
It means being direct about what the reviewer actually cares about versus what the student is anxious about. It means solving the specific problem in front of you instead of teaching the full topic. It means giving students language to talk about their work confidently — "I understand the concept, here's how I applied it" — rather than leaving them to guess how a reviewer will interpret incomplete coverage.
~20
lines of CSS
mobile · larger phone · tablet
flex-direction column · width resets
max-width breakpoints · margin cleanup
Interested in working together?
I'm open to remote opportunities in technical learning experience design, developer education, and customer enablement.