Contributing to Linktree SpeakUp

Welcome! 🎉 We're thrilled that you're interested in contributing to this project. This guide will help you get started, especially if you're new to contributing to an open-source project.

Getting Started

Prerequisites

• A GitHub account
• Git is installed on your computer
• A text editor or IDE (VS Code, Sublime Text, etc.)
• Basic knowledge of HTML, CSS, and JavaScript

First Time Setup

1. Fork the repository

   • Click the "Fork" button at the top right of this repository
   • This creates your own copy of the project

2. Clone your fork

   git clone https://github.com/YOUR-USERNAME/linktree-speakup.git
   cd linktree-speakup

3. Add the original repository as upstream

   git remote add upstream https://github.com/devs-tocantins/linktree-speakup.git

4. Open the project

   • Simply open index.html in your browser to see the project
   • Use your preferred text editor to make changes

How to Contribute

Finding Something to Work On

• Check the Issues tab for open issues
• Look for issues that match your skills
• Feel free to ask questions in the issue comments if you need clarification

Making Changes

1. Create a new branch

   git checkout -b your-feature-name

   Use descriptive names like fix-navigation-bug or add-dark-mode

2. Make your changes

   • Edit HTML, CSS, or JavaScript files as needed
   • Test your changes by opening index.html in your browser
   • Make sure everything still works correctly

3. Test your changes

   • Open index.html in different browsers if possible (Chrome, Firefox, Safari)
   • Check that the website is responsive on different screen sizes
   • Validate your HTML using W3C Validator

4. Commit your changes

   git add .
   git commit -m "Brief description of what you changed"

   Good commit message examples:

   • Fix navigation menu overlap on mobile
   • Add hover effects to buttons
   • Update contact form styling

5. Push your changes

   git push origin your-feature-name

6. Create a Pull Request

   • Go to your fork on GitHub
   • Click "New Pull Request"
   • Write a clear description of what you changed and why

Code Style Guidelines

HTML

• Use lowercase for all HTML tags and attributes
• Use double quotes for attribute values
• Indent with 2 spaces
• Add comments for complex sections

<!-- Good example -->
<div class="navigation-menu">
  <ul class="menu-list">
    <li><a href="#home">Home</a></li>
  </ul>
</div>

CSS

• Use lowercase for class names with hyphens (kebab-case)
• Indent with 2 spaces
• Add comments for complex styling
• Group related properties together

/* Good example */
.navigation-menu {
  /* Layout */
  display: flex;
  justify-content: space-between;
  
  /* Styling */
  background-color: #333;
  padding: 1rem;
}

JavaScript

• Use camelCase for variables and functions
• Use meaningful variable names
• Add comments to explain complex logic
• Use semicolons

// Good example
function calculateTotalPrice(items) {
  let total = 0;
  // Loop through items and sum prices
  for (const item of items) {
    total += item.price;
  }
  return total;
}

Pull Request Guidelines

Before Submitting

• Test your changes in multiple browsers
• Check that your code follows the style guidelines
• Make sure you didn't break any existing functionality
• Update documentation if needed

Pull Request Description

Please include:

• What changes you made
• Why you made these changes
• Screenshots (if visual changes)
• Any issues this fixes (use "Fixes #123")

Example:

## What I Changed
Added a dark mode toggle button to the header

## Why
This addresses issue #45 where users requested a dark theme option

## Screenshots
[Include before/after screenshots]

## Testing
- [x] Tested in Chrome, Firefox, and Safari
- [x] Verified toggle works correctly
- [x] Checked that all text remains readable in dark mode

Fixes #45

Getting Help

Stuck? Here's how to get help:

• Ask in the issue comments - Other contributors are usually happy to help
• Check existing issues - Someone might have had the same question
• Ask questions in your PR - Reviewers can provide guidance
• Join our community - WhatsApp

Common Beginner Questions

Q: I messed up my git history, what do I do? A: Don't worry! You can always delete your branch and start over. It happens to everyone.

Q: My changes look different on my computer vs. the deployed site A: Make sure you're testing in the same browser and clear your cache (Ctrl+F5 or Cmd+Shift+R).

Q: Can I work on multiple issues at once? A: It's better to focus on one issue at a time, especially when starting out. This makes reviews easier.

Code of Conduct

We're committed to creating a welcoming environment for everyone. Please:

• Be respectful and inclusive in all interactions
• Provide constructive feedback
• Help newcomers feel welcome
• Be patient - we all started somewhere!

Recognition

All contributors will be recognized! We'll add you to our contributors list, and you'll be able to see your contributions in the git history forever.

Questions?

Don't hesitate to ask! The best way to learn is by doing, and everyone here wants to help you succeed. You can:

• Comment on any issue
• Start a discussion in the repository
• Ask in the community chat

Thanks for contributing! 🚀