New CSS Layout
O’Reilly’s Boston Training Center, Boston, MASee 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
Familiarity with HTML and CSS is necessary, although familiarity with traditional CSS layout is not.
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.
- 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.
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.
Rental Car Discounts
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
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.
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 firstname.lastname@example.org
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.