codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18⚡

19

Level 3: Add Game Images

User Story: As a developer, I want to add visual assets so that my game looks appealing.

What You’ll Do

Add image files for the apple target and orchard background to your project.

Instructions

• Download the two images, or find your own:
  • An apple image (save as apple.png)
  • An orchard background image (save as orchard.png)
• Place both images in the public/ folder
• Delete the default vite.svg from public/
• Delete react.svg from src/assets/

💡 Code Hints

Need help with images? Check out these tips:

Where to find images:

• Optional: You may find your own images if you’d like a different theme.
• Use free stock photo sites like Unsplash, Pexels, or Pixabay
• Make sure images are properly licensed for use

File structure:

public/
  ├── apple.png      (Your apple target image)
  └── orchard.png    (Your background image)

Why the public folder? Files in public/ can be referenced directly in CSS using /filename.png without imports.

✅ Check

1. Navigate to public/ folder in your file explorer
2. You should see apple.png and orchard.png
3. No default Vite/React SVG files should remain
4. Try accessing the images directly: http://localhost:5173/apple.png
5. You should see your apple image in the browser

---