Elements Panel Practice - Let's Have Some Fun! ðĻ
Exercise 1: Style Detective ðĩïļ
I'm feeling a bit too pink today! Use the Styles pane to give me a makeover.
Hint: Try changing my background-color, add some box-shadow, or make me dance with transform!
Exercise 2: The Hide and Seek Champion ð
Exercise 3: DOM Tree Surgeon ðģ
- I heard you're good at surgery
- Try moving these list items around
- Or maybe add a new sibling?
Exercise 4: Event Listener Explorer ðŊ
Find all my event listeners in the Elements panel!
Exercise 5: Layout Detective ð
Check my box model! Am I following the CSS box model rules?
Exercise 6: Computed Styles Challenge ð§Ū
What's my real color? Check the Computed styles to find out!
Exercise 7: Accessibility Inspector âŋ
Exercise 8: DOM Breakpoints ð
Right-click and set a subtree modification breakpoint on me!
Exercise 9: CSS Grid Inspector ð
Grid 1
Grid 2
Grid 3
Use the Grid inspector to understand the layout!
Exercise 10: Shadow DOM Explorer ðŧ
Can you find my shadow root?
Hint: Look for the #shadow-root in the Elements panel
Exercise 11: Animation Inspector ðŽ
Watch me spin! Try to change my direction!
ðĪŠ
Exercise 12: Pseudo-Element Detective ð
I have a ::before and ::after. Can you find and modify them?
Exercise 13: Flexbox Navigator ð
Flex 1
Flex 2
Flex 3
Explore the Flexbox layout using the Elements panel!
Pro Tips & Tricks ð
- ðĄ Use Ctrl+Shift+C (Cmd+Shift+C on Mac) to inspect elements quickly
- ðĻ Try the color picker in the Styles pane for precise colors
- ðģ Use H to hide elements
- âĻïļ Press Up/Down in the Styles pane to increment/decrement values
- ð Use Ctrl+F to search within the Elements panel
- ð Hold Shift while hovering over elements to see their dimensions
- ðŊ Right-click an element to set DOM breakpoints
- ðĻ Use the Animations tab to control CSS animations
- ðą Toggle device mode to test responsive designs
- ð Use the Computed tab to see final computed values