Project: Profile card

Review the goal and steps of the profile card project.

Project: Profile card

In this project you'll build a profile card app. The card will hold an avatar, a name and a few info items. Our goal is to design a real card by nesting components.

The steps are: first you'll write the Avatar component showing a name and role; then add an InfoList component that lists the info; finally you'll combine them in a ProfileCard component.

Each lesson adds a piece with a code step, and the starting carries the previous lesson's solution.

Exercise Avatar skeleton

Complete the skeleton. Write a component called Avatar that returns <div className="avatar"> with <p>Ayşe</p> and <p>Developer</p> inside. Don't forget to export.

Show example solution

function Avatar() {
  return <div className="avatar"><p>Ayşe</p><p>Developer</p></div>;
}

export default Avatar;

Exercise Add a second line to Avatar

Complete the skeleton. Write a component called Avatar that returns <div className="avatar"> with three <p> tags: name, role and city. Don't forget to export.

Show example solution

function Avatar() {
  return <div className="avatar"><p>Ayşe</p><p>Geliştirici</p><p>İstanbul</p></div>;
}

export default Avatar;

Test yourself

What pieces does a profile card have?
- Avatar, name, info list
- Only a name
- Only an avatar
- Only a button
Show answer

Avatar, name, info list — A profile card has avatar, name and info list.

Project first step

In the first step you'll write the ____ component.

Show answer

In the first step you'll write the Avatar component.

Match the project steps

Avatar

Name and role
InfoList

Info list
ProfileCard

Combine
export

Export

Next lesson: Avatar component

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies