Building a Card Component

Xtremilicious / projectlearn-project-based-learning

A curated list of project tutorials for project-based learning.

https://projectlearn.io

MIT License

3.48k stars 327 forks source link

Building a Card Component #44

Closed Arceus-sj closed 1 year ago

Arceus-sj commented 2 years ago

I would like to design and code Info card component using HTML, CSS, Bootstrap 5. Please assign this task to me.

Xtremilicious commented 2 years ago

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.

Arceus-sj commented 2 years ago

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.

Arceus-sj commented 2 years ago

Should I start with coding part or Is there any thing you want to change?

Xtremilicious commented 2 years ago

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.

Arceus-sj commented 2 years ago

I will remove the arrow icon.
Can you explain little bit about repo. I am not that much familiar with REACT.

Arceus-sj commented 2 years ago

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?

Xtremilicious commented 2 years ago

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

Xtremilicious commented 2 years ago

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

Arceus-sj commented 2 years ago

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.

Arceus-sj commented 2 years ago

Check this out I think it looks ok now. what do you think? Card Component

Xtremilicious commented 2 years ago

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 inprojectlearn-project-based-learning/src/components/Dashboard/Content/Project.js

Arceus-sj commented 2 years ago

@Xtremilicious I am facing problem while run this project locally. Do I have to delete the yarn.lock file?

Xtremilicious commented 2 years ago

@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.

nawed2611 commented 2 years ago

Hi! I would like to work/collab on this issue, if its yet to be resolved yet!

Riya123-code commented 2 years ago

can i work on this issue?