Xtremilicious
Building a Card Component
I would like to design and code Info card component using HTML, CSS, Bootstrap 5. Please assign this task to me.
Hey @Arceus-sj, thanks for your interest in contributing to ProjectLearn.
Problem Statement: Several suggestions point towards a redesign of our project card component. This is our current design: Preview link: https://projectlearn.io/learn/web-development
As a starting step, please share mockup designs of your idea regarding the card component (as shown above) - How to make it more intuitive/appealing?
Let me know if you have any queries about the above problem statement.
Sorry for the delay sir but I used Figma for the first time and yesterday I learned how to use the tools given in figma.
So, today I create a card component design. Look at the design and give your views on it.
Should I start with coding part or Is there any thing you want to change?
Looks pretty good to me. The green arrow button can be omitted- instead, the arrow functionality can be given to the whole card itself - that is, on clicking the card, it takes you to the project details page.
Also. the top technologies are dynamic and there are around 40+ technologies for different projects. Let me know how are planning on handling icons for all of them. We can discuss that.
I'm assuming you have already run this project locally.
- But before you start coding, have a look and play with this file (includes CSS as well as HTML/JS):
The card component lies in
projectlearn-project-based-learning/src/components/Dashboard/Content/Project.js - Make some code/CSS changes to see the changes in action on your locally deployed project.
Let me know if you have any questions.
- I will remove the arrow icon.
- Can you explain little bit about repo. I am not that much familiar with REACT.
And talking about the top technologies, If I will get all the technologies icons then I will change them but it take some time otherwise I will change the style of all the technologies and give them a unique colour with same font. is that okay?
- I will remove the arrow icon.
- Can you explain little bit about which repo i have to fork and clone. Then I am able to run the project locally.
https://github.com/Xtremilicious/projectlearn-project-based-learning
And talking about the top technologies, If I will get all the technologies icons then I will change them but it take some time otherwise I will change the style of all the technologies and give them a unique colour with same font. is that okay?
I don't think that's practical. Let's keep it as text for now. Do share a revised mockup with the technologies as text - lets see how we can make the styling more appealing
And talking about the top technologies, If I will get all the technologies icons then I will change them but it take some time otherwise I will change the style of all the technologies and give them a unique colour with same font. is that okay?
I don't think that's practical. Let's keep it as text for now. Do share a revised mockup with the technologies as text - lets see how we can make the styling more appealing
Okay I will do that.
Yep, you can start dev in the cloned repo. Would love to keep a track of your daily/periodic progress as well. You can share screenshots in this thread, or ask any queries that you may have.
Just a reminder. Make your changes in this file only:
The card component lies in projectlearn-project-based-learning/src/components/Dashboard/Content/Project.js
@Xtremilicious I am facing problem while run this project locally. Do I have to delete the yarn.lock file?
@Xtremilicious I am facing problem while run this project locally. Do I have to delete the yarn.lock file?
Nope, make sure you are in the correct folder: Run: npm install npm run dev
Share screenshots of your issue - that would be more helpful.
Hi! I would like to work/collab on this issue, if its yet to be resolved yet!
