مشروعك الأول مفتوح المصدر

💡 CHOOSE YOUR PROJECT

ماذا ستصنع؟

اختر إحدى أفكار المشاريع المناسبة للمبتدئين — أو ابتكر فكرتك!

🧮

Simple Calculator

HTML/CSS/JS calculator with basic math operations

📝

To-Do List App

إضافة المهام ووضع علامة إنجازها وحذفها

🧠

Quiz Game

اختبار اختيار متعدد بأي موضوع تحبه

🔄

Unit Converter

Convert temperature, weight, distance, etc.

⏱️

مؤقّت بومودورو

Study timer with work/break intervals

✨

Your Own Idea!

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

اختر واحدًا ولنبدأ! سنستخدم قائمة مهام مثالًا، لكن الخطوات تصلح لأي مشروع. 👇

1

Create a GitHub Account

⏱️ 3 minutes

GitHub is the world's largest platform for open-source projects. Over 100 مليون مطور 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 أو yourname-dev. تجنّب الأرقام العشوائية والأسماء السخيفة — فأصحاب العمل سيرونها!

2

Create Your Repository

⏱️ 2 minutes

A repository (أو "repo") يشبه مجلدًا لمشروعك — لكن بقدرات خارقة! فهو يتتبع كل تغيير تجريه، ويتيح للآخرين المساهمة، ويحفظ السجل الكامل لمشروعك.

✓

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

✓

اختر له اسمًا واضحًا: my-todo-app أو simple-calculator

✓

أضف وصفًا: «تطبيق بسيط لقائمة المهام مبني باستخدام HTML وCSS وJavaScript»

✓

Select «عام» (وهذا ما يجعله مفتوح المصدر!)

✓

Check ✅ "Add a README file"

✓

Under "Choose a license" select ترخيص MIT

✓

Click «إنشاء مستودع» 🎉

✅ 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

إضافة شيفرة مشروعك

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

حان وقت إضافة شيفرتك الفعلية! على GitHub، انقر «إضافة ملف» → «إنشاء ملف جديد». لننشئ الملفات الرئيسية لتطبيق قائمة مهام:

📄 الملف 1: index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>قائمة مهامي</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

/* تنسيق بسيط ومرتب لقائمة المهام */
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

// تطبيقي الأول مفتوح المصدر!
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
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) → الصق الشيفرة → انقر على "Commit changes". كرّر ذلك لكل ملف!

5

إضافة إرشادات المساهمة

⏱️ 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 «مسألة أولى مناسبة» 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"

✓

أضف التسمية «مسألة أولى مناسبة» to easy ones

✓

أضف التسمية «مساعدة مطلوبة» 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

✓

انشر عنه على وسائل التواصل الاجتماعي (Twitter وReddit وDiscord)

✓

أضف المشروع إلى README لملفك الشخصي على GitHub

✓

Submit it to up-for-grabs.net أو 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...

✅ 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

أضف ميزات أسبوعيًا

🤝

Get Contributors

Welcome everyone

⭐

Get Stars

Share and grow

🌍

Change the World

تثبيت تغيير واحد في كل مرة

Go to GitHub Now! 🐙

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

«خير الناس أنفعهم للناس.» — مشروعك مفتوح المصدر ينفع العالم. كن من الأخيار.