Learn how to use Flexbox (the CSS3 Flexible Box Model) to create responsive HTML forms.
- View Offline
- [Voiceover] Hi. I'm James Williamson, senior author at Lynda.com and I want to welcome you to Building Responsive Forms with Flexbox. In this course, we're going fo focus on how Flexbox can enhance your responsive designs by building two responsive forms. We'll start with a brief overview of how Flexbox works, and then we'll tour the finished projects so you can see what we're going to be building. For there, we'll dive in and create two forms, a small search form and a larger, more complex registration form. Along the way, we'll focus on how Flexbox can created solid, responsive layouts, while using clean, semantic html.
We'll work on making elements flexible, controlling their alignment, and on how we can make the design responsive without having to rely on media queries.
In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.