CSS: Page Layouts (2012)

Learn about basic layout concepts, how to create properly structured HTML based on prototypes and mockups, and critical page layout skills such as floats and positioning.

Introduction

• Welcome
• How to use the exercise files

1. Layout Basics

• Box model review
• Calculating element dimensions
• Understanding margin collapse
• Calculating em values
• Calculating percentage values
• Normal document flow
• Controlling element display
• Using CSS Resets
• Fixed, fluid, and responsive layouts
• CSS debugging tools
• Using the Firebug Inspector and the WebKit Web Inspector

2. Design Considerations

• Page design workflow
• Page design tools
• Determining page structure
• Creating image assets
• Creating initial page structure
• Adding meaning with classes and IDs
• Structuring content with HTML5
• Building internal structure

3. Working with Floats

• Floating elements
• Clearing floats
• Containing floats
• Clearfix technique
• Floating inline elements
• Two-column floated layouts
• Three-column floated layouts
• Column height considerations
• Creating equal-height columns
• Floats: Lab
• Floats: Solution

4. Positioning Elements

• Relative positioning
• Absolute positioning
• Fixed positioning
• Controlling stacking order
• Clipping content
• Controlling content overflow
• Positioning elements: Lab
• Positioning elements: Solution

5. Building Fixed Layouts

• Design considerations for fixed layouts
• Establishing the layout grid
• Defining column spacing
• Applying the grid through CSS
• Creating grid-based assets
• Grid design resources
• Building fixed layouts: Lab

6. Building Flexible Layouts

• Designing for flexible layouts
• Calculating percentage values
• Setting flexible width values
• Making images flexible
• Setting minimum and maximum widths
• Building flexible layouts: Lab
• Building flexible layouts: Solution

7. Building Responsive Layouts

• Responsive layout overview
• Using media queries
• Organizing styles
• Making content responsive
• Mobile design considerations
• Building responsive layouts: Lab
• Building responsive layouts: Solution

8. Enhancing Page Design

• Creating multi-column text
• Using borders to enhance design
• Rounding corners
• Adding drop shadows
• Working with opacity
• Utilizing the background property
• Working with CSS sprites
• Enhancing page design: Lab
• Enhancing page design: Solution

Additional Resources

• Additional resources