In-Person Training

New CSS Layout

O’Reilly’s Boston Training Center, Boston, MA

See ticket options

Course limited to 40 people. Sign up before it sells out!

Despite its central role in controlling presentation, CSS has lacked a proper layout system—until now. Flexible Box (flexbox) layout is now more widely supported than rounded corners, and Grid Layout is coming fast. Both embody entirely new layout behaviors, upending nearly all of what we’ve learned about how to structure content, arrange layout elements, and more.

In this practical course, you’ll learn the basics of these new layout techniques through a mixture of instruction, hands-on experimentation, and small-group projects. By the end of the course, you should have a good handle on how and when to use flexbox and grids, and some practical experience in using them together as well as separately.

This two-day workshop takes place at the O’Reilly Boston Training Center. You’ll have the personal attention (and hard-won wisdom) of a leading authority in CSS. The small class size will provide ample opportunity for discussion. The goal is to create a highly interactive, immersive exploration of the new and sometimes astonishing realities of CSS layout today.

What you’ll learn—and how you can apply it

By the end of this live, hands-on workshop, you’ll understand:

  • How to write CSS for layout purposes leaving behind floated layouts
  • How to use the properties and values of Flexible Box Layout
  • How to incorporate Grid Layout specifications

This course is for you because…

  • You want to understand the new and far more powerful reality of CSS layout

Prerequisites

Familiarity with HTML and CSS is necessary, although familiarity with traditional CSS layout is not.

Computer Requirements

A laptop with more than one modern browser, as well as a code editor of some sort, is highly recommended. Working files will most likely be distributed via a public Github repository, but a Github account is not necessary.

About your instructor

Eric A. Meyer

Eric A. Meyer has been a burger flipper, a law publishing intern, a college webmaster, an early blogger, one of the original CSS Samurai, a member of the CSS Working Group, a consultant and trainer, and a Standards Evangelist for Netscape. Currently, he is technical lead at the 501(c)(3) non-profit Rebecca’s Gift, and co-founder of An Event Apart with Jeffrey Zeldman.

Among other things, Eric wrote CSS: The Definitive Guide for O’Reilly and Design for Real Life for A Book Apart, created the first official W3C test suite, wrote an unexpectedly popular CSS reset, and assisted in the creation of microformats. In 2006, he was inducted into the International Academy of Digital Arts and Sciences for “international recognition on the topics of HTML and CSS” and helping to “inform excellence and efficiency on the Web.” Eric lives with his family in Cleveland, Ohio, which is a much nicer city than you’ve heard. He enjoys a good meal whenever he can and considers almost every form of music to be worthwhile.

Course outline

  • Day One
  • Understanding Flexible Boxes (flexbox)
    • Understanding the flow and alignment axes
    • Creating flexible boxes
    • Distributing boxes
    • Padding, borders, margins, and flexibility
    • Managing and constraining flexibility
    • Altering flexbox order (and why you usually shouldn’t)
    • Z-index and flexbox
    • Changing flex direction
    • Wrapping flexible boxes
  • Small-group projects
    The class will break up into small groups, with each group tackling a design task with flexbox. At the end of the time, the groups will come back together and present their solutions for analysis and discussion.
  • Day Two
  • Understanding Grid Layout
    • Basic grid terminology and principles
    • Differences and similarities between flexbox and grid
    • Defining grid lines
    • Constructing simple grids
    • Repeating grid patterns
    • Grid gutters
    • Understanding grid flow
    • Avoiding (or embracing) overlap
    • Keeping grids accessible
  • Small-group projects
    The class will break up into small groups, with each group tackling a design task with grid, flexbox, or both. As in day one, the groups will come back together and present their solutions for analysis and discussion.

Venue

The course will be held at the O’Reilly Boston Training Center: 2 Avenue de Lafayette, 6th floor, Boston, MA 02111

Lunch will be provided.

Travel discounts

Rental Car Discounts

Hertz

If you need a rental car while attending the conference, you may go to the Hertz Interactive Reservation System to receive the special O’Reilly discount on rental cars for the conference. Or call Hertz Reservations at (800) 654-3131 and mention code #01XY0041.

United Airline Discount

United

To receive your 3%–10% Discount on United Airlines flights to our event, you can book online at united.com and provide discount Code ZVUR591372. Or, for a $25 service fee you can call United Meetings at (800) 426-1122 where a ticketing agent can help you by phone.

Group tickets

Working as a team? Learn as a team.

Taking this course as a team ensures that everyone is on the same page and understands both the immediate and long-term and immediate goals of your project. Exploring new ideas and collaborating on exercises together is a great team-building experience; everyone on your team will have the opportunity to ask questions, discuss use cases, and learn from other participants.

For group tickets and enterprise licensing, please contact training@oreilly.com

Code of Conduct

All participants must follow our Code of Conduct, the core of which is this: an O’Reilly events should be a safe and productive environment for everyone. Read more

O’Reilly Media, Inc. assumes no responsibility or liability for the facilities or services provided by the vendors and suppliers. Anyone attending this conference releases O’Reilly from any and all claims that may arise out of attending at this conference.

Thanks for signing up!
We protect your privacy.
Thanks for signing up!
We protect your privacy.