You can learn anything on Udemy. Start today with one of our 10,000+ online courses

Creating Responsive Web Design

Learn how to optimize your webpages for different screen sizes and platforms.
110 reviews
  • Lifetime access to 11 lectures
  • Closed captioning enabled
  • A community of 27500+ students learning together!
  • 120+ discussions
  • 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.


Creating Responsive Web Design

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

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 11 lectures and 1.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


  • SECTION 1:
    Getting Started
  • 1

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

  • 2
    Review the Project Files

    A quick walkthrough of the files provided with this course.

  • 3
    Project Files
    7.89 MB

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

  • SECTION 2:
    Optimizing Your Web Graphics
  • 4
    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 3:
    Adding HTML for Structure and Content
  • 5
    Creating Content Containers

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

  • 6
    Adding Sample Content

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

  • SECTION 4:
    Creating CSS Rules for All Screens
  • 7
    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.

  • 8
    CSS for Styling Text

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

  • 9
    CSS for Layout

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

  • SECTION 5:
    Creating CSS Rules for Mobile Screens
  • 10
    CSS for Medium Screens
    Use CSS3 Media Queries to alter the layout based on medium-sized screens.
  • 11
    CSS for Small Screens

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


  • 56
  • 35
  • 9
  • 8
  • 2


  • Rodrigo
    Great course!

    I learned a lot in this course. Very clear and straight to the point.

  • Tobias Krøgholt

    I'm sorry, I don't mean to be rude but I'm finding this course quite lackluster in many departments. CSS is edited from scratch to finish without referencing it with the actual changes on the website, thus creating a wider gap between CSS and it's effect, than there had to be - which is a big shame in this very CSS-specific course! Then there is the amount of content: a total of 1,5 hours which only includes one website example. Perhaps responsive web design in essence is not a very big topic by itself, but then there could've been a more in-depth explanation of pros and cons of different layout choices and more hands-on websites from start to finish, exercises, quizzes and whatnot. I have taken coding-related courses which have had TEN TIMES the amount of content for the same price. Had I not gotten this course for 10 bucks during the summersale, I would have felt my hard-earned money had been washed down the drain. At some points I found myself thinking "If this is what it takes to make a 150 dollar course, then why I am not doing it myself". Again, my apologies if this seems harsh.

  • 이은상
    boring class

    I don't understand why so many people took this course as it's quite boring and seems just copying what the instructor is coding...

  • Leonardo Banderali
    Short and sweet

    This short course clearly explains everything needed to create a responsive webpage. Here, Chris goes over all the important aspects of making a webpage that adapts to any screen size, using the latest web technologies. Any designer looking to learn how responsive web design works will really benefit from this course.

  • Colleen Mary
    Chris is a good teacher!

    Subject was dealt with efficiently and clearly. As someone hard of hearing I was able to listen without difficulty.

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