HTML5 + CSS3 Responsive Web Design

Leap into the world of adaptive web design with HTML5 & CSS3 Responsive Web Design!
4.7 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
23 students enrolled
$40
Take This Course
  • Lectures 119
  • Length 8.5 hours
  • Skill Level Expert Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2013 English

Course 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.

What are the requirements?

  • Adobe Illustrator and Adobe Photoshop (recommended)

What am I going to get from this course?

  • 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.

What is the target audience?

  • Web Designers with working knowledge of HTML

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Getting Started
Welcome
Preview
02:49
Understanding Responsive Design
Preview
03:57
Resolutions We Will Be Targeting
Preview
03:53
A Look at What We Will Build
Preview
03:34
Section 2: Wireframing Layouts in Illustrator
Setting Up the High Resolution Wireframe
Preview
04:38
Building the Header
Preview
06:46
Setting Up the Navigation and Slideshow
Preview
06:57
Constructing the Content Boxes
Preview
05:59
Creating the News Feed Area
Preview
07:35
Finishing Up with the Footer
Preview
02:06
Starting the Medium Resolution Wireframe
Preview
03:24
Building the Header and Navigation Area
Preview
04:58
Building the Slideshow and Content Boxes
Preview
06:37
Constructing the News Feed
Preview
05:34
Finishing Up with the Footer
Preview
02:51
Setting Up the Low Resolution Wireframe
Preview
03:07
Wireframing the Header Area
Preview
03:57
Constructing the Main Navigation Menu
Preview
04:19
Building the Content Boxes
Preview
03:10
Setting Up the News Feed Area
Preview
05:22
Finishing Up and Final Thoughts
Preview
07:04
Section 3: Building the Designs in Photoshop
Setting Up the Wireframe for Import
Preview
03:16
Opening the High Resolution in Photoshop
Preview
04:20
Breaking Apart the Wireframe pt. 1
Preview
05:00
Breaking Apart the Wireframe pt. 2
Preview
03:10
Breaking Apart the Wireframe pt. 3
Preview
05:35
Formatting the Header
Preview
04:28
Setting Up the Site Logo pt. 1
Preview
06:47
Setting Up the Site Logo pt. 2
Preview
04:32
Updating the Logo
Preview
04:53
Formatting the Navigation Menu
Preview
03:09
Inserting the Menu Items
Preview
06:51
Building the Slideshow
Preview
06:57
Setting Up the First Content Box
Preview
06:57
Inserting the Content Box Title
Preview
07:21
Building the Second Content Box pt. 1
Preview
04:33
Building the Second Content Box pt. 2
Preview
03:41
Building the Second Content Box pt. 3
Preview
05:31
Setting Up the Third Content Box
Preview
04:01
Inserting the Content Box Photo
Preview
04:13
Placing the Content Box Title
Preview
02:12
Inserting Placeholder Text
Preview
05:48
Finishing Up the Design
Preview
03:44
Section 4: 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:40
Formatting the Header
04:58
Building the Navigation Menu
03:45
Formatting the Slideshow
03:20
Setting Up the First Content Box
06:13
Finishing Up the Content Boxes
06:26
Formatting the Footer
02:57
Section 5: 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:47
Building the Navigation Menu
06:33
Readjusting the Layout
07:17
Setting Up the First Content Box
05:58
Formatting the Second Content Box
06:06
Finishing Off the Design
03:37
Section 6: Getting Set Up for Responsive Design
Setting Up the HTML Page
07:10
Setting Up the External Style Sheet
05:49
Testing the External Style Sheet
02:42
Building the Three Media Queries
05:40
Testing the Media Queries
05:35
Using Commenting to Simplify the View
04:21
Section 7: Building the HTML Structure
Building the Main Layout Structure
07:17
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:55
Setting the Footer Structure
02:20
Section 8: Constructing the High Res Layout
Getting Started with the High Res Layout
07:26
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
Section 9: 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:48

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

VTC Software Training, Affordable, Comprehensive Software Training

VTC is one of the world's leading producers of online computer and software training, supplying richly diverse courses of informative and inspiring tutorials. Created on the idea that anyone should have the ability to learn to use computer software on their own time, VTC has produced tens of thousands of hours of extraordinarily valuable, insightful, and easy to follow tutorials and delivers them for a fraction of the cost of other training methods. Our training authors are some of the most accomplished in their respective fields. The tutorials that could make the difference in your new job, promotion, or school advancement are always available and only a click away.

Ready to start learning?
Take This Course