Course Content
React Mastery
React Mastery
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
.
The product price (
span
element).Its text content must be
Price: $129.99
.
The product description (
p
element).Its text content must be
New Model
.
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!