Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Website Wireframing with HTML5 & CSS3
1.Introduction
Welcome! Understanding Layout Wireframing (4:02)
Why Using Photoshop May Not Be The Best Choice (3:07)
Using HTML & CSS For Fast Wireframe Compositing (2:53)
A Look At What We'll Build In This Course (1:23)
Bonus Lesson_How To Turn Any Web Page Into A Wireframe (1:24)
2.Getting Started
Setting Up The Rough Page Structure (4:45)
Building The Structural CSS Rules, Part 1 (7:43)
Building The Structural CSS Rules, Part 2 (2:52)
Connecting Up The HTML To The CSS (5:20)
Centering Layout Elements (5:36)
Setting Up Inner Layout Containers (7:19)
Inserting Additional Inner Containers (3:35)
Spacing Apart The Layout (9:15)
3.Wireframing The Header in Greater Detail
First Thing's First_Getting Organized (4:37)
Building The Logo Container (3:55)
Setting Up The Main Navigation Menu (5:53)
Creating A Call-To-Action Button (5:59)
4.Building the Rest of the Layout
Inserting The Hero Image (4:41)
Getting Started With The Hero Content (4:02)
Finishing Up The Hero Section (5:36)
Inserting The Feature Headers (3:34)
Building The Feature Boxes (5:58)
Wireframing The Organize Section (5:41)
Speeding Things Up For The Share Section (4:26)
Finishing Up The Wireframing (6:23)
5.Finishing Touches
Inserting A Placeholder Image (3:48)
Adding A Logo Placeholder With Text (3:50)
Inserting The Remaining Image Placeholders (3:23)
Inserting A Background Placeholder (5:09)
Adding Subtle Interactivity (6:01)
Adding Button Interactivity (11:42)
Finishing Touches (4:57)
Sharing The Wireframe For Review (6:04)
6.Wrapping Up
Where To Go From Here (0:20)
Bonus Lesson_How To Turn Any Web Page Into A Wireframe
Download
Complete and Continue