Share Description
This is an intermediate-level course offered on the unique Scrimba platform. Taught by Scrimba co-founder Per Harald Borgen, this concise and value-packed tutorial is designed to be the fastest way to gain an in-depth understanding of CSS Custom Properties. Through a series of 10 interactive screencasts spanning just over 30 minutes, you will move beyond the basics of CSS to master a feature that is a significant victory for front-end developers. This course demystifies CSS variables, showing you how they differ from preprocessor variables by being an actual part of the DOM. This key difference opens up a new world of possibilities for dynamic, flexible, and maintainable styling. The course's hands-on format allows you to pause the screencast at any time, edit the instructor's code, and see your changes live, ensuring that you learn by doing and that the knowledge sticks.
Topics the Course Covers
This tutorial provides a comprehensive yet concise look at CSS Custom Properties. You will learn:
- The fundamentals of CSS variables, including the correct syntax for declaring and using them.
- Variable scoping, understanding the difference between global variables (defined on the :root) and local variables.
- How to effectively override variables within different selectors to create powerful and specific styling rules.
- Using variables to build and manage website themes, such as creating an easy-to-toggle dark/light mode.
- The dynamic power of changing CSS variables with JavaScript, allowing for real-time, user-interactive style updates.
- Techniques for leveraging variables to create more manageable and responsive designs.
- Practical examples of how inheritance works with CSS variables.
Benefits of Opting for This Course
By enrolling in this course, you will gain several key advantages:
- Master a Modern Skill: CSS variables are a crucial, modern feature. Knowing them is essential for any professional front-end developer.
- Write Better Code: You will learn to write CSS that is significantly more modular, flexible, and readable, drastically reducing repetition in your stylesheets.
- Unique Interactive Learning: Scrimba's one-of-a-kind platform lets you code directly inside the video player, making it the most hands-on way to learn online.
- Solidify Your Knowledge: The course includes interactive challenges embedded directly in the screencasts, allowing you to immediately apply what you've learned.
- Learn from an Expert: The instructor, Per Harald Borgen, is a seasoned developer and educator focused on making complex topics as simple as possible.
- Join a Community: You gain access to the Scrimba Discord server, a large and friendly community of fellow learners where you can ask questions and collaborate.
Why Take This Course?
If you have a foundational understanding of HTML and CSS but want to elevate your skills, this course is the perfect next step. CSS Custom Properties (or variables) are a game-changer for front-end development. They bring the power of variables directly into CSS, resulting in cleaner, more abstract, and easier-to-maintain code. Unlike variables in preprocessors, CSS variables are live in the browser, which means they can be read and updated with JavaScript. This unlocks a new level of dynamic interactivity for your projects, from live theme switching to responsive-aware components. This specific course is designed to get you proficient fast. It skips the fluff and focuses on practical, hands-on learning through eight interactive screencasts. The instructor's goal is to get you to the point where you can confidently build your own projects, and the course's "learn by doing" methodology is the most effective way to ensure that you not only understand CSS variables but can also apply them immediately.
