Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Pluralsight

Hands-on Responsive Web Design 2: Responsive Images and Sliders

via Pluralsight

Overview

Learn how to implement responsive images with Web Design 2. After the course you'll have several functioning examples that can be applied to your next project directly!

At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, Hands-on Responsive Web Design 2: Responsive Images and Sliders, you'll learn the skills you need to implement responsive images using source set (srcset), and change images based on device pixel density and image width. First, you'll explore how to use the picture tag to target images based on media queries. Next, you'll dive into how to automate the creation of multiple sized images using Photoshop. Finally, you'll discover under what circumstances you should implement them. When you're finished with this course, you'll have built several functioning examples, which you can use in your next project. Software required: Brackets, Koala.app, and Photoshop.

Syllabus

  • Course Overview 1min
  • Introduction 8mins
  • Background and Scaling Images 25mins
  • Pixel Density Logo 9mins
  • Similar Sized Responsive Images 14mins
  • Different Sized Responsive Images 16mins
  • Art Direction 20mins
  • Lazy Load Images 15mins
  • Image Sliders 10mins

Taught by

Paul Cheney

Reviews

4.5 rating at Pluralsight based on 39 ratings

Start your review of Hands-on Responsive Web Design 2: Responsive Images and Sliders

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.