Elements Hands-On 4

Elements Panel Practice Exercise

Welcome to the Elements panel hands-on exercise! Follow these steps:

1. Right-click any card below and select "Inspect" to open DevTools Elements panel
2. Try these exercises:
   • Modify card styles using the Styles pane (try changing background-position)
   • Delete some cards using the Delete key in the Elements tree
   • Drag and drop cards in the Elements tree to reorder them
   • Toggle classes on cards using the .cls button
3. Inspecting CSS:
   • Click the Styles tab in DevTools to see all applied CSS rules
   • Use the filter box to search for specific properties
   • Toggle properties on/off using the checkboxes
   • Click on property values to modify them
   • Try to add border-radius to the card
4. Image Slicing Technique:
   • The cards use background-image with different background-position values
   • Each card shows a different section of the same large image
   • Try modifying background-position to see how the image parts move
   • The technique uses CSS sprites to display different parts of one image