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.
113 reviews
WHAT'S INSIDE
  • Lifetime access to 11 lectures
  • Closed captioning enabled
  • A community of 25700+ students learning together!
  • 120+ discussions
TAUGHT BY
SHARE

Creating Responsive Web Design

Learn how to optimize your webpages for different screen sizes and platforms.
113 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

CURRICULUM

  • SECTION 1:
    Getting Started
  • 1
    Introduction
    04:23
  • 2
    Review the Project Files
    00:52
  • 3
    Project Files
    7.89 MB
  • SECTION 2:
    Optimizing Your Web Graphics
  • 4
    Slicing and Optimizing Graphics
    08:00
  • SECTION 3:
    Adding HTML for Structure and Content
  • 5
    Creating Content Containers
    07:19
  • 6
    Adding Sample Content
    06:29
  • SECTION 4:
    Creating CSS Rules for All Screens
  • 7
    Creating CSS Files
    05:27
  • 8
    CSS for Styling Text
    14:34
  • 9
    CSS for Layout
    23:13
  • SECTION 5:
    Creating CSS Rules for Mobile Screens
  • 10
    CSS for Medium Screens
    07:53
  • 11
    CSS for Small Screens
    14:09

RATING

  • 61
  • 36
  • 9
  • 6
  • 1
AVERAGE RATING
NUMBER OF RATINGS
113

REVIEWS

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

    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