What you'll learn

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.

Course content

14 sections • 119 lectures • 8h 40m total length

Welcome2:49
Understanding Responsive Design3:57
Resolutions We Will Be Targeting3:53
Define three target resolutions for responsive design: mobile up to 480px, tablet 481–1023px, and desktop 1024px and up. Implement parallel layouts with CSS media queries.
A Look at What We Will Build3:34
Explore building a responsive three-layout website for desktop, tablet, and mobile, using wireframes in Illustrator, design mockups in Photoshop, and HTML and CSS with three media queries in external CSS.

Setting Up the High Resolution Wireframe4:38
Building the Header6:46
Setting Up the Navigation and Slideshow6:57
Set up a main navigation menu under the header and add a centered slideshow placeholder using precise dimensions (840 by 300), aligning to the artboard for a clean wireframe layout.
Constructing the Content Boxes5:59
Creating the News Feed Area7:35
Finishing Up with the Footer2:06
Starting the Medium Resolution Wireframe3:24
Building the Header and Navigation Area4:58
Building the Slideshow and Content Boxes6:37
Constructing the News Feed5:34
Finishing Up with the Footer2:51
Finish the medium resolution wireframe by adding a 750 by 50 footer rectangle, adjusting fill and stroke, and aligning it to the artboard edges.
Setting Up the Low Resolution Wireframe3:07
Wireframing the Header Area3:57
Constructing the Main Navigation Menu4:19
Building the Content Boxes3:10
Setting Up the News Feed Area5:22
Finishing Up and Final Thoughts7:04

Setting Up the Wireframe for Import3:16
Learn to prep wireframes for three layouts by removing strokes in Illustrator and exporting clean assets for Photoshop, covering header, menu, slideshow, content boxes, and footer.
Opening the High Resolution in Photoshop4:20
Import a high resolution wire frame layout from Illustrator into Photoshop, preserve dimensions by converting units to pixels, and save as a layered Photoshop file for modular design.
Breaking Apart the Wireframe pt. 15:00
Breaking Apart the Wireframe pt. 23:10
Breaking Apart the Wireframe pt. 35:35
Formatting the Header4:28
Setting Up the Site Logo pt. 16:47
Setting Up the Site Logo pt. 24:32
Refine the site logo by adjusting stroke stacking in Illustrator's appearance panel, then import as a vector smart object into Photoshop to enable live updates.
Updating the Logo4:53
Formatting the Navigation Menu3:09
Inserting the Menu Items6:51
Building the Slideshow6:57
Setting Up the First Content Box6:57
Inserting the Content Box Title7:21
Building the Second Content Box pt. 14:33
Building the Second Content Box pt. 23:41
Building the Second Content Box pt. 35:31
Apply Illustrator graphic styles to the second content box text, paste as a smart object in Photoshop, and organize the content box 2 layer folder.
Setting Up the Third Content Box4:01
Inserting the Content Box Photo4:13
Placing the Content Box Title2:12
Inserting Placeholder Text5:48
Finishing Up the Design3:44
Apply final touches to the responsive layout by adding a solid black footer overlay, duplicating the main navigation into the footer, and repositioning layers in Photoshop.

Preparing the Wireframe for Import2:53
Bringing the Wireframe Into Photoshop3:57
Extracting the Header3:42
Extract the header from the wireframe in Photoshop using the rectangular marquee to select 750 by 130 pixels. Create a new header layer via cut.
Pulling Out the Menu and Slideshow2:26
Finishing Up the Wireframe BreakUp2:40
Formatting the Header4:58
Apply the high-resolution header to the medium-resolution wireframe by sampling the blue color with color overlay, dragging in the logo, and grouping header elements.
Building the Navigation Menu3:45
Formatting the Slideshow3:20
Setting Up the First Content Box6:13
Finishing Up the Content Boxes6:26
Finish arranging the remaining content boxes by duplicating layer styles to boxes two and three, aligning titles and imagery, and organizing layers into groups for a clean, responsive layout.
Formatting the Footer2:57

Building the Main Layout Structure7:17
Learn to build the main layout structure using HTML5 elements—header, nav, divs with IDs and classes, content boxes, articles, and a footer—driven by three media queries and an external stylesheet.
Wrapping the Code into a Container Div3:20
Building the Main Navigation Menu6:45
Structuring the Content Boxes3:19
Building the News Feed Area3:55
Setting the Footer Structure2:20

Getting Started with the High Res Layout7:26
Formatting the Layouts Header3:58
Formatting the Menu pt. 12:52
Formatting the Menu pt. 24:21
Explore applying a compound CSS rule to nav menus, turning list items inside a nav into a horizontal, spaced inline menu and refining spacing with a vertical pipe separator.
Formatting the Slideshow3:32
Setting Up the Content Boxes4:20
Applying Formatting to the News Feed2:42
Finishing Off with the Footer2:21

Requirements

Adobe Illustrator and Adobe Photoshop (recommended)

Description

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. This title is a self-paced software training course delivered via pre-recorded video. We do not provide additional information outside of the posted content.

Work files for this course can be downloaded from the first lecture.

Who this course is for:

Web Designers with working knowledge of HTML

What you'll learn

Explore related topics

Course content

Getting Started4 lectures • 14min

Wireframing Layouts in Illustrator17 lectures • 1hr 24min

Building the Designs in Photoshop22 lectures • 1hr 47min

Setting Up for the Medium Width Design11 lectures • 43min

Setting Up for the Low Width Design10 lectures • 46min

Getting Set Up for Responsive Design6 lectures • 31min

Building the HTML Structure6 lectures • 27min

Constructing the High Res Layout8 lectures • 32min

Building the Medium Res Layout7 lectures • 22min

Constructing the Low Res Layout5 lectures • 15min

Requirements

Description

Who this course is for: