Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Build a User Profile Card | React Basics and First UI
Introduction to React

Challenge: Build a User Profile Card

Swipe to show menu

Task

Create a simple user profile card using JSX. The profile card must include:

  1. An image (img element).
    • src attribute must be equal to the avatarUrl variable;
    • alt attribute must be equal to the string User Avatar;
    • width attribute must be equal to 120.
  2. A heading (h2 element). Its text content must be Alex Johnson.
  3. A paragraph (p element). Its text content must be Frontend Developer.
  4. Another paragraph (p element). Its text content must be Loves React and building UI projects.

Starter Code

Open the starter project below and complete the missing parts of the component.

Starter code

Solution

You can compare your result with the final solution below.

Solution code

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 5

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Section 1. Chapter 5
some-alt