Table of Contents

1. Introduction
   • Welcome! Understanding Layout Wireframing 00:04:13
   • Why Using Photoshop May Not be the Best Choice 00:03:07
   • Using HTML And CSS for Fast Wireframe Compositing 00:02:54
   • A Look At What We'll Build in this Course 00:01:23
   • Bonus Lesson: How to turn any web page into a wireframe 00:01:24
2. Chapter 1: Getting Started
   • Setting Up the Rough Page Structure 00:04:45
   • Building the Structural CSS Rules, Part 1 00:07:43
   • Building the Structural CSS Rules, Part 2 00:02:53
   • Connecting Up the HTML to the CSS 00:05:20
   • Centering Layout Elements 00:05:37
   • Setting Up Inner Layout Containers 00:07:19
   • Inserting Additional Inner Containers 00:03:35
   • Spacing Apart the Layout 00:09:15
3. Chapter 2: Wireframing The Header in Greater Detail
   • First Thing's First: Getting Organized 00:04:37
   • Building the Logo Container 00:03:55
   • Setting Up the Main Navigation Menu 00:05:54
   • Creating A Call-To-Action Button 00:06:00
4. Chapter 3: Building the Rest of the Layout
   • Inserting the Hero Image 00:04:41
   • Getting Started with the Hero Content 00:04:02
   • Finishing Up the Hero Section 00:05:36
   • Inserting the Feature Headers 00:03:35
   • Building the Feature Boxes 00:05:59
   • Wireframing the Organize Section 00:05:42
   • Speeding Things Up for the Share Section 00:04:27
   • Finishing Up the Wireframing 00:06:23
5. Chapter 4: Finishing Touches
   • Inserting A Placeholder Image 00:03:49
   • Adding A Logo Placeholder with Text 00:03:51
   • Inserting the Remaining Image Placeholders 00:03:23
   • Inserting a Background Placeholder 00:05:10
   • Adding Subtle Interactivity 00:06:01
   • Adding Button Interactivity 00:11:43
   • Finishing Touches 00:04:57
   • Sharing the Wireframe for Review 00:06:04
6. Chapter 5: Wrapping Up
   • Where to Go From Here 00:03:03