Join Us For an Exclusive Workshop:
CSS Grids and Flexbox in Responsive Web Design

with Jen Kramer

October 3rd & October 4th, 2017 • 9:30am – 5:00pm CST

Attend Online

Live and Full HD


Attend In-Person

From: Downtown Minneapolis, MN

Start Learning Today Master Flexbox & CSS Money-back Guarantee

Here’s why you should join us!

By coding along with us in this workshop you’ll:

  • Explore Flexbox, a one-dimensional layout tool that’s finally ready to use in modern browsers
  • Learn the hacks to make Flexbox work for full page layouts, similar to what’s done in responsive design frameworks like Bootstrap 4, Foundation 6, and UIkit 3
  • Discover CSS Grid, the correct way for laying out a two-dimensional design
  • Identify CSS Grid compatibility hacks, to make this new tool useful today
  • Incorporate media queries, responsive images, and other responsive design best practices into Grid and Flexbox
  • Combine Flexbox and Grid to create modern and future-forward layouts
  • Rough schedule…this can be completely subject to change, but you need a rough outline for attendees to know (roughly how they’ll spend their day)

Jen Kramer

Your Instructor

For more than seventeen years, Jen Kramer has been educating clients, colleagues, friends and graduate students about the meaning of a “quality website.” Since 2000, she has built websites that are supportive of business and marketing goals in a freelance capacity and as part of an agency. Jen is a Lecturer at Harvard University Extension School in the Master’s of Liberal Arts in Digital Media Design, teaching at least five courses per year, advising students, and assisting in curriculum design.

She is also available for individual private tutoring, customized classroom training, and occasional freelance web design work. Jen earned a BS in biology at University of North Carolina at Chapel Hill and an MS in Internet Strategy Management at the Marlboro College Graduate School.

Interact With the Instructor

Online & In-Person

Get Your Questions Answered

Spend A Full Day Immersed With Jen Kramer

CSS Grids and Flexbox in Responsive Web Design

We'll begin with a quick review of the industry’s current standard: float-based grid systems. We’ll review how to code one (quickly), plus advantages and disadvantages of this type of layout. We’ll also review media queries and responsive images, including the new tag and the Picturefill polyfill.

We’ll quickly move on to Flexbox, first exploring exactly how Flexbox works, since it’s very different from floats. We’ll code a simple grid system with Flexbox, and we’ll explore the similarities and differences with a float-based grid system.

Next, we’ll take advantage of Flexbox’s amazing alignment and the ordering features to juice up our grid, taking us places that simply weren’t possible with floats.

Finally, we’ll wrap up our first day by considering a common problem. You have some number of items you must lay out in columns and/or rows on a web page, but you have no idea how many items there are. (An item could be an image, a card, a media object, or anything else that would be considered a unit of content.)

On the second day, we’ll dive into CSS Grid, the brand-new spec available in the latest browsers. We’ll look at Grid’s basic syntax, working on a layout of a Mondrian painting as an example, which we’ll create with Grid. Next, we’ll move on to some of the alternative Grid syntaxes, and we’ll explore nested and offset grid layouts. Of course, we’ll also cover compatibility issues — how can we make Grid work across browsers, with reasonable fallbacks?

Finally, with Flexbox and Grid understood and mastered, we’ll try combining these elements for the best solution to a web page layout problem.

By the end of this course, you’ll be able to articulate the strengths and weaknesses of float-based layout, Flexbox, and Grid, and you’ll be able to code responsive layouts with each of these technologies.

Included with Frontend Masters Membership



Register Now

How We'll Spend the Day

We've already held over 100 workshops holding thousands attendees in-person and online. In this time we've discovered ways to schedule the day so it goes smoothly and efficiently.

Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.

How we'll spend the day:

Day 1: Flexbox

8:30am: Tech Check and Hello
9:00am: Intro and responsive design review: current grid systems with floats, media queries, responsive images
9:30am: Quick review exercise
10:00am: Introducing Flexbox
10:30am: Hacking
11:00am: Creating a basic Flexbox-based grid system, including media queries
12:00pm: Lunch and Hacking
1:00pm: Adding alignment and ordering features to the grid
1:30pm: Hacking
2:30pm: Laying out image galleries or articles with an unknown number of items
3:00pm: Hacking
4:00pm: Further Reading and Wrap-up

Day 2: CSS Grid

8:30am: Tech Check and Hello
9:00am: Lingering questions from yesterday; overview of grid and new units; media queries and Grid; Grid browser tools in Firefox
10:00am: Code it together: Mondrian painting
10:30am: You try it: Grid layout exercise
11:00am: Alternative grid syntax
11:30am: Grid nesting, offsets, and other layout variants
12:00am: Lunch and Hacking
1:00pm: Grid fallbacks
1:30pm: Hacking
2:00pm: Combining Grid and Flexbox for optimal layouts
3:00pm: Hacking
4:00pm: Further Reading and Wrap-up

*Note that this is a rough schedule of how each day typically break down, but that this will be adjusted as we go to make sure everyone can follow along.

The Price

The price for attending this 2-day workshop is simply the cost of becoming a monthly ($39) member. If you have already attended one, you know this is a tremendous value. If you haven’t, you may be wondering if it’s truly worth becoming a member.

Browse through just a few of the testimonials and you’ll see that people RAVE over these workshops. They’re unique and provide an experience and education you simple cannot find anywhere else.

You’re getting access to some of the brightest, most highly sought after experts in the world, covering topics very few people discuss in detail. Many attendees report learning more in this 2-day workshop than they did about a particular topics in the past 1-2 years combined.

Combine that with access to thousands of unique, high quality videos in our membership area with 500 hours of in-depth training from world renowned experts and you’ll see why this is a bargain.

  1. These workshops are different from any others you’ve attended. They cover everything, from the basics to advanced material. All of which are available for replay so you can go back and review as your skill grows.

  2. We get a lot of people saying they are scared to join… until it was over. Then they brag about how much of an amazing value they got for the price.

  3. You’re also getting videos of the workshop, plus ALL other workshops we’ve recorded, instantly!

Register Now

Is This Workshop For Me?

This workshop is geared for an intermediate level audience. There will be lots of time to explore on your own, complete the in-class exercises, and consider how Flexbox and Grid could be assigned to your current layout issues. Beginners will likely be overwhelmed if floats and basic CSS are not completely mastered. Experts capable of learning quickly may feel the course is a little slow.

Any Prerequisites?

You should have a solid working knowledge of hand-coded HTML and CSS, with the basics mastered completely. Knowledge of inheritance, the cascade, and CSS selectors are helpful. You should also have a basic understanding of web page layout with floats or positioning. You do not need any background in Flexbox or Grid before arriving.

You'll Either LOVE This Workshop Or You Don't Pay. Period.

Our attendees are ecstatic by the high-quality, relevant content they receive at these workshops.

We cover everything in explicit detail (and the things we miss are covered by answers to YOUR questions) from basic to advanced tactics you can start working with the very same day. We don't want you to miss out on this opportunity because you've been to less-than-stellar workshops in the past. We promise you, ours are very unique.

That's why if you attend the workshop and aren't absolutely thrilled with the content… if you don't think it's worth the admission price… We refuse to accept your money. We will more than gladly issue you a full refund, so you risk nothing.

We're very specific about what you're getting here and have ran lots of workshops… so we've almost never have requests for refunds (99.8% satisfaction rate).

MJG Workshop Center • 60 South Sixth Street, Suite 3625, Minneapolis, MN, 55402

What Past Attendees Are Saying

"Superb presentation from a genuine domain expert. I learned a ton today."

Steve Jakubowski

"Keep up the good work. I've attended a lot of online workshops, and they are very shallow and unpractical. Most of the time, online people are treated as second class, but still paying citizens. Here we get all the content and get to participate as well (if only there was a way to get those cookies...)."

Adrian Murillo

"The class was great. It was really cool to get a bunch of links to example code to look at during the presentation and after the class."

Nate Yourchuck

"Good location and facility. Great technology for capture, presentation layout and video streaming. Really excellent being able to view the videos afterwards. It takes away the sense of having to absorb everything immediately or else lose it into the ether. It was fun. What more can you ask for?"

Laurence Bates

"Really well run...loved the communication pre-event. Very impressed with everything...this was my first online conference purchase, but I would definitely consider doing it again."

Jeff Sims

"I really enjoyed the online workshop experience. It is much better than just watching videos. I was able to participate in the conversations and benefit from other folks' questions."

Dana Greenberg

"You guys did a really great job! I cannot say enough good things about the experience."

Richard Ranke

"Everything was first class: excellent instructor, material, video, moderator, audio. Thank you!"

Oscar Pagani

My name is Marc Grabanski I'm the founder of Frontend Masters. I guarantee this workshop will be awesome. Period.

If you don't think it's worth 10x the value, I'm happy to give you back every penny. That's my promise to you!

Marc Grabanski
Founder Frontend Masters