HTML5 + CSS3 Responsive Web Design Course

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

Download WorkFiles