Designers love to use big hero images when designing a website. I’m not going to debate the merits of the use of hero images—or any images for that matter—in a web page design. Images certainly have their place, but they can also cause big problems for the site’s visitor if not done correctly.

Image of Clever Birds Website Home Page

Image of Christian Woo Website Home Page

In this series of screencasts, I demonstrate how to use HTML and CSS to embed images in your web pages. This includes the use of vector images! I also cover performance issues such as what happens if an images takes too long to load and how to optimize your images for performance. Finally, I cover the Art Direction of photographic images for different screen sizes.

Tips Before Starting

Part 01 of 11

In parts 01 and part 02 you will basically download the necessary files and use the boilerplate to setup the assignment.

Part 02 of 11

Part 03 of 11

In parts 03 and 04 you will learn how to use the IMG HTML tag to embed images into your layouts. You will also learn how to optimize the images for faster viewing on the web.

Part 04 of 11

Part 05 of 11

In part 05 you will learn how to use the CSS Background property to embed images into your web pages so text can appear above the images.

Part 06 of 11

In part 06 you will learn how to use the PICTURE HTML element to art direct images for effect and embed those images in your web pages.

Part 07 of 11

In parts 07–09 you will use the SRCSET HTML attribute to embed images into your layouts to improve a websites performance.

Part 08 of 11

Part 09 of 11

Part 10 of 11

In parts 10 and 11 you will learn how to build and embed SVG images. You will also learn how to use CSS to style SVG images.

Part 11 of 11

Grading

This assignment will be worth 44 points.

Resources