Elements Hands-On 3

Elements Panel Practice Exercise 🎨

Welcome! Use this interactive playground to practice with the Elements panel: 🎮

1. Right-click any colored window below and select "Inspect" to open DevTools 🔍
2. Try these basic exercises in the Elements panel: (Press the buttons to see the solutions) ⚡
   • Edit the background colors using the Styles pane 🎨 Apply Random Colors 🌈
   • Modify the dimensions by changing width/height properties 📏 Resize Windows 🔄
   • Add new CSS properties like border-radius or box-shadow ✨ Make Windows Silly 🤪
   • Toggle the draggable attribute using element properties 🔄 Toggle Draggable 🎯
3. Advanced exercises to try: 🚀
   • Add transforms like rotate() or scale() 🔄 Apply Transform 🌀
   • Create CSS animations ⭐ Add Animation ✨
   • Experiment with filter properties 🎭 Add Filters 🌫️
   • Try adding gradient backgrounds 🎨 Add Gradient 🌈
   • Add text-shadow effects 📝 Add Text Shadow 💫
   • Create 3D transforms 🎲 Apply 3D Cube 🎲