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 4: Create Game Board Structure

User Story: As a user, I want to see an orchard background with an apple target so that I understand what to click.

What You’ll Do

Create the HTML structure with CSS styling for the game board and clickable apple.

Instructions

• In App.jsx, create a div with className orchard-background
• Inside it, create a div with className apple-target
• In App.css, style the orchard-background:
  • Use position: relative (so children can position absolutely)
  • Set background-image to your orchard image
  • Set dimensions: 500px wide, 700px tall
  • Use background-size: contain
• Style the apple-target:
  • Use position: absolute
  • Set background-image to your apple image
  • Set dimensions: 100px by 100px
  • Use background-size: contain

💡 Code Hints

Need help with styling? Check out these snippets:

Show Me: App.jsx structure

import './App.css'

function App() {
  return (
    <>
      <div className='orchard-background'>
        <div className="apple-target"></div>
      </div>
    </>
  )
}

export default App

Show Me: App.css styling

* {
  box-sizing: border-box;
}

.orchard-background {
  position: relative;
  background-image: url("/orchard.png");
  background-size: contain;
  width: 500px;
  height: 700px;
}

.apple-target {
  position: absolute;
  background-image: url("/apple.png");
  background-size: contain;
  width: 100px;
  height: 100px;
}

✅ Check

1. You should see an orchard background image
2. An apple should appear in the top-left corner
3. The game board should be 500px wide and 700px tall
4. If images don’t appear, check:
   • Image paths start with / in CSS
   • Images are in the public/ folder
   • Image file names match exactly (case-sensitive)

---