2016
Lynda
James Williamson
1:20
English

The CSS3 Flexible Box Model, or Flexbox, is a different way to design responsive websites and HTML forms. Flexbox doesn't rely on floats or collapsible margins. Instead, flex containers shrink and expand items to fit the available space. With flexbox, complex layouts can be achieved with cleaner, more semantic code.
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.

Introduction
Welcome
Using the exercise files
1. Building a short form
Flexbox basics
Touring the finished projects
Basic form structure
Basic form styling
Making the form responsive
Controlling element flexibility
Refining form layout
2. Larger Forms
Longer form structure
Sectioning form content
Refining basic styling
Creating responsive inputs and labels
Creating responsive checkbox groups
Making form sections responsive
Controlling section spacing
Adding media queries
Conclusion
Additional resource

lynda.com/Web-Design-tutorials/Building-Responsive-Forms-Flexbox/383123-2.html

Download File Size:264.86 MB

---