United States HTML5 + CSS3 Responsive Web Design Training
CD Contents For This Title
All the chapters and lesson contents of HTML5 + CSS3 Responsive Web Design are listed below.
To help you evaluate our training, we have made some of the tutorials for HTML5 + CSS3 Responsive Web Design freely available. Click on any of the linked lesson listings below to preview FREE!
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.
Choose your media type:
To view the Free Tutorials listed below, you must have QuickTime installed. Please note that the online free samples have been compressed for quicker downloads. Purchased CDs have higher sound and video quality.Monitor resolution needs to be set to at least 1024 by 768 to view the entire movie.
Hide This|
Getting Started
|
||
| Welcome | (02:50) | |
| Understanding Responsive Design | (03:57) | |
| Resolutions We Will Be Targeting | (03:53) | |
| A Look at What We Will Build | (03:34) | |
|
Wireframing Layouts in Illustrator
|
||
| Setting Up the High Resolution Wireframe | (04:38) | |
| Building the Header | (06:47) | |
| Setting Up the Navigation and Slideshow | (06:58) | |
| Constructing the Content Boxes | (06:00) | |
| Creating the News Feed Area | (07:36) | |
| Finishing Up with the Footer | (02:06) | |
| Starting the Medium Resolution Wireframe | (03:25) | |
| Building the Header and Navigation Area | (04:59) | |
| Building the Slideshow and Content Boxes | (06:38) | |
| Constructing the News Feed | (05:35) | |
| Finishing Up with the Footer | (02:51) | |
| Setting Up the Low Resolution Wireframe | (03:08) | |
| Wireframing the Header Area | (03:58) | |
| Constructing the Main Navigation Menu | (04:19) | |
| Building the Content Boxes | (03:11) | |
| Setting Up the News Feed Area | (05:22) | |
| Finishing Up and Final Thoughts | (07:05) | |
|
Building the Designs in Photoshop
|
||
| Setting Up the Wireframe for Import | (03:17) | |
| Opening the High Resolution in Photoshop | (04:20) | |
| Breaking Apart the Wireframe pt. 1 | (05:00) | |
| Breaking Apart the Wireframe pt. 2 | (03:10) | |
| Breaking Apart the Wireframe pt. 3 | (05:35) | |
| Formatting the Header | (04:28) | |
| Setting Up the Site Logo pt. 1 | (06:47) | |
| Setting Up the Site Logo pt. 2 | (04:33) | |
| Updating the Logo | (04:54) | |
| Formatting the Navigation Menu | (03:09) | |
| Inserting the Menu Items | (06:51) | |
| Building the Slideshow | (06:58) | |
| Setting Up the First Content Box | (06:57) | |
| Inserting the Content Box Title | (07:22) | |
| Building the Second Content Box pt. 1 | (04:33) | |
| Building the Second Content Box pt. 2 | (03:41) | |
| Building the Second Content Box pt. 3 | (05:32) | |
| Setting Up the Third Content Box | (04:01) | |
| Inserting the Content Box Photo | (04:13) | |
| Placing the Content Box Title | (02:13) | |
| Inserting Placeholder Text | (05:49) | |
| Finishing Up the Design | (03:44) | |
|
Setting Up for the Medium Width Design
|
||
| Preparing the Wireframe for Import | (02:53) | |
| Bringing the Wireframe Into Photoshop | (03:57) | |
| Extracting the Header | (03:42) | |
| Pulling Out the Menu and Slideshow | (02:26) | |
| Finishing Up the Wireframe BreakUp | (02:41) | |
| Formatting the Header | (04:59) | |
| Building the Navigation Menu | (03:45) | |
| Formatting the Slideshow | (03:20) | |
| Setting Up the First Content Box | (06:14) | |
| Finishing Up the Content Boxes | (06:27) | |
| Formatting the Footer | (02:57) | |
|
Setting Up for the Low Width Design
|
||
| Bringing the Wireframe into Photoshop | (06:03) | |
| Extracting the Header and Menu | (03:08) | |
| Pulling Out the Content Boxes | (02:14) | |
| Finishing Up the Wireframe Breakup | (01:23) | |
| Formatting the Header | (03:48) | |
| Building the Navigation Menu | (06:33) | |
| Readjusting the Layout | (07:17) | |
| Setting Up the First Content Box | (05:59) | |
| Formatting the Second Content Box | (06:07) | |
| Finishing Off the Design | (03:37) | |
|
Getting Set Up for Responsive Design
|
||
| Setting Up the HTML Page | (07:11) | |
| Setting Up the External Style Sheet | (05:50) | |
| Testing the External Style Sheet | (02:42) | |
| Building the Three Media Queries | (05:41) | |
| Testing the Media Queries | (05:35) | |
| Using Commenting to Simplify the View | (04:22) | |
|
Building the HTML Structure
|
||
| Building the Main Layout Structure | (07:18) | |
| Wrapping the Code into a Container Div | (03:20) | |
| Building the Main Navigation Menu | (06:45) | |
| Structuring the Content Boxes | (03:19) | |
| Building the News Feed Area | (03:56) | |
| Setting the Footer Structure | (02:20) | |
|
Constructing the High Res Layout
|
||
| Getting Started with the High Res Layout | (07:27) | |
| Formatting the Layouts Header | (03:58) | |
| Formatting the Menu pt. 1 | (02:52) | |
| Formatting the Menu pt. 2 | (04:21) | |
| Formatting the Slideshow | (03:32) | |
| Setting Up the Content Boxes | (04:20) | |
| Applying Formatting to the News Feed | (02:42) | |
| Finishing Off with the Footer | (02:21) | |
|
Building the Medium Res Layout
|
||
| Setting Up the Medium Resolution Layout | (04:25) | |
| Formatting the Header | (01:58) | |
| Formatting the Navigation Menu | (03:23) | |
| Applying Formatting to the Slideshow | (04:14) | |
| Setting the Content Box Formatting | (02:39) | |
| Adjusting the News Feed | (02:17) | |
| Finalizing with the Footer | (02:49) | |
|
Constructing the Low Res Layout
|
||
| Getting Started with the Low Res Layout | (03:39) | |
| Formatting the Header and Nav Menu | (03:44) | |
| Formatting the Content Boxes | (03:07) | |
| Applying Formatting to the News Feed | (01:27) | |
| Finishing Up with the Footer | (03:19) | |
|
Initial High Resolution Formatting
|
||
| Getting the Design Underway | (02:37) | |
| Formatting the Header | (03:09) | |
| Formatting the Main Nav Menu | (06:24) | |
| Settings for the Content Boxes | (05:56) | |
| Applying Formats to the News Feed | (04:31) | |
| Final Thoughts on the Design | (02:42) | |
| Starting the Medium Res Formatting | (02:00) | |
| Formatting the Header and Nav Menu | (05:22) | |
| Formatting the Content Boxes | (02:07) | |
| Setting Up the News Feed and Footer | (03:36) | |
| Initial Low Resolution Formatting | (03:02) | |
| Quickly Finishing the Low Res Design | (07:09) | |
|
Adding Graphics
|
||
| Extracting the Logo from Photoshop | (05:34) | |
| Inserting the Logo into the Code | (05:09) | |
| Extracting the Slideshow | (06:35) | |
| Getting the Slideshow Inserted | (02:55) | |
| Pulling Out the First Content Box | (04:17) | |
| Extracting the Remaining Content Boxes | (03:06) | |
| Formatting the Content Box Images | (05:25) | |
| Formatting the Medium Resolution Images | (05:37) | |
| Styling the Low Resolution Images | (07:49) | |
|
Conclusion
|
||
| Course Wrap Up | (02:41) | |
|
Credits
|
||
| About the Author | (00:56) | |
Email this Page
Send us FeedbackTitle Information / Pricing
| Title: | HTML5 + CSS3 Responsive Web Design |
| Author: | Geoff Blake |
| SKU: | 34431 |
| ISBN: | 978-1-61866-103-6 |
| Release Date: | 2013-05-31 |
| Price: | |
| Duration: | 8.5 hrs / 119 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7 |
Online University Access all our Training for only 30
The Online University provides unlimited 24/7 access to ALL of VTC's incredible training content for the low fixed price of just $30/month (USD)
SIGNUP NOW
LEARN MORE » Related Titles
Select Bandwidth
Now Shipping
Client Testimonials
I love LOVE your service and I have recommended it to everyone I see in the web department of bookstores. I have a new life because of your...
Jennifer Gooden