🔅 CSS: Images

🌐 Author: Morten Rand-Hendriksen
🔰 Level: Advanced

⏰ Duration: 2h 4m

🌀 Learn how to manipulate images and shapes to create distinctive visual effects in CSS.

📗 Topics: Cascading Style Sheets

📤 Join Webdev Training for more courses

📂 Full description

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.


This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that youll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.

📱Webdev Training
📱CSS: Images

🔅 React: Building Styles with CSS Modules

🌐 Author: Emmanuel Henri
🔰 Level: Intermediate

⏰ Duration: 1h 34m

🌀 Learn how to leverage CSS modules, components, grids, and more in this course designed for developers in the React community.

📗 Topics: React.js, Cascading Style Sheets

📤 Join Learn React and NextJs for more courses

🔰 🔰 CSS Rule Dynamic Update in JavaScript

Use Cases:

- Theme Switching: Dynamically update colors or fonts based on user preferences (e.g., light/dark mode).

- Live Preview of Edits: In a content management system, allow users to instantly see style changes (e.g., font size, color) as they tweak design settings.

- Responsive UI Tweaks: Dynamically adjust styles for a complex interactive dashboard or tool based on user interaction (e.g., resizing widgets).

💠 Request Response Cycle for Web Applications