All challenges may appear incomplete by default. They include empty sections where you need to add the required code. Once all missing parts are filled in correctly, the completed code will be rendered on the live page.

Each challenge includes two helper buttons:
- **Hint**: shows small clues to guide you;
- **Solution**: opens the completed version in a new tab.

Note

You can also watch the short video tutorial below to learn how to work with CodeSandbox.

## How to work with Code Sandbox

## Task: Creating a Product Card
Create a simple product card using JSX and render it to the DOM. The product card must include:
1. The product image (`img` element).
   - `src` attribute must be equal to the `imageUrl` variable.
   - `alt` attribute must be equal to the string `Computer`.
   - `width` attribute must be equal to the `256`.
2. The product title (`h3` element).
   - Its text content must be `Computer`.
3. The product price (`span` element).
   - Its text content must be `Price: $129.99`.
4. The product description (`p` element).
   - Its text content must be  `New Model`.

1. The `src` attribute must contain the `imageUrl` variable as a value. Use curly braces `{}`.
2. The `alt` attribute must contain the string `"Computer"` as a value. Enclose it in double quotes.
3. The `width` attribute must contain the number `256` as a value. Use curly braces `{}`.
3. Ensure that the `h3`, `span`, and `p` elements have correct values.

Explore how React is used to build dynamic user interfaces using components, JSX, and props. Manage state and side effects with hooks, render lists and conditional UI, and apply styling to real components. Set up a React project with Vite and understand how applications are structured.

Challenge: Render an Element in React

How to work with Code Sandbox

Task: Creating a Product Card