HTML5 + CSS3 Responsive Web Design
by Geoff Blake
Start the free chapterLeap 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.
Course content
Getting Started4 lessons
Wireframing Layouts in Illustrator17 lessons
- Setting Up the High Resolution Wireframe4:381 credit or ad
- Building the Header6:471 credit or ad
- Setting Up the Navigation and Slideshow6:581 credit or ad
- Constructing the Content Boxes6:001 credit or ad
- Creating the News Feed Area7:361 credit or ad
- Finishing Up with the Footer2:061 credit or ad
- Starting the Medium Resolution Wireframe3:251 credit or ad
- Building the Header and Navigation Area4:591 credit or ad
- Building the Slideshow and Content Boxes6:381 credit or ad
- Constructing the News Feed5:351 credit or ad
- Finishing Up with the Footer2:511 credit or ad
- Setting Up the Low Resolution Wireframe3:081 credit or ad
- Wireframing the Header Area3:581 credit or ad
- Constructing the Main Navigation Menu4:191 credit or ad
- Building the Content Boxes3:111 credit or ad
- Setting Up the News Feed Area5:221 credit or ad
- Finishing Up and Final Thoughts7:051 credit or ad
Building the Designs in Photoshop22 lessons
- Setting Up the Wireframe for Import3:171 credit or ad
- Opening the High Resolution in Photoshop4:201 credit or ad
- Breaking Apart the Wireframe pt. 15:001 credit or ad
- Breaking Apart the Wireframe pt. 23:101 credit or ad
- Breaking Apart the Wireframe pt. 35:351 credit or ad
- Formatting the Header4:281 credit or ad
- Setting Up the Site Logo pt. 16:471 credit or ad
- Setting Up the Site Logo pt. 24:331 credit or ad
- Updating the Logo4:541 credit or ad
- Formatting the Navigation Menu3:091 credit or ad
- Inserting the Menu Items6:511 credit or ad
- Building the Slideshow6:581 credit or ad
- Setting Up the First Content Box6:571 credit or ad
- Inserting the Content Box Title7:221 credit or ad
- Building the Second Content Box pt. 14:331 credit or ad
- Building the Second Content Box pt. 23:411 credit or ad
- Building the Second Content Box pt. 35:321 credit or ad
- Setting Up the Third Content Box4:011 credit or ad
- Inserting the Content Box Photo4:131 credit or ad
- Placing the Content Box Title2:131 credit or ad
- Inserting Placeholder Text5:491 credit or ad
- Finishing Up the Design3:441 credit or ad
Setting Up for the Medium Width Design11 lessons
- Preparing the Wireframe for Import2:531 credit or ad
- Bringing the Wireframe Into Photoshop3:571 credit or ad
- Extracting the Header3:421 credit or ad
- Pulling Out the Menu and Slideshow2:261 credit or ad
- Finishing Up the Wireframe BreakUp2:411 credit or ad
- Formatting the Header4:591 credit or ad
- Building the Navigation Menu3:451 credit or ad
- Formatting the Slideshow3:201 credit or ad
- Setting Up the First Content Box6:141 credit or ad
- Finishing Up the Content Boxes6:271 credit or ad
- Formatting the Footer2:571 credit or ad
Setting Up for the Low Width Design10 lessons
- Bringing the Wireframe into Photoshop6:031 credit or ad
- Extracting the Header and Menu3:081 credit or ad
- Pulling Out the Content Boxes2:141 credit or ad
- Finishing Up the Wireframe Breakup1:231 credit or ad
- Formatting the Header3:481 credit or ad
- Building the Navigation Menu6:331 credit or ad
- Readjusting the Layout7:171 credit or ad
- Setting Up the First Content Box5:591 credit or ad
- Formatting the Second Content Box6:071 credit or ad
- Finishing Off the Design3:371 credit or ad
Getting Set Up for Responsive Design6 lessons
Building the HTML Structure6 lessons
Constructing the High Res Layout8 lessons
- Getting Started with the High Res Layout7:271 credit or ad
- Formatting the Layouts Header3:581 credit or ad
- Formatting the Menu pt. 12:521 credit or ad
- Formatting the Menu pt. 24:211 credit or ad
- Formatting the Slideshow3:321 credit or ad
- Setting Up the Content Boxes4:201 credit or ad
- Applying Formatting to the News Feed2:421 credit or ad
- Finishing Off with the Footer2:211 credit or ad
Building the Medium Res Layout7 lessons
- Setting Up the Medium Resolution Layout4:251 credit or ad
- Formatting the Header1:581 credit or ad
- Formatting the Navigation Menu3:231 credit or ad
- Applying Formatting to the Slideshow4:141 credit or ad
- Setting the Content Box Formatting2:391 credit or ad
- Adjusting the News Feed2:171 credit or ad
- Finalizing with the Footer2:491 credit or ad
Constructing the Low Res Layout5 lessons
Initial High Resolution Formatting12 lessons
- Getting the Design Underway2:371 credit or ad
- Formatting the Header3:091 credit or ad
- Formatting the Main Nav Menu6:241 credit or ad
- Settings for the Content Boxes5:561 credit or ad
- Applying Formats to the News Feed4:311 credit or ad
- Final Thoughts on the Design2:421 credit or ad
- Starting the Medium Res Formatting2:001 credit or ad
- Formatting the Header and Nav Menu5:221 credit or ad
- Formatting the Content Boxes2:071 credit or ad
- Setting Up the News Feed and Footer3:361 credit or ad
- Initial Low Resolution Formatting3:021 credit or ad
- Quickly Finishing the Low Res Design7:091 credit or ad
Adding Graphics9 lessons
- Extracting the Logo from Photoshop5:341 credit or ad
- Inserting the Logo into the Code5:091 credit or ad
- Extracting the Slideshow6:351 credit or ad
- Getting the Slideshow Inserted2:551 credit or ad
- Pulling Out the First Content Box4:171 credit or ad
- Extracting the Remaining Content Boxes3:061 credit or ad
- Formatting the Content Box Images5:251 credit or ad
- Formatting the Medium Resolution Images5:371 credit or ad
- Styling the Low Resolution Images7:491 credit or ad