This is the repository for the LinkedIn Learning course Controlling CSS with JavaScript. The full course is available from LinkedIn Learning.
JavaScript has full access to the markup of a web page (DOM) and the styles of a page (CSSOM). Using JavaScript to interact with and manipulate the DOM is common practice, but using JavaScript to interact with CSS is rarely explored past the shallow layers of manipulating classes and injecting inline styles. In this course, Morten Rand-Hendriksen takes a deep dive into the intersection of JavaScript and CSS to see what is possible. He explores basic manipulation of the CSSOM to change the live styles of a site, looks at the new opportunities afforded by custom properties, and explores concepts like style tokens. As Morten shows, using JavaScript to control CSS opens the door to more interactive designs and user experiences, and allows designers and developers to do things not possible with CSS alone.
See the readme file in the main branch for updated instructions and information.
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 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.
The exercise files are stand-alone examples in HTML, CSS, and JavaScript. You do not need any additional software to run them, and you are free to copy the code and use it in your own projects.
Be advised some of the advanced examples feature cutting-edge JavaScript and CSS methods not widely supported. For these examples, use the latest version of Chrome.
Morten Rand-Hendriksen
Developer and Senior Staff Instructor
Check out my other courses on LinkedIn Learning.