Merge 97a56ce5fa into 08b771c863

Projects/1-Beginner/Responsive-Cards-Grid.md

@@ -0,0 +1,31 @@
+# Key Value
+
+**Tier:** 1-Beginner
+
+Create a simple web application that displays a responsive grid of cards.
+Each card should contain an image and some text information.
+The grid should automatically adjust the number of cards displayed per row based on the screen size, providing a seamless user experience on both desktop and mobile devices.
+
+## User Stories
+
+-   [ ] User can see a grid of cards on the web page.
+-   [ ] User can click on a card to view more details in another page/modal or open a related link.
+-   [ ] User can see the grid layout adapt to the screen size. For instance, on a wide screen, it might display 4 cards in a row, but on a narrow screen, it could display 2 cards in a row. For small screens, show 1 card in a row.
+
+## Bonus features
+
+-   [ ] User can filter and search for specific cards within the grid using a search bar.
+-   [ ] User can customize the appearance of the cards, such as changing the card background color etc.
+-   [ ] User can sort the cards based on different criteria (e.g., alphabetical order, date, popularity).
+-   [ ] User can dynamically add and remove cards from the grid through a user-friendly interface.
+-   [ ] Try doing it without using Media Queries 🤪
+
+## Useful links and resources
+This beginner project will help contributors learn about responsive web design, working with grids and cards, and handling user interactions. It's a great starting point for those who want to get familiar with basic web development concepts. Here are some useful resources to get you started.
+
+- [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
+- [Kevin Powell Tutorial Youtube](https://www.youtube.com/watch?v=sKFW3wek21Q&ab_channel=KevinPowell)
+
+## Example projects
+
+[Codepen Project](https://codepen.io/brixiobodino/pen/NWgobwQ)