by Geoff Blake | Publisher: Virtual Training Company, Inc. | Release Date: May 2013 | ISBN: 9781618661036

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.

1. Getting Started
   • Welcome 00:02:50
   • Understanding Responsive Design 00:03:57
   • Resolutions We Will Be Targeting 00:03:53
   • A Look at What We Will Build 00:03:34
2. Wireframing Layouts in Illustrator
   • Setting Up the High Resolution Wireframe 00:04:38
   • Building the Header 00:06:47
   • Setting Up the Navigation and Slideshow 00:06:58
   • Constructing the Content Boxes 00:06:00
   • Creating the News Feed Area 00:07:36
   • Finishing Up with the Footer 00:02:06
   • Starting the Medium Resolution Wireframe 00:03:25
   • Building the Header and Navigation Area 00:04:59
   • Building the Slideshow and Content Boxes 00:06:38
   • Constructing the News Feed 00:05:35
   • Finishing Up with the Footer 00:02:51
   • Setting Up the Low Resolution Wireframe 00:03:08
   • Wireframing the Header Area 00:03:58
   • Constructing the Main Navigation Menu 00:04:19
   • Building the Content Boxes 00:03:11
   • Setting Up the News Feed Area 00:05:22
   • Finishing Up and Final Thoughts 00:07:05
3. Building the Designs in Photoshop
   • Setting Up the Wireframe for Import 00:03:17
   • Opening the High Resolution in Photoshop 00:04:20
   • Breaking Apart the Wireframe pt. 1 00:05:00
   • Breaking Apart the Wireframe pt. 2 00:03:10
   • Breaking Apart the Wireframe pt. 3 00:05:35
   • Formatting the Header 00:04:28
   • Setting Up the Site Logo pt. 1 00:06:47
   • Setting Up the Site Logo pt. 2 00:04:33
   • Updating the Logo 00:04:54
   • Formatting the Navigation Menu 00:03:09
   • Inserting the Menu Items 00:06:51
   • Building the Slideshow 00:06:58
   • Setting Up the First Content Box 00:06:57
   • Inserting the Content Box Title 00:07:22
   • Building the Second Content Box pt. 1 00:04:33
   • Building the Second Content Box pt. 2 00:03:41
   • Building the Second Content Box pt. 3 00:05:32
   • Setting Up the Third Content Box 00:04:01
   • Inserting the Content Box Photo 00:04:13
   • Placing the Content Box Title 00:02:13
   • Inserting Placeholder Text 00:05:49
   • Finishing Up the Design 00:03:44
4. Setting Up for the Medium Width Design
   • Preparing the Wireframe for Import 00:02:53
   • Bringing the Wireframe Into Photoshop 00:03:57
   • Extracting the Header 00:03:42
   • Pulling Out the Menu and Slideshow 00:02:26
   • Finishing Up the Wireframe BreakUp 00:02:41
   • Formatting the Header 00:04:59
   • Building the Navigation Menu 00:03:45
   • Formatting the Slideshow 00:03:20
   • Setting Up the First Content Box 00:06:14
   • Finishing Up the Content Boxes 00:06:27
   • Formatting the Footer 00:02:57
5. Setting Up for the Low Width Design
   • Bringing the Wireframe into Photoshop 00:06:03
   • Extracting the Header and Menu 00:03:08
   • Pulling Out the Content Boxes 00:02:14
   • Finishing Up the Wireframe Breakup 00:01:23
   • Formatting the Header 00:03:48
   • Building the Navigation Menu 00:06:33
   • Readjusting the Layout 00:07:17
   • Setting Up the First Content Box 00:05:59
   • Formatting the Second Content Box 00:06:07
   • Finishing Off the Design 00:03:37
6. Getting Set Up for Responsive Design
   • Setting Up the HTML Page 00:07:11
   • Setting Up the External Style Sheet 00:05:50
   • Testing the External Style Sheet 00:02:42
   • Building the Three Media Queries 00:05:41
   • Testing the Media Queries 00:05:35
   • Using Commenting to Simplify the View 00:04:22
7. Building the HTML Structure
   • Building the Main Layout Structure 00:07:18
   • Wrapping the Code into a Container Div 00:03:20
   • Building the Main Navigation Menu 00:06:45
   • Structuring the Content Boxes 00:03:19
   • Building the News Feed Area 00:03:56
   • Setting the Footer Structure 00:02:20
8. Constructing the High Res Layout
   • Getting Started with the High Res Layout 00:07:27
   • Formatting the Layouts Header 00:03:58
   • Formatting the Menu pt. 1 00:02:52
   • Formatting the Menu pt. 2 00:04:21
   • Formatting the Slideshow 00:03:32
   • Setting Up the Content Boxes 00:04:20
   • Applying Formatting to the News Feed 00:02:42
   • Finishing Off with the Footer 00:02:21
9. Building the Medium Res Layout
   • Setting Up the Medium Resolution Layout 00:04:25
   • Formatting the Header 00:01:58
   • Formatting the Navigation Menu 00:03:23
   • Applying Formatting to the Slideshow 00:04:14
   • Setting the Content Box Formatting 00:02:39
   • Adjusting the News Feed 00:02:17
   • Finalizing with the Footer 00:02:49
10. Constructing the Low Res Layout
    • Getting Started with the Low Res Layout 00:03:39
    • Formatting the Header and Nav Menu 00:03:44
    • Formatting the Content Boxes 00:03:07
    • Applying Formatting to the News Feed 00:01:27
    • Finishing Up with the Footer 00:03:19
11. Initial High Resolution Formatting
    • Getting the Design Underway 00:02:37
    • Formatting the Header 00:03:09
    • Formatting the Main Nav Menu 00:06:24
    • Settings for the Content Boxes 00:05:56
    • Applying Formats to the News Feed 00:04:31
    • Final Thoughts on the Design 00:02:42
    • Starting the Medium Res Formatting 00:02:00
    • Formatting the Header and Nav Menu 00:05:22
    • Formatting the Content Boxes 00:02:07
    • Setting Up the News Feed and Footer 00:03:36
    • Initial Low Resolution Formatting 00:03:02
    • Quickly Finishing the Low Res Design 00:07:09
12. Adding Graphics
    • Extracting the Logo from Photoshop 00:05:34
    • Inserting the Logo into the Code 00:05:09
    • Extracting the Slideshow 00:06:35
    • Getting the Slideshow Inserted 00:02:55
    • Pulling Out the First Content Box 00:04:17
    • Extracting the Remaining Content Boxes 00:03:06
    • Formatting the Content Box Images 00:05:25
    • Formatting the Medium Resolution Images 00:05:37
    • Styling the Low Resolution Images 00:07:49
13. Conclusion
    • Course Wrap Up 00:02:41
14. Credits
    • About the Author 00:00:56