Your first open-source project

💡 CHOOSE YOUR PROJECT

What Will You Build?

Pick one of these beginner-friendly project ideas — or invent your own!

🧮

Simple Calculator

HTML/CSS/JS calculator with basic math operations

📝

To-Do List App

Add, check off, and delete tasks

🧠

Quiz Game

Multiple choice quiz on any topic you love

🔄

Unit Converter

Convert temperature, weight, distance, etc.

⏱️

Pomodoro Timer

Study timer with work/break intervals

✨

Your Own Idea!

Something YOU want to build — the best projects come from your own needs

Pick one and let's go! We'll use a To-Do List as our example, but the steps work for ANY project. 👇

1

Create a GitHub Account

⏱️ 3 minutes

GitHub is the world's largest platform for open-source projects. Over 100 million developers use it. Your GitHub profile will become your portfolio — like a resume that shows what you can actually build!

✓

Go to github.com and click "Sign Up"

✓

Enter your email, create a password, and choose a username

✓

Verify your email address

✓

Complete the setup wizard

💡 Pro Tip: Choose a good username!

Your username will be visible to the world. Choose something professional like your-name or yourname-dev. Avoid random numbers or silly names — employers will see this!

2

Create Your Repository

⏱️ 2 minutes

A repository (or "repo") is like a folder for your project — but with superpowers! It tracks every change you make, lets others contribute, and keeps a complete history of your project.

✓

Click the + button (top right) → "New repository"

✓

Name it something clear: my-todo-app or simple-calculator

✓

Add a description: "A simple to-do list app built with HTML, CSS, and JavaScript"

✓

Select "Public" (this is what makes it open source!)

✓

Check ✅ "Add a README file"

✓

Under "Choose a license" select MIT License

✓

Click "Create repository" 🎉

✅ Congratulations!

You just created your first open-source repository! It already has a README and a license. You're officially an open-source author!

3

Write an Amazing README

⏱️ 10 minutes

The README is the first thing everyone sees when they visit your project. It's like the front door of your house — make it welcoming! A great README explains what your project does, how to use it, and how others can contribute.

Click on the README.md file in your repo, then click the ✏️ pencil icon to edit it. Replace the content with something like this:

📄 README.md

# 📝 My To-Do List App

A simple, beautiful to-do list app built with HTML, CSS, and JavaScript.
100% open source!

## ✨ Features
- ➕ Add new tasks
- ✅ Mark tasks as complete
- 🗑️ Delete tasks
- 💾 Saves to local storage

## 🚀 How to Use
1. Download or clone this repository
2. Open `index.html` in your browser
3. Start adding tasks!

## 🖼️ Screenshot
(Add a screenshot of your app here later!)

## 🤝 Contributing
Contributions are welcome! Please read CONTRIBUTING.md first.

## 📜 License
This project is licensed under the MIT License.

## 👤 Author
Made with ❤️ by [Your Name]
Part of the Alin Li Open Source Course

💡 README Tips

Use emojis to make it friendly! Add a screenshot when your project is ready. Keep it simple — if someone can't understand your README in 30 seconds, they'll leave.

4

Add Your Project Code

⏱️ 20–60 minutes (the fun part!)

Now it's time to add your actual code! On GitHub, click "Add file" → "Create new file". Let's create the main files for a to-do app:

📄 File 1: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My To-Do List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>📝 My To-Do List</h1>
    <div class="input-row">
      <input type="text" id="taskInput"
        placeholder="Add a new task...">
      <button onclick="addTask()">Add</button>
    </div>
    <ul id="taskList"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>
        

🎨 File 2: style.css

style.css

/* Simple, clean todo styling */
body { font-family: sans-serif;
  background: #f0f4ff; margin: 0;
  display: flex; justify-content: center;
  padding-top: 60px; }
.container { background: white;
  border-radius: 16px; padding: 30px;
  width: 400px; box-shadow: 0 4px 20px
  rgba(0,0,0,.08); }
h1 { text-align: center; color: #4338ca; }
.input-row { display: flex; gap: 8px;
  margin: 20px 0; }
input { flex: 1; padding: 10px 14px;
  border: 2px solid #c7d2fe;
  border-radius: 8px; font-size: 1rem; }
button { background: #4f46e5; color: white;
  border: none; padding: 10px 20px;
  border-radius: 8px; font-weight: 700;
  cursor: pointer; }
li { padding: 10px; border-bottom:
  1px solid #eee; list-style: none;
  display: flex; justify-content:
  space-between; align-items: center; }
        

⚡ File 3: app.js

app.js

// My first open-source app!
function addTask() {
  const input =
    document.getElementById('taskInput');
  const list =
    document.getElementById('taskList');
  if (!input.value.trim()) return;

  const li = document.createElement('li');
  li.innerHTML = `
    <span>${input.value}</span>
    <button onclick="this.parentElement
      .remove()" style="background:#ef4444;
      color:white;border:none;padding:4px 10px;
      border-radius:6px;cursor:pointer">
      ✕</button>`;
  list.appendChild(li);
  input.value = '';
  input.focus();
}
// Enter key support
document.getElementById('taskInput')
  .addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTask();
  });
        

💡 For each file

Click "Add file" → "Create new file" → type the filename (e.g., index.html) → paste the code → click "Commit changes". Repeat for each file!

5

Add Contributing Guidelines

⏱️ 5 minutes

A CONTRIBUTING.md file tells other people how they can help improve your project. It's like a welcome sign for new contributors!

📄 CONTRIBUTING.md

# 🤝 Contributing to My To-Do List

Thank you for wanting to contribute! Here's how:

## How to Contribute
1. **Fork** this repository (click the Fork button)
2. **Clone** your fork to your computer
3. **Create a branch**: `git checkout -b my-feature`
4. **Make your changes** and test them
5. **Commit**: `git commit -m "Add cool feature"`
6. **Push**: `git push origin my-feature`
7. **Open a Pull Request** on GitHub

## Ideas for Contributions
- 🎨 Improve the design / CSS
- ✨ Add new features (dark mode, categories)
- 🐛 Fix bugs
- 🌍 Translate to other languages
- 📝 Improve documentation

## Code of Conduct
Be kind, respectful, and helpful.
We're all here to learn! 💜

6

Create Issues for Beginners

⏱️ 5 minutes

Issues are like a to-do list for your project. They tell contributors what needs to be done. Adding "good first issue" labels helps beginners find easy tasks!

✓

Go to the "Issues" tab in your repo

✓

Click "New Issue"

✓

Create issues like: "Add dark mode", "Add categories", "Make it mobile-friendly"

✓

Add the label "good first issue" to easy ones

✓

Add the label "help wanted" to ones where you need help

💡 Why Issues Matter

Issues are how contributors find YOUR project! People search GitHub for "good first issue" labels when they want to start contributing. The more welcoming your issues, the more help you'll get.

7

Share Your Project With the World!

⏱️ 5 minutes

Your project is live! Now let people know about it. Every big project started with one person sharing it.

✓

Share the GitHub link with friends and family

✓

Post about it on social media (Twitter, Reddit, Discord)

✓

Add the project to your GitHub profile README

✓

Submit it to up-for-grabs.net or firsttimersonly.com

✓

Write a blog post about what you learned

🎉

Celebrate — You Did It!

You're now an open-source creator!

Take a moment to appreciate what you just accomplished. You've done what most people never do — you created something and shared it with the world. Your project is now:

✅ Your Project Is Now...

✅ Live on GitHub for the whole world to see
✅ Licensed under MIT — anyone can use, modify, and share it
✅ Has a beautiful README explaining what it does
✅ Has contributing guidelines welcoming new contributors
✅ Has issues labeled for beginners to find
✅ Part of the global open-source community!

You just joined 100 million developers! 🌍🎉

🏆 Congratulations, Open Source Creator!

Every project on GitHub started exactly like this — one person, one idea, one commit. Linux started as a student project. WordPress started as a simple blog tool. Your project is the first step on an incredible journey.

🚀

Keep Building

Add features weekly

🤝

Get Contributors

Welcome everyone

⭐

Get Stars

Share and grow

🌍

Change the World

One commit at a time

Go to GitHub Now! 🐙

«خَيْرُ النَّاسِ أَنْفَعُهُمْ لِلنَّاسِ»

"The best of people are those who are most beneficial to people." — Your open-source project benefits the world. Be among the best.