📱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.

🔅 CSS: Selectors

📝 Learn how to leverage the power of selectors to select the elements you want to style without adding classes, changing HTML, or getting overly specific with your selectors.

🌐 Author: Jen Kramer
🔰 Level: Intermediate
⏰ Duration: 2h 19m

📋 Topics: Cascading Style Sheets

🔗 Join Web Development for more courses

📱Web Development
📱CSS: Selectors