Design
Web Design
Responsive Design
Creating Responsive Web Design
4.6 (424 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
40,446 students enrolled

Creating Responsive Web Design

Learn how to optimize your webpages for different screen sizes and platforms.
4.6 (424 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
40,446 students enrolled
Created by Chris Converse
Last updated 10/2014
English
English [Auto]
Preview this course
Creating Responsive Web Design
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn CSS3 media queries.
  • Integrate Google's HTML5 Shiv JavaScript.
  • Make CSS rules specifically for Internet Explorer.
  • Learn image slicing and optimization techniques in Photoshop.
  • Develop strategies for HTML markup.
  • Consider design adaptations for multiple screens.
  • and much more...
Requirements
  • Text editor
  • Positive attitude : )
Description

Learn how to create websites that adjust to any screen size while optimizing download speeds.

  • HTML5, CSS3, and Media Queries
  • HTML5Shiv for Internet Explorer
  • Photoshop Image Optimization and Slicing
  • Design Adaptations for Various Screens

Create Websites that are Optimized for All Screens
Because people use a variety of devices to access the Internet, it's important that, as a website designer, you know how to create a site that will conform to any screen size. Today's websites should be able to resize and rearrange elements and content automatically so that any user on any device from anywhere in the world can access your site and browse it with ease. And building a website that's compatible with the many browsers available from both the past and the present is also an integral part of launching a strong site.

Not every website designer knows how to create these "intelligent" websites. With the right training, you can differentiate yourself from the competition and potentially expand your client base.

Contents and Overview
In just 1.5 hours and through 11 lectures, you'll learn all that you need to know to create a dazzling website using CSS3 and HTML5. You'll understand how to make your site backwards compatible with old browsers, and how to set it up using CSS rules so that it will adjust itself to any screen size while optimizing download speeds. This course, which is ideal for web developers, graphic designers, usability experts, and interaction designers, will even provide you with CSS, HTML, and Photoshop templates that you can use to design your own sites.

Upon successful completion of this course, you'll be confident in your abilities to design a customized website that's optimized to work on any computer or mobile device. From the creation of CSS files to the design of a site's layout, text, and graphics, you'll be fully versed in launching a site that's going to appear just as you intended, regardless of what screen your visitors will be using.

Who this course is for:
  • Graphic Designers
  • Web Developers
  • Interaction Designers
  • Usability Experts
Course content
Expand all 33 lectures 03:22:50
+ – Beginning Your Project and Making Web Graphics
7 lectures 31:30

See a brief overview of the web page we'll be creating, which includes a responsive design for varying screen sizes, smaller download sizes for small screens, as well as adaptive usability techniques.

Course Introduction
Preview 04:53

Learn about various text editors you can use during this course.

Tools you need of this course
Preview 01:12

If you have never worked with HTML or CSS, this video will get show the basic relationship between the two technologies. If you have worked with HTML and CSS, skip this video.

Introduction to HTML and CSS
Preview 08:45

Download the Project Files (link above) and begin our project by creating a root directory for our web page.

Creating your project root
00:56

Based on the design, we'll formulate a plan for converting the design composition to HTML and CSS. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.

Examining the design composition
02:23

Finally, we'll save the various banner graphics for our responsive design. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.

Slicing and optimizing the banner graphics
09:23

Now we'll save out the graphics for the template and content graphics. If you'd like to skip creating the graphics, there is also a "Skip Photoshop" folder with a copy of all of the final web graphics you can use in your web page.

Optimizing the template and content graphics
03:58
+ – Creating HTML and CSS for Web Layout
11 lectures 57:09

Adding the starter files from the Project Files. Be sure to download the project files form Section 1, Lecture 4.

Adding the starter files to your project
01:20

Creating links to external CSS files from your HTML file.

Linking CSS files to an HTML file
05:32

Adding a meta tag for the viewport and the Google HTML5 Shiv for IE 8 and below.

Adding tags to the head area of the HTML file
Preview 02:35

Creating the main HTML content containers for our web layout.

Creating the main content containers
03:13

Adding HTML containers for our promo boxes and the navigation links.

Adding promo containers and adding navigation links
04:53

Adding sample content from our code snippets.

Adding content to the containers
02:49

Adding CSS styles for the background and page container

Style the background and page container
07:51

Adding style to our typography with CSS.

Adding typographic styles
05:37

Creating compound CSS rules to target more specific elements in the HTML page.

Creating compound CSS rules
10:49

Creating CSS rules specifically for web layout.

Creating CSS rules for layout
05:40

Setting up CSS layout rules for the promos and navigation.

Setting CSS rules to floating promo containers
06:50
+ – Working with CSS Media Queries
4 lectures 21:52

Writing an inline CSS3 media query to target the copyright text.

Adding a CSS rule within an inline CS3 media query
Preview 02:15

Creating CSS rules to optimize the layout for medium screens.

Adding CSS rules for medium screen sizes
05:26

Creating CSS rules to optimize the layout for small screens.

Adding CSS rules for small screen sizes
06:51

Repositioning the navigation for small screens.

Styling the navigation for small screens
07:20
+ – Getting Started (Original Course)
3 lectures 05:15

This introducion shows this web design final project adapting to various browsers, platforms, and screen sizes.

Introduction
Preview 04:23

A quick walkthrough of the files provided with this course.

Review the Project Files
Preview 00:52

Contains the final HTML and CSS project files, as well as the pre-slices native Adobe Photoshop templates.

Project Files
8.3 MB
+ – Optimizing Your Web Graphics (Original Course)
1 lecture 08:00

Learn to save individual graphics from a larger canvas in Adobe Photoshop. In addition, learn how the graphics are prepared and optimized for multiple screens and bandwidth considerations.

Slicing and Optimizing Graphics
08:00
+ – Adding HTML for Structure and Content (Original Course)
2 lectures 13:48

After creating our HTML5 document, we'll add the necessary markup for the outter-most content containers of our web design.

Creating Content Containers
07:19

We'll add sample content into or content containers, including headings, sidebar container, lists, and anchor links for the navigation.

Adding Sample Content
06:29
+ – Creating CSS Rules for All Screens (Original Course)
3 lectures 43:14

Create two new CSS files and link them into the HTML file. Next, we'll link the CSS file, and then link in the Google HTML5 Shiv JavaScript using a conditional statement that is only targeted to IE 7 and 8.

Creating CSS Files
05:27

We'll start by creating the CSS rules that willbe used for styling the text and design elements.

CSS for Styling Text
14:34

Create CSS Rules that manipulate the content containers to replicate the desired layout.

CSS for Layout
23:13
+ – Creating CSS Rules for Mobile Screens (Original Course)
2 lectures 22:02
Use CSS3 Media Queries to alter the layout based on medium-sized screens.
CSS for Medium Screens
07:53

Use CSS3 Media Queries to alter the layout based on small-sized screens.

CSS for Small Screens
14:09