Udacity Responsive Images course

This is the GitHub Pages site for the project and examples used in the Udacity Responsive Images course.

You can access all the code for this course at github.com/udacity/responsive-images.

Patches and issues welcome!

Project

Code

Steps

Lesson 2 Lesson 3 Lesson 4

Examples

Code

Lesson 2

Broken images Multiple wait cursors Single image, full size Single landscape image Identical images, different compression Identical images, different compression and size What's wrong with this picture? Single image, fixed size Single image, max width: 100% Single image, too small for large display size Two images, 50% width Two images, 50% width with margin Image with relative width Landscape image too wide for portrait display Single image, no CSS

Lesson 3

SVG v PNG Photo with logo as JPEG Photo as JPEG, logo overlaid as SVG SVG v PNG v JPG Text as image Text as image over photo Text using Web Font Text as text, over photo Div with CSS effects CSS background image: alternative CSS background image: conditional CSS background-size: cover Body with background image Body with background image and gradient Body with elaborate background using only CSS Div with background image image-set() Unicode instead of an image Icon fonts SVG Data URI in HTML SVG Data URI in CSS SVG text on a path SVG optimized and unoptimized

Lesson 4

Single image, 100vmax height and width Sizes attribute with media query Sizes attribute with w values Sizes attribute with x values Srcset with w values Srcset with w values, 50vw Srcset with x values Image that scales badly Image that scales well Picture element: alternative image formats Picture element: art direction Picture element: with srcset and media queries Picturefill polyfill