Website Wireframing with HTML5 & CSS3
Size and structure before detailed design
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!
Course Curriculum
-
PreviewWelcome! Understanding Layout Wireframing (4:02)
-
PreviewWhy Using Photoshop May Not Be The Best Choice (3:07)
-
PreviewUsing HTML & CSS For Fast Wireframe Compositing (2:53)
-
PreviewA Look At What We'll Build In This Course (1:23)
-
PreviewBonus Lesson_How To Turn Any Web Page Into A Wireframe (1:24)
-
PreviewSetting Up The Rough Page Structure (4:45)
-
StartBuilding The Structural CSS Rules, Part 1 (7:43)
-
StartBuilding The Structural CSS Rules, Part 2 (2:52)
-
StartConnecting Up The HTML To The CSS (5:20)
-
StartCentering Layout Elements (5:36)
-
StartSetting Up Inner Layout Containers (7:19)
-
StartInserting Additional Inner Containers (3:35)
-
StartSpacing Apart The Layout (9:15)
"I wanted a better understand of wire-framing from both a technical and practical approach. This course provided both. It was great to learn that I really did not have to purchase and learn how to use a new application. The instructor was very prepared and gave simple and clear explanations. He showed step by step how to accomplish the tasks described in the course. He also has a great sense of humor which keeps the material from being dry and boring. The video quality was great. I could easily see all the text he was typing and sound quality was great as well."
-AJ Speller
"Great course! Better than I expected. It is worth it.
- Antonio Afonso Maciel Kukul
"Great Course with some really handy time saver tips in wireframing. However, the final code has not been made available and very little explanation of the aspect ratio made it difficult to digest. I'd highly recommend this to accelerate your development workflow. However, A little more elaboration on the chosen aspect ratios would most definitely take this course further!"
- Arsedian Ivan