The Complete React Developer Course (with Hooks and Redux) - Styling Expenses List: Part I

What is the main difference in the layout of the expenses list between desktop and mobile views?

• On desktop, expenses are listed with amounts on the right.

• On mobile, expenses are displayed side by side.

• On desktop, expenses are stacked vertically.

• On mobile, expenses are hidden.

How are expenses displayed on mobile devices?

• Hidden by default

• With amounts on the left

• In a grid layout

• Stacked vertically

What is the first step in setting up the header area for the expense list component?

• Removing all existing styles.

• Creating a new stylesheet.

• Defining static markup for the header.

• Adding a new component.

What class name is used to restrict the width of the list in the header area?

• header-container

• content-wrapper

• container

• content-container

What is the purpose of creating visibility classes in the SCSS file?

• To add animations to the elements.

• To increase the font size on mobile.

• To change the color of the text.

• To show or hide elements based on screen size.

Which media query feature is used to hide elements on larger screens?

• aspect-ratio

• orientation

• max-width

• min-width

Which CSS property is used to distribute space between items in the list header?

• align-items

• flex-direction

• justify-content

• text-align

What color is used for the background of the list header?

• Dark gray

• Light gray

• Off white

• Blue

What is the purpose of using Flexbox in the list header?

• To change the background color

• To change the font size

• To align items horizontally

• To add padding

What is the benefit of restructuring the expense list item component?

• It makes the component load faster.

• It allows the entire item to be clickable.

• It reduces the number of lines of code.

• It changes the color of the item.