Challenge: Render an Element in React
Note
All challenges may appear broken by default since they contain whitespace sections where you need to input the necessary code. Once you correctly fill in these whitespace sections, the completed code will be displayed on the live page.
Additionally, every challenge features two buttons:
Hint
andSolution
. Clicking onHint
provides small hints for the current challenge, while selecting theSolution
button opens a new tab with the completed challenge.
How to work with Code Sandbox
Task: Creating a Product Card
Create the product card and render it to the DOM. The product card needs:
- The product image (
img
element).src
attribute must be equal to theimageUrl
variable.alt
attribute must be equal to the stringComputer
.width
attribute must be equal to the256
.
- The product title (
h3
element).- Its text content must be
Computer
.
- Its text content must be
- The product price (
span
element).- Its text content must be
Price: $129.99
.
- Its text content must be
- The product description (
p
element).- Its text content must be
New Model
.
- Its text content must be
- TheΒ
src
Β attribute must contain theΒimageUrl
Β variable as a value. Use curly bracesΒ{}
. - TheΒ
alt
Β attribute must contain the stringΒ"Computer"
Β as a value. Enclose it in double quotes. - TheΒ
width
Β attribute must contain the numberΒ256
Β as a value. Use curly bracesΒ{}
. - Ensure that theΒ
h3
,Βspan
, andΒp
Β elements have correct values.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.17
Challenge: Render an Element in React
Swipe to show menu
Note
All challenges may appear broken by default since they contain whitespace sections where you need to input the necessary code. Once you correctly fill in these whitespace sections, the completed code will be displayed on the live page.
Additionally, every challenge features two buttons:
Hint
andSolution
. Clicking onHint
provides small hints for the current challenge, while selecting theSolution
button opens a new tab with the completed challenge.
How to work with Code Sandbox
Task: Creating a Product Card
Create the product card and render it to the DOM. The product card needs:
- The product image (
img
element).src
attribute must be equal to theimageUrl
variable.alt
attribute must be equal to the stringComputer
.width
attribute must be equal to the256
.
- The product title (
h3
element).- Its text content must be
Computer
.
- Its text content must be
- The product price (
span
element).- Its text content must be
Price: $129.99
.
- Its text content must be
- The product description (
p
element).- Its text content must be
New Model
.
- Its text content must be
- TheΒ
src
Β attribute must contain theΒimageUrl
Β variable as a value. Use curly bracesΒ{}
. - TheΒ
alt
Β attribute must contain the stringΒ"Computer"
Β as a value. Enclose it in double quotes. - TheΒ
width
Β attribute must contain the numberΒ256
Β as a value. Use curly bracesΒ{}
. - Ensure that theΒ
h3
,Βspan
, andΒp
Β elements have correct values.
Thanks for your feedback!