CSS Grids and Flexbox in Responsive Web Design
Join us for an Exclusive Workshop:

CSS Grids and Flexbox in Responsive Web Design

Jen Kramer
Jen Kramer
Harvard
October 3 to 4, 2017 - 9:30am to 5:30pm Central US Time

Attend Online

Live and in Full HD
OR

Join in Person

From Downtown Minneapolis, MN

You're Registered to Attend Online!

October 3 to 4, 2017 - 9:30am to 5:30pm Central US Time

This Workshop Is Currently Live

October 3 to 4, 2017 - 9:30am to 5:30pm Central US Time

This Workshop Has Already Concluded

CSS Grids and Flexbox in Responsive Web Design

Why You Should Join Us

By coding along with us in the 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

Your Instructor

Jen Kramer

Jen Kramer

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. Jen is also a prolific video author, creating 27 training courses for Lynda.com, O'Reilly Media, and Aquent Gymnasium. She is currently creating new videos for Lynda.com, Frontend Masters, and osTraining. 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.

Spend A Full Day Immersed With Jen Kramer

Workshop Details

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.

Daily Schedule

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.

Day 1

  • 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

  • 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:00PM
    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
Expand...

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?

Summary

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.

Event Details

Free for EVERYONE

One Full Day Workshop Session
Replay Videos (available immediately)

When

October 3 to 4, 2017 - 9:30am to 5:30pm Central US Time

Where

Option 1: Attend online on our full HD live stream
Option 2: Attend in-person at HQ in Minneapolis, MN