HTML: Images and Figures

1h 2mIntermediate2018-05-09

Authors

J. David Eisenberg

Programmer and Instructor living in San Jose, California

Course details

The web offers more and more ways to make your graphics accessible, reliably placed, and a smooth fit for a variety of different screens. It's not just IMG anymore. In this course, join J. David Eisenberg as he provides a comprehensive exploration of the many ways to present graphics on web pages. Learn about different image formats—including GIF, PNG, and JPEG—and discover how to adjust and style images using CSS. Plus, learn about the principles of responsive design, how to use the figure and figcaption elements to caption images, and more.

Learning objectives
Using the img element
Resizing images
Obtaining images for your website
Image formats and when to use them
Styling images with CSS
Adjusting borders, margins, and padding
Adding background images
Testing screen resolutions
Autonumbering figures with CSS

Skills covered

HTMLWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Setting up your computer

1. Image Essentials

04 - Using the img element and src attribute
05 - Accessibility - alt and title attributes
06 - Image size - Width and height
07 - Obtaining images

2. Image Formats

08 - Image format overview
09 - GIF and PNG - The format for line art
10 - JPEG - The format for photos
11 - SVG - The format for vector line art

3. Images and CSS

12 - Borders, padding, and spacing
13 - Alignment
14 - Challenge - Images and text
15 - Solution - Images and text
16 - Special effects
17 - Background images

4. Responsive Images

18 - Resolution and pixel density
19 - Handling pixel density
20 - Using srcset and sizes
21 - Testing screen resolutions
22 - Challenge - Use srcset
23 - Solution - Use srcset
24 - Art direction - The picture element

5. Figures

25 - Using figure and figcaption elements
26 - Autonumbering figures with CSS

Conclusion

27 - Next steps