2015
Treehouse
Guil Hernandez
2:49
English

Learn to work with common layout and positioning methods used in web design. In this course, you'll get hands-on practice with basic CSS layout techniques like display modes and floats.
You'll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.

Getting Started with CSS Layout
What to Expect
CSS Reset with Normalize
Creating a Layout Wrapper
Why Vertical Margins Collapse
Centering Page Content and Creating a Full-width Header
Layout Wrapper Challenge - 2 objectives
Using a Mobile First Approach
Creating a Sticky Footer
Getting Started with CSS Layout Review - 6 questions
Controlling Layout with CSS Display Modes
Positioning Elements Side-By-Side with Inline Display
Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding
Removing Gaps Between Inline and Inline-Block Elements
CSS Display Modes Challenge - 3 objectives
The Column Layout Challenge
The Column Layout Challenge Solution
CSS Display Modes - 6 questions
Page Layout with the Float Property
How Floats Work
Wrapping Text Around Images with Floats
Creating a Horizontal Navigation with Floats
Clearing and Containing Floats
Float Property Review - 5 questions
The Float Challenge
The Float Challenge Solution
Footer Layout with Floats - 4 objectives
CSS Layout Project
Introducing the Project
Creating and Styling the Layout Containers
Adding Media Queries for Large Screens
Column Layout with Media Queries
CSS Layout Review - 5 questions
Positioning Page Content
How Absolute Positioning Works
Positioning Elements Relative to Other Elements
Create an Image Caption with Absolute Positioning
CSS Positioning Challenge - 3 objectives
Fixed Positioning
How Z-index Works
Positioning Page Content - 7 questions

Download File Size:298.78 MB

---