O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Website Wireframing with HTML5 And CSS3

Video Description

Whether you’re an HTML veteran or just a beginner, this course is for you. Award-winning trainer Geoff Blake will walk you through the process of creating a website wireframe in just under three hours! This series of instructional videos will guide you through the process of creating the basic sections of your site, arranging and aligning text and images, and adding interactive features. Once you’re finished creating the wireframe, Geoff will show you how to put it online to share with coworkers and clients. After taking this course you’ll be able to build attractive and professional website prototypes in about an hour. The best part? Unlike a simple mockup in Photoshop, you can actually turn this wireframe into a fully-functioning website! Let Geoff Blake help you build your professional skills with this easy to follow course from Ten Ton Online.

Table of Contents

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