Contribution Cards is a fun and interactive project where you get to design and customize HTML cards. This project is a fantastic way to learn about open-source contributions, improve your HTML, CSS, JS, Git skills, and showcase your creativity. Whether you're a beginner or an experienced developer, there's something for you here! π€π€
To get started with Contribution Cards, follow these steps:
-
Fork this repository: Click the 'Fork' button at the top right of this page.
-
Clone your forked repository:
git clone https://github.com/your-username/contribution-cards.git
-
Navigate into the project directory:
cd contribution-cards
-
Open
index.html
in your browser to see the project in action and add the data at the end ofindex.html
in root directory (change the code at end of each card for better understanding of codebase structure)
Here's an example (edit with your details)<!--John Doe's Card Start--> <div class="cards john-doe"> <div class="card-head"> <h5 class="card-title">John Doe</h5> <ul class="card-social-links"> <li><a href="https://www.linkedin.com/in/johndoe" class="card-link" data-toggle="tooltip" title="LinkedIn"><i class="bi bi-linkedin"></i></a></li> <li><a href="https://github.com/johndoe" class="card-link" data-toggle="tooltip" title="GitHub"><i class="bi bi-github"></i></a></li> <li><a href="https://johndoe.com" class="card-link" data-toggle="tooltip" title="Portfolio"><i class="bi bi-globe"></i></a></li> </ul> </div> <p class="card-text">John is a software developer with a passion for open-source projects and community engagement.</p> <ul class="card-study-links"> <li><a href="https://www.freecodecamp.org" target="_blank" class="study-link" data-toggle="tooltip" title="FreeCodeCamp"><i class="bi bi-book"></i></a></li> <li><a href="https://www.w3schools.com" target="_blank" class="study-link" data-toggle="tooltip" title="W3Schools"><i class="bi bi-mortarboard"></i></a></li> <li><a href="https://docs.github.com" target="_blank" class="study-link" data-toggle="tooltip" title="GitHub Docs"><i class="bi bi-file-code"></i></a></li> </ul> <h6 class="card-subtitle mb-2 text-muted card-date">Updated on: July 22, 2024</h6> </div> <!--John Doe's Card End-->
-
Open
users.css
incss
directory to update your card background color and color (add at the end for better coding structure)
.john-doe {
background-color: #ff6b6b;
color: white;
}
- Open
users.json
indata
directory to update your card details forauto-merge.yml
updation (add at the end for better coding structure)
{
"name": "John Doe",
"title": "Software Developer",
"socialLinks": {
"linkedin": "https://www.linkedin.com/in/johndoe",
"github": "https://github.com/johndoe",
"portfolio": "https://johndoe.com"
},
"description": "John is a software developer with a passion for open-source projects and community engagement.",
"studyLinks": {
"freeCodeCamp": "https://www.freecodecamp.org",
"w3Schools": "https://www.w3schools.com",
"githubDocs": "https://docs.github.com"
},
"updatedOn": "July 22, 2024"
},
We welcome contributions from everyone. Here are the steps to contribute:
- Click on the 'Fork' button at the top right corner of the repository page.
- Clone your forked repository to your local machine:
git clone https://github.com/your-username/contribution-cards.git
- Create a new branch for your changes:
git switch -c "your-branch-name"
- Make your changes to the project. This might include editing HTML, CSS, or JavaScript files.
- Add and commit your changes with a meaningful commit message:
git add . git commit -m "Add a meaningful commit message"
- Push your changes to your forked repository:
git push origin your-branch-name
- Create a pull request from your forked repository to the original repository. Click the 'New Pull Request' button on the original repository's page and follow the instructions.
Here's a brief overview of the project structure:
βββ assets
βββ CODE_OF_CONDUCT.md
βββ Contributors.md
βββ css
β βββ styles.css
β βββ users.css
βββ data
β βββ users.json
βββ index.html
βββ js
β βββ main.js
βββ MIT-LICENSE.txt
βββ README.md
We appreciate the contributions of the following individuals: Contributors
This is just the beginning! I look forward to making more meaningful contributions and collaborating with this amazing community. Let's build something great together and make Sticky-Memo the best it can be! β€οΈπ€
This project is licensed under the MIT License. See the LICENSE file for details.