Applying Design To Wireframes with HTML5 & CSS3

Learn how to transform your website wireframes into fully functional designs!
3.9 (8 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.
114 students enrolled
Take This Course
  • Lectures 25
  • Length 2 hours
  • Skill Level All Levels
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 10/2013 English

Course Description

Building on the skills you gained in Website Wireframing with HTML5 and CSS3, this course teaches you how to apply functional and attractive design principles to your wireframe. Featuring advice on typography, graphics, and colour schemes, award-winning trainer Geoff Blake will lead you through the full process of making your site look amazing in every web browser. Lessons include how to select a colour palette, where to source free images, and what resources to use to integrate beautiful typography into your design. You’ll discover Google Fonts, and how to integrate them into your CSS. When you’re finished adding fonts and images, Geoff will walk you through the various options for testing out your site. From wireframe to fully realized design, this course is a must for aspiring web developers.

What are the requirements?

  • A basic understanding of HTML and CSS

What am I going to get from this course?

  • You’ll learn how to turn your wireframe layouts into a visually stunning website!
  • In just two hours, you’ll learn the design process, including determining your message, selecting fonts and typography, sourcing imagery, and building a design colour palette.
  • This course explores a wide variety of free resources that are a must-have for making your web designs spring to life.
  • See how to integrate custom fonts from Google Fonts API into your layout’s CSS.
  • Discover tools and processes for testing your layouts for cross-browser and cross-platform compatibility.

Who is the target audience?

  • This course is a must for aspiring web developers.

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.


Section 1: Introduction
Welcome! Here's What This Course Is All About
Here's What We'll Create In This Course
Section 2: From Wireframe To Design
Determining The Design's Message
Choosing Your Design's Colour Palette
Tools For Selecting Typefaces
Choosing Imagery And Design Elements
Section 3: Getting The Design Underway
Getting Started By Styling The Header
Formatting Call-To-Action Buttons With CSS
Adding Additional Shadow Effects To The Buttons
Finishing Up The Button Formatting
Typographic Treatments With Google Font API
Beginning The Features Section Styling
Finishing The Features Section
Formatting The Organize Section
Wrapping Up The Layout's Design
Section 4: Inserting & Formatting Graphics
Inserting & Adjusting The Logo
Setting Up The Hero Section Graphics
Getting The Feature Section Images Inserted
Placing The Organize & Share Images
Using A Graphic As A Button Label
Section 5: Cross-Browser Testing
Online Testing Tools
Running Virtual Operating Systems For Testing
Making Minor Adjustments For Browser Compatibility
Section 6: Wrapping Up
Where To Go From Here
Request a Course

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 210,000+ Happy Udemy Students

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 370,000 students currently taking Stone River eLearning courses. We currently offer 100+ 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