Creating Responsive Web Design

Learn how to optimize your webpages for different screen sizes and platforms.
  • Lectures 33
  • Video 4 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

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

What are the requirements?

  • Text editor
  • Positive attitude : )

What am I going to get from this course?

  • Over 33 lectures and 3.5 hours of content!
  • 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...

What is the target audience?

  • Graphic Designers
  • Web Developers
  • Interaction Designers
  • Usability Experts

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


Section 1: Beginning Your Project and Making Web Graphics

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.


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


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.


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


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.


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.


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.

Section 2: Creating HTML and CSS for Web Layout

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


Creating links to external CSS files from your HTML file.


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


Creating the main HTML content containers for our web layout.


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


Adding sample content from our code snippets.


Adding CSS styles for the background and page container


Adding style to our typography with CSS.


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


Creating CSS rules specifically for web layout.


Setting up CSS layout rules for the promos and navigation.

Section 3: Working with CSS Media Queries

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


Creating CSS rules to optimize the layout for medium screens.


Creating CSS rules to optimize the layout for small screens.


Repositioning the navigation for small screens.

Section 4: Getting Started (Original Course)

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


A quick walkthrough of the files provided with this course.

7.89 MB

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

Section 5: Optimizing Your Web Graphics (Original Course)

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.

Section 6: Adding HTML for Structure and Content (Original Course)

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


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

Section 7: Creating CSS Rules for All Screens (Original Course)

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.


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


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

Section 8: Creating CSS Rules for Mobile Screens (Original Course)
Use CSS3 Media Queries to alter the layout based on medium-sized screens.

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

Instructor Biography

Chris Converse , Designer and Developer at Codify Design Studio

Chris has over 22 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngulatJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.

Join the biggest student community


Hours of video content


Course Enrollments




Average Rating
  1. 5 Stars
  2. 4 Stars
  3. 3 Stars
  4. 2 Stars
  5. 1 Stars
    • Javier Campos

    No era lo que yo esperaba

    El curso te enseña a "Copiar" un diseño... hoy por hoy si tengo que hacerlo de cero yo no se por donde empezar. Faltan muchas explicaciones, algo mas de practico. No era lo que yo esperaba. Calculo que puede ser muy util para alquien con una base de diseño web, pero para los que como yo estamos tratando de empezar a aprender no es muy util. Lo voy a volver a ver una vez logre armar una base más solida.

    • Zhenting Zhou

    CSS responsive

    Responsive when you need it

    • Laurie Trowbridge

    It's okay

    Clearly some of this material is a little outdated. Instructor announced an updated version of this class is coming soon at a discount to alumni. I feel this class moves very fast and at times does not provide enough explanation of why things work the way they do. I think this course would be more effective if the instructor provided a piece by piece approach. Construct the elements of the page and then have a lesson for just the header elements, another lecture for the styling the body, another for the footer. Think this would allow for greater detail and more discussion. For example, I had a question about why use a background image instead of a float, which the instructor never fully explained in the video. I had to ask. Beginners need to know why. Too much time was wasted in Photoshop and introduced terminology that was not beneficial to me. Sprites? I've heard of them and probably won't be using them any time soon. While a few useful nuggets here, there's just not enough detail to make me feel like I'm gaining a lot of knowledge. I'm about 60% done with the class, but don't think I'll finish.

    • Swathi Sanjeev

    Very good

    • Ashok Javvaji


    Good Quality content, Clear and Informative

Show more reviews
Ready to start learning?
Preview this course