Learn Responsive Web Design Video Training Tutorial DVD

Total Duration : 6h 45m
Level : Beginner & Intermediate

 Course 01 :Creating a Responsive Website Design
Duration : 2h 20m 
Level : Beginner

 Introduction 7m 39s
Previewing the final project 4m 0s
About the exercise files 1m 15s
Exploring the software you'll need to complete this course 49s
Beginning your project 1m 35s

 1. For Those Using Dreamweaver 3m 45s
What to expect with Design view in Dreamweaver 2m 1s
Accessing code for HTML and CSS in Dreamweaver 1m 44s

2. Setting Up Your Project 9m 19s
Planning your layout 2m 47s
Adding the main HTML containers 1m 47s
Adding the promo containers 31s
Adding links and the copyright 1m 47s
Adding sample content into the HTML containers 2m 27s

3. Creating Web Graphics 8m 37s
Creating and slicing multiple-sized banner images 5m 53s
Exporting content and template artwork 2m 44s

4. Preparing the HTML File 7m 27s
Linking CSS files for all screen sizes 1m 42s
Linking CSS files based on screen size with media queries 2m 13s
Enabling Internet Explorer 7 and 8 to understand HTML5 1m 25s
Setting the viewport scale 2m 7s

5. Creating CSS Rules Across All Screens 9m 0s
Adding the background pattern and the page container color 3m 43s
Styling the headings 2m 17s
Styling the body text and the links 1m 15s
Styling the footer 1m 45s

6. Preparing the HTML File 9m 49s
Understanding compound rules 2m 58s
Styling the promo links with a CSS sprite 2m 48s
Styling the promo text 1m 26s
Adding the promo images with CSS 2m 37s

7. Creating the Content and the Layout Containers 7m 46s
Adding CSS rules for layout 2m 8s
Styling the header on large screens 2m 34s
Styling the article on large screens 3m 4s

8. Styling the Promos 6m 29s
Styling the navigation links 2m 1s
Styling the navigation for large screens 1m 16s
Positioning the navigation for large screens 1m 37s
Clearing the float for the promos 1m 35s

9. Working with CSS Rules 2m 47s
Adding CSS rules with inline media queries 2m 47s

10. Styling for Medium Screens 6m 0s
Styling the header for medium screens 2m 32s
Styling the navigation for medium screens 1m 10s
Styling the promos for medium screens 2m 18s

11. Styling for Small Screens 12m 7s
Styling the header for small screens 2m 27s
Styling the navigation for small screens 1m 12s
Styling the navigation links for small screens 4m 13s
Styling the promos for small screens 2m 57s
Styling the footer for small screens 1m 18s

12. Supporting High-Definition (Retina) Screens 13m 12s
Additional exercise files for this chapter 1m 4s
Creating double-sized graphics for high-definition screens 4m 45s
Replacing the promo graphics with CSS media queries 2m 42s
Replacing the logo and banner graphics with CSS media queries 4m 41s
13. Creating Markup and Styles for Print 35m 46s
Additional exercise files for this chapter 1m 7s
Creating graphics optimized for printing 3m 35s
Including additional content for printed pages 2m 0s
Creating print-friendly CSS rules 5m 14s
Revealing hyperlink URLs for a printed page 4m 28s
Redefining the promo and footer styles 2m 19s
Background images vs. image tags 1m 52s
Image option one: Using background images 5m 15s
Image option two: Adding image tags 6m 44s
Adding CSS page breaks 3m 12s
Conclusion 57s


Course 2: Learn Responsive Web Design
Duration : 4h 31m
Level : Intermediate

• Introduction 8:56
• A Fluid Foundation 12:06
• IE Rounding and the Semantic Grid System 8:06
• Flexible Content 15:28
• Media Queries 18:15
• Other RWD Considerations 8:06
• RWD Proces 27:08
• A Myth about Process 6:55
• Content Priority Prototype 5:46
• Style Prototype 14:26
• Applying RWD Style 1:01:00
• The Basic Structure 7:52
• CSS files (using Sass) 7:09
• Implementing RWD Styles 9:19
• Using EM-Based Media Queries 5:48
• RWD Patterns: Navigation 11:41
• RWD Patterns: Tables and Images 11:33
• RWD Patterns: Off-Canvas Layouts 7:36
• RWD Retrofitting 49:13
• From Fixed to Fluid 5:03
• Retrofitting Twitter.com 12:25
• Retrofitting Images 5:29
• Retrofitting Tables 14:41
• Retrofitting Media Queries 5:12
• Client Interaction 6:21
• JS to the Rescue 22:04
• Media Queries 11:36
• Conditional Loading 10:28
• Lessons Learned  24:46
• Pricing 12:13
• Prioritization 6:14
• Testing, Consistency, and Experimentation 6:17
• What's Next in RWD? 15:55
• The Responsive Dip 15:55