From f22cafcf38cb8ad533fd6232c2a87a86b71821df Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Wed, 22 Oct 2025 17:25:09 -0500
Subject: [PATCH] feat(curriculum): add interactive examples to designing cards
lesson (#62946)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
.../672baffc684be178dd02fa06.md | 197 +++++++++++++++++-
1 file changed, 195 insertions(+), 2 deletions(-)
diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md
index a1f0b19c30a..f26a31a84f6 100644
--- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md
+++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md
@@ -5,18 +5,211 @@ challengeType: 19
dashedName: what-are-best-practices-for-designing-cards
---
-# --description--
+# --interactive--
+
+**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work.
Card components are a very common occurrence in e-commerce, social media, and news sites. They are used to help display information in a structured way. When you are designing your cards, it is important to understand best practices so your users can easily understand the information you are trying to convey.
-The first consideration for card design should be simplicity. You don't want your cards to be visually cluttered or display too much information. For example, if a card design is visually cluttered, there will be too much information for the user to process all at once. Having less information and good spacing between items on the card makes it easier for the user to process the information, and allows for multiple cards on the page.
+The first consideration for card design should be simplicity. You don't want your cards to be visually cluttered or display too much information. For example, if a card design is visually cluttered, there will be too much information for the user to process all at once.
+
+Here is an example of a cluttered card design:
+
+:::interactive_editor
+
+```html
+
+
+
+
+
Product Name: Ultimate Edition
+
+ This is a great product that you will love! It has many features and benefits that will make your life easier and more enjoyable. Whether you're at home or on the go, this product is perfect for all situations. Don’t miss out on this incredible offer, buy now and experience the difference!
+
+
+
+
+
Only 3 left in stock!
+
Rated 4.8 stars by 2,391 customers
+
+```
+
+```css
+.card {
+ border: 1px solid #ccc;
+ padding: 16px;
+ width: 300px;
+}
+
+.card img {
+ max-width: 100%;
+ height: auto;
+}
+
+.card h2 {
+ font-size: 1.5em;
+ margin: 8px 0;
+}
+.card p {
+ font-size: 1em;
+ margin: 8px 0;
+}
+
+.card button {
+ background-color: #007BFF;
+ color: white;
+ padding: 10px 16px;
+ border: none;
+ cursor: pointer;
+}
+```
+
+:::
+
+Having less information and good spacing between items on the card makes it easier for the user to process the information, and allows for multiple cards on the page.
+
+Here is an example of a simple card design:
+
+:::interactive_editor
+
+```html
+
+
+
+
+
Product Name
+
+
+```
+
+```css
+.card {
+ border: 1px solid #ccc;
+ padding: 16px;
+ width: 200px;
+ text-align: center;
+}
+
+.card img {
+ max-width: 100%;
+ height: auto;
+}
+
+.card h2 {
+ font-size: 1.5em;
+ margin: 8px 0;
+}
+
+.card button {
+ background-color: #007BFF;
+ color: white;
+ padding: 10px 16px;
+ border: none;
+ cursor: pointer;
+}
+```
+
+:::
Another thing to consider is where the user can click on the card. Some card designs will have a single button, making it obvious where the user can click. Other card designs will have the entire card clickable. When the user hovers over any part of the card, the card will change color or have a shadow effect to indicate that the card is clickable. Whatever design you choose, it needs to be consistent throughout your site and easy for the user to understand.
+:::interactive_editor
+
+```html
+
+
+
+```
+
+```css
+.card {
+ border: 1px solid #ccc;
+ padding: 16px;
+ width: 300px;
+ cursor: pointer;
+}
+
+.card:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card a {
+ text-decoration: none;
+ color: inherit;
+}
+
+.card img {
+ max-width: 100%;
+ height: auto;
+}
+
+.card h2 {
+ font-size: 1.5em;
+ margin: 8px 0;
+}
+
+.card button {
+ background-color: #007BFF;
+ color: white;
+ padding: 10px 16px;
+ border: none;
+ cursor: pointer;
+}
+```
+
+:::
+
Another consideration is the use of media on your cards. Choosing high-quality media can significantly enhance the user experience. If you are using images or videos for say a product card, the higher the quality the more the user will be interested in that product. But if you use poor media quality, then the user might not trust the quality of your products and services.
One of the last things to consider is the use of color hierarchy. You want to make sure that the most important information on the card is the most prominent. You can use bright colors for important elements like a call-to-action button, and light colors for less important items on a card.
+:::interactive_editor
+
+```html
+
+
+
+
+
Product Name
+
+
+```
+
+```css
+.card {
+ border: 1px solid #ccc;
+ padding: 16px;
+ width: 300px;
+ text-align: center;
+}
+
+.card img {
+ max-width: 100%;
+ height: auto;
+}
+
+.card h2 {
+ font-size: 1.5em;
+ margin: 8px 0;
+}
+
+.card button {
+ background-color: #28a745;
+ color: white;
+ padding: 10px 16px;
+ border: none;
+ cursor: pointer;
+}
+```
+
+:::
+
As you continue to work on web applications, keep in mind the different best practices for card design. This will help you create better user experiences for your users.
# --questions--