Website Wireframing with HTML5 & CSS3

Discover how to quickly mockup your web ideas!
4.2 (27 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
255 students enrolled
$75
Take This Course
  • Lectures 35
  • Contents Video: 3 hours
    Other: 0 mins
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2013 English

Course 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.

What are the requirements?

  • A basic understanding of HTML and CSS

What am I going to get from this course?

  • Learn how to rapidly build web layout wireframes

What is the target audience?

  • Those wanting to learn how to build wireframe interfaces with HTML and CSS

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 180,000+ Happy Udemy Students | 320,000+ Students Worldwide

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 320,000 students currently taking Stone River eLearning courses. We currently offer 125+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.

Ready to start learning?
Take This Course