Buy and Download - VTC HTML5 plus CSS3 Responsive Web Design

2013
VTC
Geoff Blake
8:30
English

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.

0 Welcome
1 Understanding Responsive Design
2 Resolutions We Will Be Targeting
3 A Look at What We Will Build
4 Setting Up the High Resolution Wireframe
5 Building the Header
6 Setting Up the Navigation and Slideshow
7 Constructing the Content Boxes
8 Creating the News Feed Area
9 Finishing Up with the Footer
10 Starting the Medium Resolution Wireframe
11 Building the Header and Navigation Area
12 Building the Slideshow and Content Boxes
13 Constructing the News Feed
14 Finishing Up with the Footer
15 Setting Up the Low Resolution Wireframe
16 Wireframing the Header Area
17 Constructing the Main Navigation Menu
18 Building the Content Boxes
19 Setting Up the News Feed Area
20 Finishing Up and Final Thoughts
21 Setting Up the Wireframe for Import
22 Opening the High Resolution in Photoshop
23 Breaking Apart the Wireframe pt. 1
24 Breaking Apart the Wireframe pt. 2
25 Breaking Apart the Wireframe pt. 3
26 Formatting the Header
27 Setting Up the Site Logo pt. 1
28 Setting Up the Site Logo pt. 2
29 Updating the Logo
30 Formatting the Navigation Menu
31 Inserting the Menu Items
32 Building the Slideshow
33 Setting Up the First Content Box
34 Inserting the Content Box Title
35 Building the Second Content Box pt. 1
36 Building the Second Content Box pt. 2
37 Building the Second Content Box pt. 3
38 Setting Up the Third Content Box
39 Inserting the Content Box Photo
40 Placing the Content Box Title
41 Inserting Placeholder Text
42 Finishing Up the Design
43 Preparing the Wireframe for Import
44 Bringing the Wireframe Into Photoshop
45 Extracting the Header
46 Pulling Out the Menu and Slideshow
47 Finishing Up the Wireframe BreakUp
48 Formatting the Header
49 Building the Navigation Menu
50 Formatting the Slideshow
51 Setting Up the First Content Box
52 Finishing Up the Content Boxes
53 Formatting the Footer
54 Bringing the Wireframe into Photoshop
55 Extracting the Header and Menu
56 Pulling Out the Content Boxes
57 Finishing Up the Wireframe Breakup
58 Formatting the Header
59 Building the Navigation Menu
60 Readjusting the Layout
61 Setting Up the First Content Box
62 Formatting the Second Content Box
63 Finishing Off the Design
64 Setting Up the HTML Page
65 Setting Up the External Style Sheet
66 Testing the External Style Sheet
67 Building the Three Media Queries
68 Testing the Media Queries
69 Using Commenting to Simplify the View
70 Building the Main Layout Structure
71 Wrapping the Code into a Container Div
72 Building the Main Navigation Menu
73 Structuring the Content Boxes
74 Building the News Feed Area
75 Setting the Footer Structure
76 Getting Started with the High Res Layout
77 Formatting the Layouts Header
78 Formatting the Menu pt. 1
79 Formatting the Menu pt. 2
80 Formatting the Slideshow
81 Setting Up the Content Boxes
82 Applying Formatting to the News Feed
83 Finishing Off with the Footer
84 Setting Up the Medium Resolution Layout
85 Formatting the Header
86 Formatting the Navigation Menu
87 Applying Formatting to the Slideshow
88 Setting the Content Box Formatting
89 Adjusting the News Feed
90 Finalizing with the Footer
91 Getting Started with the Low Res Layout
92 Formatting the Header and Nav Menu
93 Formatting the Content Boxes
94 Applying Formatting to the News Feed
95 Finishing Up with the Footer
96 Getting the Design Underway
97 Formatting the Header
98 Formatting the Main Nav Menu
99 Settings for the Content Boxes
100 Applying Formats to the News Feed
101 Final Thoughts on the Design
102 Starting the Medium Res Formatting
103 Formatting the Header and Nav Menu
104 Formatting the Content Boxes
105 Setting Up the News Feed and Footer
106 Initial Low Resolution Formatting
107 Quickly Finishing the Low Res Design
108 Extracting the Logo from Photoshop
109 Inserting the Logo into the Code
110 Extracting the Slideshow
111 Getting the Slideshow Inserted
112 Pulling Out the First Content Box
113 Extracting the Remaining Content Boxes
114 Formatting the Content Box Images
115 Formatting the Medium Resolution Images
116 Styling the Low Resolution Images
117 Course Wrap Up
118 About the Author

http://www.vtc.com/