CSS: Images

This is the repository for the LinkedIn Learning course CSS: Images. The full course is available from LinkedIn Learning.

CSS is a toolkit for image manipulation. Whether you want to create distinctive visual effects or simply make the most of available bandwidth, the options for manipulating images in CSS will let you create reusable graphics solutions. In this course, instructor Morten Rand-Hendriksen shows you how much you can edit images in a browser using pure CSS. Morten explains the importance of proper HTML image markup and how to crop, fit, and position an image. He discusses how to use the clip-path property to create a variety of shapes. Morten shows how you can use and combine filters to edit and add effects to your image. He concludes by walking you through several practical examples of how to use what you learned, as well as some important best practices and caveats.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add /tree/BRANCH_NAME to the URL to go to the branch you want to access.

Branches

This practice files repository has only one branch, main, and all the examples are available on that branch. Each movie in the course has a corresponding practice folder named for the chapter and movie number. As an example, the folder named 02_03 corresponds to the second chapter and the third video in that chapter. Most movies have a beginning and an end state folders. These are marked with the letters b for "beginning" and e for "end". The b folder contains the code as it is at the beginning of the movie. The e folder contains the code as it is at the end of the movie.

Installing

1. Download the practice files to any location on your computer.
2. Open the folder corresponding to the movie you are currently watching.

Instructor

Morten Rand-Hendriksen

Web Designer and Developer

Check out my other courses on LinkedIn Learning.