Become a member
Online Access to 1000+ Courses!

HTML5 + CSS3 Responsive Web Design Course

8.5hrs (119 Lessons) 2013-05-31

This Course can only be played using a subscription. You can play only first 3 chapters for free. Click Here to avail a subscription
Leap into the world of adaptive web design with HTML5 & CSS3 Responsive Web Design! With Geoff Blake as your guide, you'll learn how to build wireframe responsive designs in Adobe Illustrator, apply design and graphics to them in Photoshop, and then rebuild the designs in code. Discover the power of CSS3's media queries to target various devices and resolutions, including mobile, tablet, and desktop browsers. Learn how to extract Photoshop content for use in your designs, insert it with modern HTML5, and control it with a variety of CSS3 techniques. By the end of this VTC course, you'll have three beautiful designs, each one displaying automatically depending on the device being used to view it. To begin learning today, simply click on the movie links.

(SFX) Hi there this is Geoff Blake and I want to welcome you to HTML5 and CSS3 Responsive Web Design. We have a whole lot of action packed lessons ahead of ourselves here all related to building responsive web layouts. And there's obviously a whole bunch to get to. Here's a run through of some of the topics that you and I will be addressing together. We want to start things off with making sure that we understand exactly what responsive web design is and I'm going to show you some examples of some responsive web layouts as well. And then what we're going to do is we're going to build our responsive web design wireframes inside Adobe Illustrator. And then once we've built these responsive web design wireframes in Illustrator we're going to bring those, those wireframes into Photoshop and we're going to apply to design to them. Now when I say design what I mean is things like fonts, colors, graphics that sort of thing. Dressing up the otherwise plain wireframes. And as we're working our way along I want to give you lots of different productivity techniques and different options for working more efficiently inside Photoshop when you're using Photoshop to build these responsive web layouts. So we'll also see some ways to speed things up as well when we're working on our, our multiple files. Then what we'll do is we will set everything up using HTML and CSS and also media queries, we're going to set everything by hand so you can see exactly how you go about coding your html, your CSS and also your media queries. And of course we're going to test it all to make sure that it all works as well. Once everything's functioning once the rough framework is built, then we can move ahead and we can begin constructing the high, medium and low resolution layouts all via code, all by hand. I hope you're looking forward to that. We're going to use CSS of course to format our responsive designs. And then we're going to backtrack into Photoshop and I'm going to show you some techniques for extracting your graphics from Photoshop. We'll have a quick discussion on some different file formats. And then of course how to get those graphics inserted into your code and we'll have a look at some techniques for getting your graphics under the control of CSS via your media queries. So I hope that sounds like fun. As I say there's a lot of head of ourselves, a lot to get to. I hope you're looking forward to it. Without further ado, let's get started.  

  • Course: HTML5 + CSS3 Responsive Web Design
  • Author: Geoff Blake
  • SKU: 34431
  • ISBN: 978-1-61866-103-6
  • Work Files: Yes
  • Captions: No
  • Subject: Internet & Web Design
  • The first 3 chapters of courses are available to play for FREE (first chapter only for QuickStart! and MasterClass! courses). Just click on the movie link to play a lesson.
Course outline
Getting Started
Welcome (02:50)

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Wireframing Layouts in Illustrator

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Building the Designs in Photoshop

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Setting Up for the Medium Width Design

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Setting Up for the Low Width Design

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Getting Set Up for Responsive Design

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Building the HTML Structure

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Constructing the High Res Layout

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Building the Medium Res Layout

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Constructing the Low Res Layout

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Initial High Resolution Formatting

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Adding Graphics

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Conclusion

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference
Credits

BOOKMARKS

Subscribed users can bookmark any lesson for later viewing

Lesson Notes

Subscribed users can add notes to any lesson for future reference