codex-lv2-may-2025

Level Navigation: 1

2

3

4

5

6

7

Current Level: 8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

---

---

🧪 Level 8: Card Structure

What You’ll Do

Convert the output area into a proper Bootstrap card.

Instructions

Convert the output <div> into a Bootstrap card with proper structure (card container, body, title, and text).

💡 Code Hints

Building Bootstrap cards? Cards need specific container and content classes to look right. Check out the Bootstrap Classes section in SNIPPETS.md for card structure examples.

✅ Check

1. Open your webpage in a browser
2. You should see a Bootstrap card where your output area used to be
3. The card should have a clean border, padding, and professional appearance
4. Open Chrome DevTools (F12) and check the Console tab for any errors
5. If the card doesn’t appear styled, check that you’re using the correct Bootstrap card classes

---

Next: Level 9 - IDs and Testing

---

---

Level Navigation: 1

2

3

4

5

6

7

Current Level: 8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32