.Introduction

 

 Welcome! Understanding Layout Wireframing

 

 Why Using Photoshop May Not Be The Best Choice

 

 Using HTML & CSS For Fast Wireframe Compositing

 

 A Look At What We’ll Build In This Course

 

 Bonus Lesson_How To Turn Any Web Page Into A Wireframe

 

.Getting started

 

 Setting Up The Rough Page Structure

 

 Building The Structural CSS Rules, Part  

 

 Building The Structural CSS Rules, Part  

 

 Connecting Up The HTML To The CSS

 

 Centering Layout Elements

 

 Setting Up Inner Layout Containers

 

 Inserting Additional Inner Containers

 

 Spacing Apart The Layout

 

.Wireframing The Header in Greater Detail

 

 First Thing’s First_Getting Organized

 

 Building The Logo Container

 

 Setting Up The Main Navigation Menu

 

 Creating A Call-To-Action Button

 

.Building the Rest of the Layout

 

 Inserting The Hero Image

 

 Getting ed With The Hero Content

 

 Finishing Up The Hero Section

 

 Inserting The Feature Headers

 

 Building The Feature Boxes

 

 Wireframing The Organize Section

 

 Speeding Things Up For The Share Section

 

 Finishing Up The Wireframing

 

.Finishing Touches

 

 Inserting A Placeholder Image

 

 Adding A Logo Placeholder With Text

 

 Inserting The Remaining Image Placeholders

 

 Inserting A Background Placeholder

 

 Adding Subtle Interactivity

 

 Adding Button Interactivity

 

 Finishing Touches

 

 Sharing The Wireframe For Review