Creating Responsive Web Design

Learn how to optimize your webpages for different screen sizes and platforms.

4.03 (633 reviews)
Udemy
platform
English
language
Web Design
category
instructor
Creating Responsive Web Design
41,497
students
3.5 hours
content
Oct 2014
last update
$19.99
regular price

What you will 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...

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.

Content

Beginning Your Project and Making Web Graphics

Course Introduction
Tools you need of this course
Introduction to HTML and CSS
Creating your project root
Examining the design composition
Slicing and optimizing the banner graphics
Optimizing the template and content graphics

Creating HTML and CSS for Web Layout

Adding the starter files to your project
Linking CSS files to an HTML file
Adding tags to the head area of the HTML file
Creating the main content containers
Adding promo containers and adding navigation links
Adding content to the containers
Style the background and page container
Adding typographic styles
Creating compound CSS rules
Creating CSS rules for layout
Setting CSS rules to floating promo containers

Working with CSS Media Queries

Adding a CSS rule within an inline CS3 media query
Adding CSS rules for medium screen sizes
Adding CSS rules for small screen sizes
Styling the navigation for small screens

Getting Started (Original Course)

Introduction
Review the Project Files
Project Files

Optimizing Your Web Graphics (Original Course)

Slicing and Optimizing Graphics

Adding HTML for Structure and Content (Original Course)

Creating Content Containers
Adding Sample Content

Creating CSS Rules for All Screens (Original Course)

Creating CSS Files
CSS for Styling Text
CSS for Layout

Creating CSS Rules for Mobile Screens (Original Course)

CSS for Medium Screens
CSS for Small Screens

Reviews

Memo
January 28, 2013
For a non designer with basic html knowledge like me it is the missing piece i ve had looking for a long time..
Igor
January 14, 2013
This course is very informative and straight to the point. I am familiar with HTML and CSS and I had no problem following along. It guides you through all the necessary steps required to create a responsive website. The author is also using best practices that will speed up the page load on mobile devices.
Darren
December 14, 2012
Professional videos that are easy to follow along with. Chris really knows what he is talking about. Will be trying to incorporate these principles in future websites of my own. Thanks.
Nino
October 26, 2012
The best part of this course is it's use of time. If you are already familiar with HTML and CSS you are able follow along very easily and quickly because of how concise the instructions are. I've come across other lessons on responsive design that are just full of too much technical jargon and unneeded info. This course gets right to the point in an easy to follow method.
Michaela
October 11, 2012
this course is fine for a beginner level, i was really looking for a more in-depth discussion on the concepts and strategies of responsive design. this course simply provides a coding walk through for a simple responsive webpage and does not go into the theory behind it.
Nico
September 20, 2012
Only the last two lectures where really on responsive design the rest was only plain html/css and cutting up images. This is not worth $150 dollar. I was kind of disappointed after having a couple of good experiences with courses from Udemy
Kenji
September 5, 2012
While I would have liked a bit more reasoning, and explanation of some of the design decisions made in the tutorial (why some of the CSS elements behave as they do). Overall this is a great course for a quick intro looking at a responsive web design model that doesn't rely on JavaScript to build the page (as some others do), but rather relies strictly on CSS techniques and good HTML structure. Also, the tutorial is a bit light on the IE compatibility elements, if that is something you really need in your design. In the end, you will have an HTML page and CSS file you can use as a basis for other designs, and expand upon.
Amy
August 29, 2012
I like how methodical Chris is in explaining WHY he does what he does. This is important when personalizing the code. Thanks! Amy
Ross
August 19, 2012
Everything was explained clearly and easy to follow. The process was breaked down systemetically which made it easy for me to understand. Two thumbs up!
Yui
July 31, 2012
Precise and comfortable tone of voice to follow. I am beginner but understandable over all. If the author explained more details or used another example of layout (maybe because I am not web developer or designer), it would have been great. Thanks you.
Andres
July 6, 2012
I love this course because it makes you work. The difference with other courses about Responsive Design is that with other material is mostly about reading and theory. Practice is always important, so I recommend this course to anyone who wants to satr designing Reponsive Websites.
Steffen
June 29, 2012
This course is really great and easy to follow. Only sometimes was it necessary to use the "pause" key while typing - Chris is a fast speaker and typer. I'm not a native speaker but was able to understand everything. The only thing I would have wished was referencing the mockup more often when editing the CSS - in order to getting a better idea what region we're covering with this and that rule. However, I highly recommend this course to anyone who wants to learn the basics of responsive web design in a short time. I'm already enrolled in Chris' next course (Twitter Bootstrap) :)
Pam
May 19, 2012
I found this class covered every detail, which was a nice review for the stuff I already knew. It was also a nice intro to HTML5 from a design perspective. Thanks Chris!
Katherine
January 29, 2012
Thank you so much for this clear, concise and informative course. This has been quite helpful for several new mobile-friendly designs that I needed to create for my own startup and my consulting clients.
Lynn
January 21, 2012
This was a great course! I learned so much more here than I have had in other courses on this subject. Chris delivers clear and concise instructions that are easy to follow. He also explains why he is doing something rather than just have you copy the code. Bravo! I will look forward to more courses from Chris.

Charts

Price

Creating Responsive Web Design - Price chart

Rating

Creating Responsive Web Design - Ratings chart

Enrollment distribution

Creating Responsive Web Design - Distribution chart
8814
udemy ID
7/29/2011
course created date
2/8/2020
course indexed date
Bot
course submited by