## **Assignment Outline**  

### **1. Annotating a Single Item**  
   - **1.1 Positioning the Item**  
     - Learn how to position an HTML element (absolute, relative, fixed).  
   - **1.2 Transformations**  
     - **1.2.1 Scaling:** Resize the item dynamically.  
     - **1.2.2 Rotation:** Rotate the item using CSS/JavaScript.  
     - **1.2.3 Other transformations:** Apply `translate`, `skew`, and `rotate` effects.  
   - **1.3 Image Separators**  
     - Use dividers to separate different product images.  
   - **1.4 Boundary on Hover**  
     - Highlight item borders when hovered over.  

---

### **2. Multiple Images / Layers**  
   - **2.1 Flex / Line / Box Layout**  
     - Arrange product images using CSS `flexbox` or `grid`.  
   - **2.2 Gap, Padding, and Spacing**  
     - Adjust spacing between product images.  
   - **2.3 Using Different Images**  
     - Dynamically display multiple images per item.  

---

### **3. Introduction to JavaScript**  
   - **3.1 "Hello World" using `<script>` and `alert`**  
   - **3.2 Image Click Event in JavaScript**  
     - Trigger actions when a user clicks on an image.  
   - **3.3 Alert after Display**  
     - Show a popup alert after items are displayed.  
   - **3.4 Show HTML from JavaScript**  
     - Inject dynamic HTML into the page using JavaScript.  
   - **3.5 Learn how to loop the item 50 times**  
     - Use a loop to generate 50 items dynamically.  

---

### **4. Advanced Concepts**  
   - **4.1 Looping: Generate 50 Copies of an Item**  
     - Use JavaScript to create 50 copies of an item dynamically.  
   - **4.2 Creating a Loop for HTML Templates**  
     - Implement a loop that generates a numbered HTML template dynamically.  
   - **4.3 Inserting Values into an HTML Template**  
     - Take generated values and insert them into an HTML template dynamically.  
   - **4.4 Extracting and Populating Data**  
     - Learn how to retrieve data from a template and populate it into the interface.  
   - **4.5 Moving Data from Interface to Form**  
     - Transfer data from a user interface to an HTML form using JavaScript.  
   - **4.6 Console Log Testing**  
     - Use `console.log()` to debug and check outputs in JavaScript.  

---