Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: CSS Modules | Styling in React Apps
Mastering React

Challenge: CSS Modules

Task: Building a User Card with CSS Modules

In this task, you'll design a user card displaying the user's photo and relevant information. Apply appropriate styles to each component and ensure their proper utilization. Our goal is to achieve such UI:

content

The task is:

  1. In the UserInfo.jsx file, import the styles file (UserInfo.module.css) and assign it as s for style association.
  2. To complete the app building, import the UserInfo.jsx file into the App.jsx.
  1. To import a file, use the import statement and specify the source file.
  2. To associate the CSS file with the s, import it using import s from "path_to_the_file";.
  3. To utilize the UserInfo component within the App component, use the syntax </UserInfo />.

Everything was clear?

Section 2. Chapter 10
course content

Course Content

Mastering React

Challenge: CSS Modules

Task: Building a User Card with CSS Modules

In this task, you'll design a user card displaying the user's photo and relevant information. Apply appropriate styles to each component and ensure their proper utilization. Our goal is to achieve such UI:

content

The task is:

  1. In the UserInfo.jsx file, import the styles file (UserInfo.module.css) and assign it as s for style association.
  2. To complete the app building, import the UserInfo.jsx file into the App.jsx.
  1. To import a file, use the import statement and specify the source file.
  2. To associate the CSS file with the s, import it using import s from "path_to_the_file";.
  3. To utilize the UserInfo component within the App component, use the syntax </UserInfo />.

Everything was clear?

Section 2. Chapter 10
some-alt