HTML5 & CSS3 Website Wireframing

$49.99

This HTML5 & CSS3 – Website Wireframing training course will guide you through the process of creating the basic sections of your website, arranging and aligning text and images, and adding interactive features. Once you’re finished creating the wireframe, you’ll learn how to put it online to share with coworkers and clients. Project Files included!

Length: 3 hrs

This title is available in the
Total Training All-Access library.

Subscribe Now

Description

Whether you’re an HTML veteran or just a beginner, this HTML5 & CSS3 – Website Wireframing 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 training course guides 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, you’ll learn 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! Build your professional skills with this robust, yet easy to follow course.


Sample clip

About HTML5 and CSS3

HTML5

HTML or Hyper Text Mark-up Language is the language used for presenting websites and web content. HTML5 is the latest version, made official by the World Wide Web Consortium in 2014. Having a good grasp of HTML means you’ll be able to create, present and edit a whole variety of content on the web.

CSS3

CSS (Cascading Style Sheets) essentially ’enhances’ HTML, giving developers and users more control over how pages and content is displayed. It is responsible for creating more visually engaging web pages, applications and interfaces. CSS3 is the latest version, and has many more extended features than previous versions – although it is backwards compatible.

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)

Geoff BlakeGeoff Blake is an award-winning instructor with nearly 20 years of experience creating online video courses. His goal is to help people gain serious web skills, helping them to expand their business, develop their projects, and yeah – make more money!

Geoff is a published author, having written ‘Ten Ton Dreamweaver’ with Peachpit Press. He also held a professorship at Seneca college, and ran graphics workshops at George Brown, and Humber colleges in Toronto.

You may also like…