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.
111 students enrolled
$19
$50
62% off
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

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

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.

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

Curriculum

Section 1: Introduction
Welcome! Here's What This Course Is All About
Preview
02:16
Here's What We'll Create In This Course
Preview
01:25
Section 2: From Wireframe To Design
Determining The Design's Message
Preview
05:16
Choosing Your Design's Colour Palette
Preview
06:38
Tools For Selecting Typefaces
Preview
05:18
Choosing Imagery And Design Elements
Preview
04:45
Section 3: Getting The Design Underway
Getting Started By Styling The Header
05:14
Formatting Call-To-Action Buttons With CSS
08:41
Adding Additional Shadow Effects To The Buttons
03:10
Finishing Up The Button Formatting
05:40
Typographic Treatments With Google Font API
07:41
Beginning The Features Section Styling
05:28
Finishing The Features Section
04:07
Formatting The Organize Section
04:47
Wrapping Up The Layout's Design
05:56
Section 4: Inserting & Formatting Graphics
Inserting & Adjusting The Logo
02:48
Setting Up The Hero Section Graphics
04:52
Getting The Feature Section Images Inserted
03:03
Placing The Organize & Share Images
02:52
Using A Graphic As A Button Label
03:53
Section 5: Cross-Browser Testing
Online Testing Tools
08:06
Running Virtual Operating Systems For Testing
09:16
Making Minor Adjustments For Browser Compatibility
05:24
Section 6: Wrapping Up
Where To Go From Here
02:53
Request a Course
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stone River eLearning, 200,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