Need help getting started?
At the ends of lessons 2, 3 and 4, you'll be working on the responsive blog project, which you'll be making more responsive. When you're challenged to improve the site, you'll find a link in the downloadables section to zip file with everything you need. The files are also listed below:
Additionally, here are the solutions to the project at each stage.
You can download Supplemental Materials, Lesson Videos and Transcripts from Downloadables (bottom right corner of the Classroom) or from the Dashboard (first option on the navigation bar on the left hand side).
Before you start working with responsive images, you need to start debugging on your mobile devices. This lesson will help you get started with Developer Tools and mobile debugging.
You can't optimize what you can't measure. In this lesson, you will start with comparing different kinds of images on the web and getting familiar with different units you can use to scale them.
You' will also get a chance to set up your development environment so that responsive images become a painless part of your workflow.
At the end of the lesson, you will start working on the responsive blog project, where you have a chance to apply responsive image principles in a real-world scenario!
Not all graphics need to be jpgs or pngs. This lesson dives into using markup techniques like CSS and icon fonts to create responsive graphics. While markup techniques are awesome because they are natively responsive, they are often extremely lightweight, requiring a fraction of the bytes of traditional images!
At the end of the lesson, you will replace extraneous images with markup techniques and take advantage of font icons to add social media icons to the responsive blog project!
Here comes the full monty! In this lesson, you will make your images fully responsive using the new
<picture> element! Along the way, you will use the
sizes attributes. You will also learn the importance of
alt attributes for your visually impaired users.
At the end of this lesson, you will make the blog project fully responsive, as you implement
<picture> to display beautiful images across a range of device widths and pixel ratios.
And most of all, thanks to YOU for taking the time to improve your web development with Responsive Images!
- Cameron Pittman