💜 Open Source Contribution Workshop

Learn the complete open source contribution workflow! This workshop teaches you how to fork, edit, commit, and create pull requests using a fun collaborative programming tips board.

🎯 Workshop Learning Goals

By the end of this workshop, you'll know how to:

• Fork a repository on GitHub
• Open projects in GitHub Codespaces
• Edit code and make meaningful contributions
• Commit your changes with clear messages
• Create pull requests to propose your changes
• Collaborate with other developers through code

✨ About the Project

This project creates a virtual board where participants can share programming tips, strategies, and experiences through colorful post-it notes. It's designed specifically to teach the open source contribution workflow in a fun, hands-on way.

Why a tips board? It's simple enough for beginners to contribute, but meaningful enough to create real value for the community!

• Visual post-it board style with random colors and rotations
• Easy contribution through direct HTML code editing
• Responsive layout that simulates tips on a wall

🚀 Step-by-Step Contribution Workflow

Follow these steps to learn the complete open source contribution process:

Step 1: Fork the Repository

1. Click the "Fork" button at the top of this GitHub repository
2. This creates your own copy of the project in your GitHub account

Step 2: Open in GitHub Codespaces

1. In your forked repository, click the green "Code" button
2. Select "Codespaces" tab
3. Click "Create codespace on main"
4. Wait for your development environment to load

Step 3: Make Your Contribution

1. In the Codespaces editor, open index.html

2. Find the <div class="tips-grid"> section

3. Copy this template and paste it below existing tips:

   <article class="tip-card">
       <div class="tip-content">Your programming tip here...</div>
       <div class="tip-author">By: Your Name</div>
   </article>

4. Replace "Your programming tip here..." with your actual tip

5. Replace "Your Name" with your name

Step 4: Commit Your Changes

1. In the left sidebar, click the Source Control icon (looks like a branch)
2. You'll see your changed files listed
3. In the message box, type: Add programming tip by [Your Name]
4. Click the "Commit" button
5. Click "Sync Changes" to push to your fork

Step 5: Create a Pull Request

1. Go back to your fork on GitHub (github.com/yourusername/contribute-to-open-source-workshop)
2. You'll see a banner saying "Compare & pull request" - click it
3. Add a title like: Add programming tip by [Your Name]
4. In the description, explain what tip you added
5. Click "Create pull request"

🎉 Congratulations! You've just completed the full open source contribution workflow!

📁 Project Structure

open-source-workshop/
├── index.html    # Main page with post-it board (this is where you'll add your tip!)
├── styles.css    # Cork board and post-it styles
├── script.js     # JavaScript for post-it visual effects
├── logo.png      # Project logo
└── README.md     # This file - workshop instructions

💡 Workshop Tips for Instructors

• Ideal group size: 5-20 participants
• Time needed: 30-45 minutes
• Prerequisites: Basic understanding of what GitHub is
• What participants need: A GitHub account
• Extension ideas:
  • Categorize tips by colors/themes
  • Add a "like" system for popular tips
  • Create team challenges (most creative tip, etc.)
  • Discuss code review process during PR reviews

🎓 What Participants Learn

This workshop covers the essential open source skills:

• Understanding Git workflows
• Using GitHub's web interface
• Working with cloud development environments (Codespaces)
• Writing clear commit messages
• Creating descriptive pull requests
• Basic HTML editing
• Collaborative development practices

---

Made with 💜 for teaching open source contribution workflows.