From 97a56ce5faaaa1c6eb313ec4e26f8c22b133dba6 Mon Sep 17 00:00:00 2001 From: kazmi066 Date: Wed, 25 Oct 2023 18:03:48 +0500 Subject: [PATCH] Add responsive cards grid project to beginner --- Projects/1-Beginner/Responsive-Cards-Grid.md | 31 ++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 Projects/1-Beginner/Responsive-Cards-Grid.md diff --git a/Projects/1-Beginner/Responsive-Cards-Grid.md b/Projects/1-Beginner/Responsive-Cards-Grid.md new file mode 100644 index 000000000..119908294 --- /dev/null +++ b/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)