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.
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.
In parts 01 and part 02 you will basically download the necessary files and use the boilerplate to setup the assignment.
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.
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.
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.
In parts 07–09 you will use the SRCSET HTML attribute to embed images into your layouts to improve a websites performance.
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.
This assignment will be worth 44 points.