2015
Lynda
Morten Rand-Hendriksen
0:50
English
Based on old-school typography blocks, the CSS box model is the key to modern web design. Once you master it, you can build any layout you want—and troubleshoot most of the common CSS alignment and positioning woes. In this course, Morten Rand-Hendriksen offers a "four course meal" approach to the CSS box model, breaking it down into easily digestible chunks.
He covers techniques such as styling text and images, floating content, using display properties, and positioning elements. He'll also show you how to take your website beyond boxes with advanced CSS tools and techniques. Each lesson is supported by real-world demonstrations of the concepts in action, and Morten closes with a "nightcap" that will get you thinking about going further with CSS.
Introduction
Welcome
1. Appetizer: The Web Is Made of Boxes
Displaying information through the web
The web is made of boxes
Designing with boxes
2. Entrée: The Origin of the Box in Typography
Understanding the basics of type
Change the type and change the box
Text flow in the box
3. Main Course: Understanding the Box Model
What is the CSS box model?
Changing the contents within the box
Understanding the display property
Sidebar: Images are inline elements
Position is everything
Floating and clearing content
Using the clearfix
Pseudo-elements: Making the browser hallucinate
4. Dessert: The Brave New World of CSS Boxes
Creating flexible boxes with display: Flex
Changing the shape outside
Next Steps
Going further with CSS and web standards
Download File Size:242.29 MB