🔰 Container queries in CSS

If you have not tried out container queries yet, would highly recommend that you do 🤩

This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.

👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container

👉 Some other examples include, when you want to style an individual card based on its size

🔅 Using AI Tools for UX Design

📝 In this course, design expert Eric Nordquist explores the use of generative AI tools to both inform and streamline a UX design project.

🌐 Author: Eric Nordquist
🔰 Level: Beginner + Intermediate
⏰ Duration: 1h 57m

📋 Topics: Artificial Intelligence for Design, User Experience Design

🔗 Join Web Development for more courses

📱Web Development
📱Using AI Tools for UX Design

🔵 30 Ways To Improve Website Performance With CSS

According to the httparchive.org page weight report, CSS accounts for 7 HTTP requests and 70Kb of code on the average web page totalling 70 requests and 2MB. It’s not the worst cause of woeful website performance

The following 30 tips will help you optimize CSS to improve actual and perceived response times.

🌐 https://blog.openreplay.com/30-ways-to-improve-website-performance-with-css/

🔅 Extending Figma Design with Adobe Creative Cloud

📝 Learn how to supplement and extend your Figma design work with Photoshop, Illustrator, Dimension, and Premiere Pro as part of Adobe Creative Cloud.

🌐 Author: Joseph Labrecque
🔰 Level: Advanced
⏰ Duration: 1h 43m

📋 Topics: User Experience Design, User Interface Design

🔗 Join Web Development for more courses

📱Web Development
📱Extending Figma Design with Adobe Creative Cloud

📦 Exercise Files

🔰 A simple, CSS-only typing effect

In CSS, the ch unit defines the width of a single character. The reason we are using a monospace font is because they have the same width for any character 😁

We use a simple key frame animation to automate the width of the element from 0 to some max size of the text.

✨ The steps animation timing function is important, because it enables to set the width in a staggered manner (1ch, 2ch, 3ch, etc) and not a continuous smooth way

✨ We also disable text wrapping so that the text is presented in a single line irrespective of the width - which is important for this effect

💻 Web Developer Skills

🔅 Designing Product Interaction

📝 Embark on a comprehensive journey through the world of design thinking and user experience (UX) design for interactive digital products.

🌐 Author: Diane Cronenwett
🔰 Level: Beginner + Intermediate
⏰ Duration: 57m

📋 Topics: Product Design, User Experience Design, Interaction Design

🔗 Join Web Development for more courses

📱Web Development
📱Designing Product Interaction

🔰 Image Opacity in CSS

Once you start using it in different contexts, you realize it’s a small tweak that can make a big difference in user experience, design aesthetics, and even performance optimization.