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.
106 reviews
  • Lifetime access to 11 lectures
  • Closed captioning enabled
  • A community of 26200+ students learning together!
  • 120+ discussions

Creating Responsive Web Design

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

Running time: 92 minutes

Learn to create a web design that automatically conforms itself to multiple screen sizes. This course will show you a step-by-step process for creating a design that rearranges content, resizes elements, and adapts itself based on the size of your visitor's screen size.

Learn how to reposition the main navigation of the site based on the device browsing your website.

We'll create a web design that makes use of HTML5 and CSS3, while maintaining backwards compatibility with older browsers. The secret ingredient of CSS3 that makes this all possible is the media querying capability. CSS media queries allow us to define CSS rules based on screen size, and ultimately give us precise control over how our designs adapt to different screen sizes. In addition to adjusting layout, we'll explore using CSS to define all imagery in our design, allowing us to send optimized imagery along with our customized design experience.

Apply varied amounts of compression to images to optimize download speeds across devices.

Course includes HTML, CSS, and Photoshop templates for use in your own multiscreen web design projects.

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


  • 55
  • 35
  • 9
  • 6
  • 1


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

  • Milton Jackson

    Great course easy to follow.

  • Luis Esteban Kilby
    Lacking additional info

    I think this course is kinda good for giving an example in creating a responsive web design but it lacks a good explanation of each step you are tacking. Was really easy to get lost, would be better to explain even a bit more each step and stop coding for a second to view your advances and changed to the website more.

  • Maxime Girard
    Nice course, nice template

    I like this course. Quick and easy to follow, but you really need 2 screens to work with it correctly. One with the video and the other where you code. Also some typos while he types, but nothing big.

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