Understand the Flexbox and Grid specifications, including common properties and values.
Apply Flexbox and Grid to different layout problems, and understand their strengths and weaknesses.
Review floats, and explain the best way to clear them - no hacks!
Understand different strategies for responsive image management, and learn when to use each.
Combine all of the techniques to create real-world web pages with semantic HTML and CSS layouts done right!

Your (Awesome) Instructor

Jen Kramer

Jen Kramer 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 the author of over 35 video training courses and three books.

Spend A Full Day Immersed in Flexbox & CSS Grid with Jen Kramer

Workshop Details

Page layouts are the heart of any website or application. The modern web has several choices for accomplishing layouts, each with their positive and negative characteristics. With plenty of exercises and practice, master the Flexbox and Grid specifications and responsive images, applying them to everyday page layouts.

Daily Schedule

We've already held over 300 workshops with thousands of 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

9:30AM
Introduction to the workshop
10:00AM
Introduction to Flexbox
11:00AM
Flexbox as a grid system
12:00PM
Lunch
1:00PM
Exercise - Refactoring page layout with Flexbox
2:00PM
Exploring responsive image solutions
3:00PM
Exercise - Image galleries
3:30PM
Forms and Flexbox
4:00PM
Inline-flex
4:30PM
Wrapup and practice

Day 2

9:30AM
Review forms and Flexbox
10:00AM
Intro to Grid
10:30AM
Grid syntax (area, named lines, templates)
11:00AM
Grid as a grid system
11:30AM
Grid exercise
12:00PM
Lunch
1:00PM
Grid offsets and advanced grid settings (minmax, clamp, auto-fill, auto-fit, inline-grid)
2:00PM
Exercise
2:30PM
Floats and flow-root
3:00PM
Putting it all together - final exercise
4:00PM
Wrapup

Expand...

Interact with the Instructor

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

Is This Workshop for Me?

Summary

Starting your web development journey? Or you've done this for a while, but you just hate CSS because it never makes sense to you? Jen Kramer specializes in explaining *why* something works, not just *how* to do it.

Any Prerequisites?

Working knowledge of HTML and CSS required. If you have the background from the Frontend Masters Bootcamp, that will be enough to get you going with this workshop.

Event Details

What

2 Full Day Workshop Sessions

Replay Videos (available immediately)

When

August 18 to 19, 2021 - 9:30am to 5:30pm Central Daylight Time

Where

Attend online on our full HD live stream

RSVP to Attend Online

You're Registered to Attend Online!

This Workshop's Online Chatroom is Currently Open!

This workshop has ended. Check back soon for the recording!

You can watch a replay of this workshop!

Responsive Web Design with Flexbox & CSS Grid, v2