Lecture Notes Of Class 17: Building Cards

Lecture Notes Of Class 17: Building Cards

Objectives:

Learn how to design reusable card components.
Understand and implement grid and flex utilities.
Design a product listing with cards containing images, titles, and descriptions.

Key Concepts:

1. Card Components: A card is a flexible and extensible content container. It can hold images, text, and other content like titles, descriptions, and buttons.

2. Reusable Components: Create components that can be reused across multiple parts of the site or application without needing to rewrite HTML code.

3. CSS Grid and Flexbox: These are layout systems in CSS that help you arrange the card components efficiently on the page.

Step-by-Step Guide:

1. Structure of the Card Component:

A simple card might contain:

An image at the top (product image)
A title (product name)
A description (product description)
An optional button (e.g., "Add to Cart")

html

Copy code

<h5 class="card-title">Product Title</h5>

<p class="card-description">This is a short description of the product.</p>

</div>

2. Styling the Card with CSS:

Here’s how you can style the card and make it reusable across the page:

css

Copy code

/* Card Styling */

.card {

border: 1px solid #ddd;

border-radius: 8px;

overflow: hidden;

width: 100%;

max-width: 300px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

margin: 10px;

}

.card-img {

width: 100%;

height: 200px;

object-fit: cover;

}

.card-body {

padding: 15px;

text-align: center;

}

.card-title {

font-size: 1.2em;

margin: 10px 0;

}

.card-description {

font-size: 1em;

color: #555;

}

.card-btn {

background-color: #007bff;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

}

.card-btn:hover {

background-color: #0056b3;

}

3. Layout Using Flex or Grid:

Now, let’s layout multiple cards using CSS Grid or Flexbox.

Flexbox Approach:

css

Copy code

.card-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

justify-content: center;

}

.card-container .card {

flex: 1 1 calc(33% - 20px);

max-width: 300px;

}

Grid Approach:

css

Copy code

.card-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

justify-items: center;

}

.card-container .card {

max-width: 300px;

}

4. Example HTML for Product Listing:

Using either grid or flex layout, your HTML structure might look like this:

html

Copy code

<h5 class="card-title">Product 1</h5>

<p class="card-description">A short description of the first product.</p>

</div>

<h5 class="card-title">Product 2</h5>

<p class="card-description">A short description of the second product.</p>

</div>

</div>

5. Customization:

You can modify the card-container styles to adjust how the cards are arranged (e.g., using grid-template-columns for a specific number of columns).
The card’s look can also be customized by changing borders, shadows, padding, and typography to suit the theme of your application or website.

6. Reusable Card Component (Optional - Using JavaScript):

If you're using a JavaScript framework (e.g., React, Vue), you can create a reusable card component:

Example in React (Functional Component):

jsx

Copy code

const Card = ({ imgSrc, title, description }) => (

<h5 className="card-title">{title}</h5>

<p className="card-description">{description}</p>

</div>

);

export default Card;

Then you can reuse it like this:

jsx

Copy code

import Card from './Card';

const ProductList = () => (

{/* Add more cards */}

</div>

);

Conclusion:

In this class, you’ve learned how to create reusable card components using HTML and CSS.
You’ve also explored the use of CSS Flexbox and Grid to arrange multiple cards in a neat layout.
By using flexible layout systems, you can ensure that your cards look great on all screen sizes and are easy to manage.

Feel free to experiment with different designs, colors, and content within your card component!

4o mini

You said:

WRITE 10 ASSIGNMENTS FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation

ChatGPT said:

ChatGPT

Here are 10 assignments based on the concepts of building reusable card components, using CSS Grid and Flexbox for layout, and creating product listings.

Assignment 1: Create a Basic Card Component

Objective: Build a basic card component with an image, title, and description.

Steps:

1. Create an HTML file and add a div with a class of card.

2. Inside the card div, add an img tag for the image, a h5 tag for the title, and a p tag for the description.

3. Style the card by setting a border, padding, and margin.

Solution:

html

Copy code

<h5 class="card-title">Product Title</h5>

<p class="card-description">This is a short description of the product.</p>

</div>

css

Copy code

.card {

border: 1px solid #ddd;

border-radius: 8px;

padding: 20px;

width: 250px;

text-align: center;

}

.card-img {

width: 100%;

height: 200px;

object-fit: cover;

}

.card-title {

font-size: 1.2em;

}

.card-description {

color: #555;

}

Assignment 2: Add a Button to the Card

Objective: Add an "Add to Cart" button to the card.

Steps:

1. Add a button element inside the card-body div.

2. Style the button to make it stand out.

Solution:

html

Copy code

<h5 class="card-title">Product Title</h5>

<p class="card-description">This is a short description of the product.</p>

</div>

css

Copy code

.card-btn {

background-color: #007bff;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

}

.card-btn:hover {

background-color: #0056b3;

}

Assignment 3: Create a Product Listing with Multiple Cards

Objective: Create a listing of multiple products using card components.

Steps:

1. Create a div with a class of card-container to hold multiple cards.

2. Add 3-4 card components within the card-container.

Solution:

html

Copy code

<h5 class="card-title">Product 1</h5>

<p class="card-description">Description for product 1</p>

</div>

<h5 class="card-title">Product 2</h5>

<p class="card-description">Description for product 2</p>

</div>

</div>

Assignment 4: Create a Flexbox Layout for the Cards

Objective: Use Flexbox to layout the product cards in a row.

Steps:

1. Set the card-container to use Flexbox.

2. Adjust the card styles to distribute the cards evenly within the container.

Solution:

css

Copy code

.card-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

justify-content: center;

}

.card {

flex: 1 1 calc(33% - 20px);

max-width: 300px;

}

Assignment 5: Create a Grid Layout for the Cards

Objective: Use CSS Grid to layout the product cards in a 3-column grid.

Steps:

1. Set the card-container to use CSS Grid.

2. Define 3 columns for the grid using grid-template-columns.

Solution:

css

Copy code

.card-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

justify-items: center;

}

.card {

max-width: 300px;

}

Assignment 6: Make the Cards Responsive

Objective: Make the card layout responsive, so it switches to a 1-column layout on smaller screens.

Steps:

1. Use media queries to adjust the number of columns in the grid or flex layout based on the screen size.

Solution:

css

Copy code

.card-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

@media (max-width: 768px) {

.card-container {

grid-template-columns: 1fr;

}

Assignment 7: Add a Hover Effect to the Card

Objective: Add a hover effect to the card that increases its size slightly and adds a shadow.

Steps:

1. Use the :hover pseudo-class to scale the card and add a box-shadow when the user hovers over it.

Solution:

css

Copy code

.card:hover {

transform: scale(1.05);

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

transition: all 0.3s ease;

}

Assignment 8: Create a Reusable Card Component with JavaScript

Objective: Create a reusable card component using JavaScript, where you can pass different properties (e.g., image, title, description).

Steps:

1. Write a function that creates a card element and accepts parameters for the image, title, and description.

2. Use this function to add multiple cards to the page.

Solution:

html

Copy code

function createCard(imgSrc, title, description) {

const card = document.createElement('div');

card.classList.add('card');

const img = document.createElement('img');

img.src = imgSrc;

img.alt = title;

img.classList.add('card-img');

const body = document.createElement('div');

body.classList.add('card-body');

const cardTitle = document.createElement('h5');

cardTitle.classList.add('card-title');

cardTitle.textContent = title;

const cardDescription = document.createElement('p');

cardDescription.classList.add('card-description');

cardDescription.textContent = description;

const button = document.createElement('button');

button.classList.add('card-btn');

button.textContent = 'Add to Cart';

body.appendChild(cardTitle);

body.appendChild(cardDescription);

body.appendChild(button);

card.appendChild(img);

card.appendChild(body);

return card;

}

const productList = document.getElementById('product-list');

productList.appendChild(createCard('product1.jpg', 'Product 1', 'Description for product 1'));

productList.appendChild(createCard('product2.jpg', 'Product 2', 'Description for product 2'));

</script>

Assignment 9: Add Card Titles Dynamically

Objective: Dynamically change the card title by passing a new title to the card component.

Steps:

1. Modify the createCard function to accept a new title as an argument.

2. Create cards with different titles dynamically.

Solution:

javascript

Copy code

function createCard(imgSrc, title, description) {

const card = document.createElement('div');

card.classList.add('card');

const img = document.createElement('img');

img.src = imgSrc;

img.alt = title;

img.classList.add('card-img');

const body = document.createElement('div');

body.classList.add('card-body');

const cardTitle = document.createElement('h5');

cardTitle.classList.add('card-title');

cardTitle.textContent = title;

const cardDescription = document.createElement('p');

cardDescription.classList.add('card-description');

cardDescription.textContent = description;

const button = document.createElement('button');

button.classList.add('card-btn');

button.textContent = 'Add to Cart';

body.appendChild(cardTitle);

body.appendChild(cardDescription);

body.appendChild(button);

card.appendChild(img);

card.appendChild(body);

return card;

}

const productList = document.getElementById('product-list');

productList.appendChild(createCard('product1.jpg', 'New Product Title', 'This is a new description.'));

Assignment 10: Styling Cards with a Border Radius and Shadow

Objective: Apply a border-radius and shadow effect to the card for a modern look.

Steps:

1. Add a border-radius property to the card to make the corners rounded.

2. Add a box-shadow for a subtle shadow effect.

Solution:

css

Copy code

.card {

border-radius: 12px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease;

}

.card:hover {

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

}

These assignments cover a variety of skills such as layout, responsiveness, interaction, and creating reusable components in a web development context.

4o mini

You said:

WRITE 50 no of MCQs only FROM ABOVE CONCEPT with explanation

ChatGPT said:

ChatGPT

Here are 50 multiple-choice questions (MCQs) based on the concepts of building reusable card components, using Flexbox and Grid for layout, and creating product listings. Each question is followed by an explanation.

1. What is the primary purpose of a card component in web design?

A) To create an animated navigation bar
B) To display multiple items in a grid
C) To display content in a structured, easily scannable way
D) To create a pop-up modal

Answer: C) To display content in a structured, easily scannable way
Explanation: Card components are used to organize content visually, often with images, titles, descriptions, and buttons, making it easy to present information in a modular and scannable way.

2. Which HTML element is commonly used to wrap a card component?

A) <div>
B) <header>
C) <footer>
D) <article>

Answer: A) <div>
Explanation: A <div> is often used to create a wrapper for the card component because it is a block-level element that can contain other elements like images, text, and buttons.

3. What CSS property is used to create the rounded corners of a card?

A) border-radius
B) border-style
C) box-shadow
D) padding

Answer: A) border-radius
Explanation: The border-radius property in CSS is used to round the corners of an element, such as a card, to give it a more modern and appealing look.

4. How can you make sure that an image inside a card fills the container while maintaining its aspect ratio?

A) object-fit: cover;
B) object-position: center;
C) background-size: contain;
D) width: 100%;

Answer: A) object-fit: cover;
Explanation: The object-fit: cover; CSS property ensures that the image covers the entire area of the card while maintaining its aspect ratio.

5. Which CSS property allows you to control the space between flex items?

A) gap
B) justify-content
C) padding
D) margin

Answer: A) gap
Explanation: The gap property in CSS Flexbox is used to create consistent space between flex items.

6. What is the purpose of using flex-wrap in Flexbox?

A) To specify the direction of the flex items
B) To allow the flex container to grow and shrink
C) To prevent items from overflowing by wrapping them to the next line
D) To add spacing between items

Answer: C) To prevent items from overflowing by wrapping them to the next line
Explanation: The flex-wrap property allows items in a Flex container to wrap onto the next line if there is not enough space.

7. How would you make a card layout responsive using CSS Grid?

A) By setting grid-template-columns: 1fr;
B) By setting grid-template-columns: repeat(3, 1fr);
C) By using media queries to change grid-template-columns based on screen size
D) By setting display: inline-block;

Answer: C) By using media queries to change grid-template-columns based on screen size
Explanation: Media queries are used to make the layout responsive by changing the number of columns in the grid depending on the screen size.

8. Which CSS property is used to define the main axis in a Flexbox layout?

A) flex-direction
B) align-items
C) justify-content
D) gap

Answer: A) flex-direction
Explanation: The flex-direction property defines the main axis (either horizontally or vertically) for the Flexbox container.

9. What does the justify-content property do in Flexbox?

A) It aligns items horizontally
B) It aligns items vertically
C) It adds space between items
D) It defines the order of items

Answer: A) It aligns items horizontally
Explanation: The justify-content property is used to align the flex items along the main axis (usually horizontally).

10. What does the align-items property do in Flexbox?

A) It aligns items horizontally
B) It controls the size of flex items
C) It aligns items vertically
D) It determines how the items should wrap

Answer: C) It aligns items vertically
Explanation: The align-items property is used to align flex items along the cross axis (usually vertically).

11. How can you create a responsive card layout that changes from 3 columns to 1 column on smaller screens using Grid?

A) grid-template-columns: 1fr;
B) grid-template-columns: repeat(3, 1fr);
C) Use media queries with grid-template-columns
D) Set flex-direction: column; in media queries

Answer: C) Use media queries with grid-template-columns
Explanation: Media queries can be used to adjust the number of columns in a CSS Grid layout based on the screen size.

12. What is the purpose of the box-shadow property in CSS?

A) To create a border around an element
B) To apply a shadow effect behind an element
C) To make the text bold
D) To change the color of an element

Answer: B) To apply a shadow effect behind an element
Explanation: The box-shadow property is used to add shadow effects behind an element, giving it a 3D appearance.

13. Which of the following is a valid Flexbox property for controlling the size of the items?

A) flex-grow
B) align-self
C) flex-direction
D) box-sizing

Answer: A) flex-grow
Explanation: The flex-grow property controls how much a flex item will grow relative to the other items inside the Flex container.

14. What does the object-position: center; CSS property do?

A) Aligns the image to the center of the card
B) Centers the text inside the card
C) Specifies the position of the image inside the container
D) Changes the size of the image

Answer: C) Specifies the position of the image inside the container
Explanation: The object-position property allows you to control the position of the image inside its container when using object-fit.

15. Which Flexbox property would you use to change the direction of items in a container?

A) flex-wrap
B) flex-direction
C) align-items
D) justify-content

Answer: B) flex-direction
Explanation: The flex-direction property determines the direction in which the flex items are placed inside the container (row or column).

16. What CSS property is used to prevent items in a Flexbox layout from stretching to fill the container?

A) align-items: center;
B) flex-grow: 0;
C) justify-content: flex-start;
D) align-self: stretch;

Answer: B) flex-grow: 0;
Explanation: The flex-grow property controls how much a flex item grows to fill available space. Setting it to 0 prevents the item from stretching.

17. Which CSS Grid property allows you to create multiple columns in a container?

A) grid-template-columns
B) grid-template-rows
C) grid-gap
D) grid-auto-rows

Answer: A) grid-template-columns
Explanation: The grid-template-columns property defines the number of columns in a CSS Grid layout.

18. How can you control the space between items in a CSS Grid layout?

A) gap
B) padding
C) justify-content
D) margin

Answer: A) gap
Explanation: The gap property is used to control the space between items in both Flexbox and Grid layouts.

19. What property would you use to add extra space between items in a Flex container?

A) justify-content
B) align-items
C) gap
D) padding

Answer: C) gap
Explanation: The gap property is used to set the space between flex items in a Flexbox layout.

20. What does the flex shorthand property do in Flexbox?

A) Controls the item’s size
B) Specifies the alignment of items
C) Specifies the direction of the items
D) Specifies how a flex item should grow, shrink, and its initial size

Answer: D) Specifies how a flex item should grow, shrink, and its initial size
Explanation: The flex property is shorthand for flex-grow, flex-shrink, and flex-basis, which control the size and behavior of flex items.

21. Which CSS property is used to make a card look elevated by adding a shadow effect?

A) box-shadow
B) border-radius
C) outline
D) background-color

Answer: A) box-shadow
Explanation: The box-shadow property creates shadow effects around an element, giving it an elevated appearance.

22. Which layout model is more suitable for a flexible, responsive grid of items?

A) Block Layout
B) Flexbox Layout
C) Inline Layout
D) Grid Layout

Answer: B) Flexbox Layout
Explanation: Flexbox is designed for flexible and responsive layouts, ideal for aligning items in a row or column.

23. Which property is used to change the order of items in a Flex container?

A) order
B) flex-grow
C) flex-shrink
D) flex-basis

Answer: A) order
Explanation: The order property in Flexbox is used to change the visual order of flex items without altering the HTML structure.

24. How would you center an element vertically using Flexbox?

A) justify-content: center;
B) align-items: center;
C) flex-direction: column;
D) align-self: center;

Answer: B) align-items: center;
Explanation: The align-items property with the value center centers the items vertically in a Flex container.

25. In CSS Grid, what does grid-template-areas allow you to do?

A) Define a gap between grid items
B) Specify the layout by naming areas in the grid
C) Create more columns
D) Align items horizontally

Answer: B) Specify the layout by naming areas in the grid
Explanation: The grid-template-areas property allows you to define grid items using named areas, making the layout easier to manage and more readable.

I'll continue with the rest of the questions in the next step due to space limitations. Please let me know if you'd like me to finish it!

4o mini

You said:

rest 25

ChatGPT said:

ChatGPT

Here are the remaining 25 multiple-choice questions (MCQs) based on the concepts of building reusable card components, using Flexbox and Grid for layout, and creating product listings:

26. What does the align-self property do in Flexbox?

A) It controls the size of individual items
B) It overrides the align-items property for individual items
C) It controls the order of items in a container
D) It defines the direction of flex items

Answer: B) It overrides the align-items property for individual items
Explanation: The align-self property allows you to override the align-items setting for a specific flex item.

27. How would you make a card layout responsive using Flexbox?

A) Use flex-wrap: wrap;
B) Use flex-direction: row;
C) Use flex-grow: 0;
D) Use grid-template-columns: 1fr;

Answer: A) Use flex-wrap: wrap;
Explanation: The flex-wrap: wrap; property allows flex items to wrap onto the next line when the container's width is too small to fit them.

28. What does grid-template-rows define in CSS Grid?

A) The number of columns
B) The number of rows in the grid
C) The alignment of grid items
D) The gaps between rows

Answer: B) The number of rows in the grid
Explanation: The grid-template-rows property defines the number of rows and their respective sizes in a CSS Grid layout.

29. Which Flexbox property allows you to distribute space between items equally along the main axis?

A) justify-content: space-between;
B) align-items: center;
C) flex-direction: row;
D) flex-wrap: wrap;

Answer: A) justify-content: space-between;
Explanation: The justify-content: space-between; property ensures that the space between flex items is distributed evenly along the main axis.

30. What is the default value of the flex-direction property in Flexbox?

A) row-reverse
B) column
C) row
D) column-reverse

Answer: C) row
Explanation: The default value of the flex-direction property is row, which places flex items horizontally.

31. How can you control the number of columns in a CSS Grid layout?

A) grid-template-columns
B) grid-auto-columns
C) grid-gap
D) flex-wrap

Answer: A) grid-template-columns
Explanation: The grid-template-columns property is used to define the number of columns and their widths in a CSS Grid layout.

32. Which CSS property is used to create space between rows in CSS Grid?

A) grid-template-rows
B) grid-gap
C) column-gap
D) grid-auto-rows

Answer: B) grid-gap
Explanation: The grid-gap property is used to define the space between both rows and columns in a CSS Grid layout.

33. How would you apply a hover effect to a card in CSS?

A) Use :hover pseudo-class on the .card class
B) Use hover property directly on the card
C) Apply box-shadow directly to the div element
D) Use transition on the grid-template property

Answer: A) Use :hover pseudo-class on the .card class
Explanation: The :hover pseudo-class is used to apply styles when the user hovers over an element, such as a card, to create interactive effects.

34. Which of the following is a valid CSS Grid property to define columns and rows at the same time?

A) grid-template
B) grid-template-areas
C) grid-template-columns
D) grid-template-rows

Answer: A) grid-template
Explanation: The grid-template property allows you to define both rows and columns in a grid layout simultaneously.

35. What Flexbox property would you use to reverse the order of items in a container?

A) flex-wrap: reverse;
B) align-items: reverse;
C) flex-direction: row-reverse;
D) justify-content: reverse;

Answer: C) flex-direction: row-reverse;
Explanation: The flex-direction: row-reverse; property changes the order of items in a Flex container to be reversed.

36. How can you make the card layout adapt to different screen sizes using Flexbox?

A) Use flex-basis to control the width of cards
B) Use media queries to adjust flex-direction
C) Set a fixed width for the card container
D) Use min-width on the card elements

Answer: B) Use media queries to adjust flex-direction
Explanation: Media queries can be used to change the layout properties like flex-direction to adapt the card layout to different screen sizes.

37. Which of the following is a valid CSS property to align content to the center of a Flex container?

A) justify-items: center;
B) align-content: center;
C) justify-content: center;
D) align-items: center;

Answer: C) justify-content: center;
Explanation: The justify-content: center; property is used to align the content to the center along the main axis in a Flex container.

38. What does the grid-auto-rows property do in CSS Grid?

A) Defines the size of rows automatically created by the grid
B) Defines the size of the grid columns
C) Defines the number of rows in the grid
D) Sets the gap between rows in a grid

Answer: A) Defines the size of rows automatically created by the grid
Explanation: The grid-auto-rows property specifies the size of the rows that are created automatically by the grid, when content exceeds the defined rows.

39. Which of the following is the correct way to make a Flex container's items align to the bottom?

A) align-items: flex-end;
B) justify-content: flex-end;
C) align-self: flex-start;
D) justify-items: flex-end;

Answer: A) align-items: flex-end;
Explanation: The align-items: flex-end; property aligns flex items to the end of the Flex container on the cross-axis (usually vertically).

40. What CSS property can be used to control the space between a card's text and its edges?

A) padding
B) margin
C) gap
D) border

Answer: A) padding
Explanation: The padding property is used to create space between the content of an element and its border, such as text inside a card.

41. Which Flexbox property allows an item to shrink if the container is too small?

A) flex-shrink
B) flex-grow
C) flex-basis
D) flex-wrap

Answer: A) flex-shrink
Explanation: The flex-shrink property determines how a flex item will shrink when there isn't enough space in the container.

42. In CSS Grid, which property is used to define where an item should be placed in the grid?

A) grid-area
B) grid-template-areas
C) grid-template-columns
D) grid-gap

Answer: A) grid-area
Explanation: The grid-area property is used to specify the location of an item within the grid by referencing grid lines or named areas.

43. How do you set the number of items in each row of a Flexbox layout?

A) flex-wrap: wrap;
B) justify-content: space-between;
C) flex-direction: column;
D) flex-grow: 1;

Answer: A) flex-wrap: wrap;
Explanation: The flex-wrap: wrap; property allows items to wrap onto the next line when the available space is insufficient.

44. Which property in CSS Grid allows you to define how columns or rows should behave when content overflows?

A) grid-auto-flow
B) overflow
C) grid-template-areas
D) grid-template-columns

Answer: A) grid-auto-flow
Explanation: The grid-auto-flow property determines how auto-placed items should be inserted into the grid, and can handle overflow content.

45. How can you make a card layout with equal spacing between items using Flexbox?

A) Use justify-content: space-around;
B) Use align-items: center;
C) Use gap
D) Use flex-wrap: wrap;

Answer: A) Use justify-content: space-around;
Explanation: The justify-content: space-around; property distributes space evenly around flex items.

46. How do you create an equal column layout using CSS Grid?

A) grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
B) grid-template-columns: 1fr 1fr 1fr;
C) grid-template-columns: 100px 100px 100px;
D) flex-wrap: wrap;

Answer: B) grid-template-columns: 1fr 1fr 1fr;
Explanation: The grid-template-columns: 1fr 1fr 1fr; property creates three equal-width columns.

47. What Flexbox property can be used to increase the size of a flex item relative to others?

A) flex-grow
B) flex-shrink
C) flex-basis
D) order

Answer: A) flex-grow
Explanation: The flex-grow property allows an item to grow relative to the other items in the container when there is extra space available.

48. Which of the following properties is used to set the gap between grid columns?

A) grid-gap
B) grid-column-gap
C) grid-row-gap
D) gap

Answer: B) grid-column-gap
Explanation: The grid-column-gap property specifically controls the space between columns in a CSS Grid layout.

49. How do you apply a transition effect on hover to a card's box shadow?

A) Use transition: box-shadow 0.3s;
B) Use box-shadow: hover;
C) Use transition: background-color 0.3s;
D) Use transform: scale(1.1);

Answer: A) Use transition: box-shadow 0.3s;
Explanation: The transition property is used to create smooth animations, such as when a box-shadow changes on hover.

50. In Flexbox, how can you control the size of individual items in a row?

A) Use flex-grow
B) Use flex-basis
C) Use flex-shrink
D) Use align-self

Answer: B) Use flex-basis
Explanation: The flex-basis property defines the initial size of a flex item before the space distribution occurs.

Wednesday, 11 December 2024

Lecture Notes Of Class 17: Building Cards

No comments:

Post a Comment

Search This Blog

Labels

Report Abuse

About Me

Popular Posts

Subscribe Us

Blog Archive

Facebook

Random Posts

Random Posts

Recent Posts