Creating Responsive Web Design

Learn how to optimize your webpages for different screen sizes and platforms.
115 reviews
  • Chris Converse Designer and Developer at Codify Design Studio

    Chris has over 20 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 PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media.

  • Lifetime access to 33 lectures
  • 3+ hours of high quality content
  • A community of 35700+ students learning together!
  • 130+ discussions

Creating Responsive Web Design

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


Discover courses made by experts from around the world.

Take your courses with you and learn anytime, anywhere.

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


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.

    • 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...
    • Graphic Designers
    • Web Developers
    • Interaction Designers
    • Usability Experts


30 day money back guarantee
Lifetime access
Available on Desktop, iOs and Android
Certificate of completion


  • SECTION 1:
    Beginning Your Project and Making Web Graphics
  • 1
    Course Introduction

    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.

  • 2
    Tools you need of this course

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

  • 3
    Introduction to HTML and CSS

    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.

  • 4
    Creating your project root

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

  • 5
    Examining the design composition

    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.

  • 6
    Slicing and optimizing the banner graphics

    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.

  • 7
    Optimizing the template and content graphics

    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
  • 8
    Adding the starter files to your project

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

  • 9
    Linking CSS files to an HTML file

    Creating links to external CSS files from your HTML file.

  • 10
    Adding tags to the head area of the HTML file

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

  • 11
    Creating the main content containers

    Creating the main HTML content containers for our web layout.

  • 12
    Adding promo containers and adding navigation links

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

  • 13
    Adding content to the containers

    Adding sample content from our code snippets.

  • 14
    Style the background and page container

    Adding CSS styles for the background and page container

  • 15
    Adding typographic styles

    Adding style to our typography with CSS.

  • 16
    Creating compound CSS rules

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

  • 17
    Creating CSS rules for layout

    Creating CSS rules specifically for web layout.

  • 18
    Setting CSS rules to floating promo containers

    Setting up CSS layout rules for the promos and navigation.

  • SECTION 3:
    Working with CSS Media Queries
  • 19
    Adding a CSS rule within an inline CS3 media query

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

  • 20
    Adding CSS rules for medium screen sizes

    Creating CSS rules to optimize the layout for medium screens.

  • 21
    Adding CSS rules for small screen sizes

    Creating CSS rules to optimize the layout for small screens.

  • 22
    Styling the navigation for small screens

    Repositioning the navigation for small screens.

  • SECTION 4:
    Getting Started (Original Course)
  • 23

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

  • 24
    Review the Project Files

    A quick walkthrough of the files provided with this course.

  • 25
    Project Files
    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)
  • 26
    Slicing and Optimizing Graphics

    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)
  • 27
    Creating Content Containers

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

  • 28
    Adding Sample Content

    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)
  • 29
    Creating CSS Files

    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.

  • 30
    CSS for Styling Text

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

  • 31
    CSS for Layout

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

  • SECTION 8:
    Creating CSS Rules for Mobile Screens (Original Course)
  • 32
    CSS for Medium Screens
    Use CSS3 Media Queries to alter the layout based on medium-sized screens.
  • 33
    CSS for Small Screens

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


Hours of video content
Course Enrollments


  • 58
  • 36
  • 11
  • 9
  • 1


  • Denys Yershakov
    Great course! Recommend it to beginners at web development.

    The course on Creating Responsive Web Design taught by Chris Converse is a really great course. This newer course session on the topic released by Chris a couple of months ago. It is an addition to his previous course and it consists of detailed explanation of how to build different styles for different devices screens dimensions. Chris is good at teaching and the course helped me a lot to implement the responsive techniques into the websites I am currently developing. I would definitely recommend this course to all novices at web development. Thank you Chris!

  • Oleg Korsak
    expensive for such course

    too much "shut up and code", there is no information WHY should we do this or that

  • Sacha Wagener
    Great course

    A good intermediate course, some nice photoshop tips and tricks. Good solid html and css. A well laid out course :)

  • Christopher Dello Russo
    Great for HTML/CSS beginners and intermediates

    Starting this course I had a very good grasp on basic HTML/CSS coding, but in today's reality, understanding Responsive Web Design is a must. This class did a great job as a primer for RWD concepts. I originally signed up for this course before Chris added the new material, and the original stuff felt a bit dated. However a few weeks into it he added the updated material which was a bit more appropriate for the HTML5 world we now live in. I have had some experience in web design (but not a lot), and I thought he did a great job explaining some of the concepts, especially for people starting from a beginner position. I would love to see more from him (perhaps a class getting into more advanced RWD concepts...)

  • Claire Smalley
    Watch someone code with minimal explanation

    The majority of this course is video of the instructor typing code with very little explanation of his decisions. If you have a basic understanding of html/css, you will learn a few tags for creating responsive design amidst a ton of information that you already know. If you have no understanding of html/css, this course will not explain it at all. I don't know who this course is for. Finally, the website you are taught to code is not well-designed.

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion