Overview
-
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.
Syllabus
-
Introduction
- Welcome
- How to use the exercise files
- 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
- 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
- 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
- Relative positioning
- Absolute positioning
- Fixed positioning
- Controlling stacking order
- Clipping content
- Controlling content overflow
- Positioning elements: Lab
- Positioning elements: Solution
- 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
- 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
- Responsive layout overview
- Using media queries
- Organizing styles
- Making content responsive
- Mobile design considerations
- Building responsive layouts: Lab
- Building responsive layouts: Solution
- 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
