🚀 Alin Li · peatükk 25 — töötuba

Build Your First
Avatud lähtekoodiga projekt!

In this hands-on workshop, you'll go from zero to a published open-source project on GitHub — step by step. No experience needed!

Hakkame looma! 🔨 See Project Ideas 💡
1
2
3
4
5
6
7
8
💡 CHOOSE YOUR PROJECT

Mida sina lood?

Vali üks neist algajasõbralikest projektiideedest — või mõtle ise midagi välja!

🧮

Simple Calculator

HTML/CSS/JS calculator with basic math operations

📝

To-Do List App

Lisa, märgi tehtuks ja kustuta ülesandeid

🧠

Quiz Game

Valikvastustega test mistahes lemmikteemal

🔄

Unit Converter

Convert temperature, weight, distance, etc.

⏱️

Pomodoro taimer

Study timer with work/break intervals

✨

Your Own Idea!

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

Vali üks ja alustame! Kasutame näitena ülesandeloendit, kuid samad sammud sobivad IGA projekti jaoks. 👇

1

Create a GitHub Account

⏱️ 3 minutes

GitHub is the world's largest platform for open-source projects. Over 100 miljonit arendajat 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 või yourname-dev. Väldi juhuslikke numbreid ja totraid nimesid — tööandjad näevad seda!

2

Create Your Repository

⏱️ 2 minutes

A repository (ehk "repo") on nagu sinu projekti kaust — aga supervõimetega! See jälgib iga tehtud muudatust, võimaldab teistel panustada ja säilitab projekti kogu ajaloo.

✓
Click the + button (top right) → "New repository"
✓
Anna sellele selge nimi: my-todo-app või simple-calculator
✓
Lisa kirjeldus: „Lihtne ülesannete loendi rakendus, mis on loodud HTML-i, CSS-i ja JavaScriptiga”
✓
Select „Avalik“ (just see teebki selle avatuks lähtekoodiks!)
✓
Check ✅ "Add a README file"
✓
Under "Choose a license" select MIT litsents
✓
Click „Loo hoidla“ 🎉
✅ 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

Lisa oma projekti kood

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

Nüüd lisa päris kood! GitHubis klõpsa „Lisa fail“ → „Loo uus fail“. Loome ülesanderakenduse põhifailid:

📄 Fail 1: index.html

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Minu ülesannete loend</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
/* Ülesannete loendi lihtne ja puhas kujundus */ 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
// Minu esimene avatud lähtekoodiga rakendus! 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-klahvi tugi 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) → kleebi kood → klõpsa "Commit changes". Korda iga faili puhul!

5

Lisa panustamisjuhised

⏱️ 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 „sobiv esimene ülesanne“ 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"
✓
Lisa silt „sobiv esimene ülesanne“ to easy ones
✓
Lisa silt „abi oodatud“ 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
✓
Postita sellest sotsiaalmeedias (Twitter, Reddit, Discord)
✓
Lisa projekt oma GitHubi profiili README-faili
✓
Submit it to up-for-grabs.net või 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. Sinu projekt on nüüd:

✅ 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
Lisa funktsioone igal nädalal
🤝
Get Contributors
Welcome everyone
⭐
Get Stars
Share and grow
🌍
Change the World
Üks commit korraga
Go to GitHub Now! 🐙

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

„Parimad inimesed on need, kellest on teistele kõige rohkem kasu.“ — Sinu avatud lähtekoodiga projekt toob maailmale kasu. Ole parimate hulgas.