Dieses Logo wurde mit 💖 von CandidDeer erstellt
Würdest du gerne Betreuer bei diesem Projekt werden und helfen, es am Laufen zu halten? Falls du interessiert bist, lies die Betreuer-Anleitung durch, tritt unserem Discord-Server bei und schick dem Projekt-Betreuungsteam eine Anfrage.
- Einführung
- Ziele
- Für wen ist diese Anleitung?
- Warum sollte ich das machen?
- Was werde ich beitragen?
- Übersetzungen
- Installation! :)
- Beitragen
- Schritt 1: Gabele (fork) dieses Verzeichnis (repository)
- Schritt 2: Klone dieses Verzeichnis (repository)
- Schritt 3: Erstelle einen neuen Zweig (Branch)
- Schritt 4: Öffne die index.html Datei
- Schritt 5: Kopiere die HTML-Karten Vorlage
- Schritt 6: Passe die Vorlage an
- Schritt 7: Übernimm deine Änderungen
- Schritt 8: Schiebe (Push) deine Änderungen zu GitHub
- Schritt 9: Reiche eine Pull Request ein
- Schritt 10: Feiere
- Nächste Schritte
- Anerkennungen
- Lizenzen
- Top 100 Beitragende
Diese Anleitung soll Erst-Beitragenden helfen, Teil eines simplen und einfachen Projektes zu werden.
- Leiste einen Beitrag zu einem Open Source Projekt.
- Werde vertrauter im Umgang mit GitHub.
- Diese Anleitung ist für absolute Anfänger. Wenn du bereits weißt, wie man ein anchor-Tag
<a href="" target=""></a>erstellt und bearbeitet, dann sollte diese Anleitung kein Problem für dich sein. - Diese Anleitung ist auch für jene gedacht, welche schon etwas Erfahrung haben, aber einen ersten Open Source Beitrag leisten wollen, oder mehr Beiträge und Selbstvertrauen auf diesem Gebiet erreichen wollen.
Jeder Web-Entwickler, angehend oder erfahren, muss Git-Versionskontrollsysteme kennen, und GitHub ist der populärste Git Hosting Anbieter, und wird von fast jedem genutzt. Es ist außerdem das Herz der Open Source Gemeinschaft. Mit GitHub vertraut zu sein ist also eine essentielle Fähigkeit. Einen Beitrag zu einem Projekt zu leisten steigert dein Selbstvertrauen und gibt dir Inhalte, welche du auf deinem GitHub-Profil vorzeigen kannst.
Falls du ein neuer Entwickler bist und dich fragst, ob du den Umgang mit Git und GitHub lernen solltest, dann ist hier deine Antwort: You Should've Learned Git Yesterday.
Du wirst eine Karte, genau so wie diese hier, auf dieser Webseite beitragen: Projekt-Startseite. Diese soll deinen Namen, deinen Twitter- bzw. X-Namen, eine kurze Beschreibung sowie 3 Links zu nützlichen Unterlagen für Web-Entwickler, welche du empfiehlst, enthalten.
Du wirst eine Kopie von dem Karten-Template innerhalb der HTML-Datei machen und sie mit deinen eigenen Informationen anpassen.
Diese Anleitung ist auch in anderen Sprachen verfügbar: other languages
Übersetzungen für Projekt-Dokumentationen sind stets willkommen. Lies dir den
Translation Guidedruch, um dort beizutragen.
Note
Diese Anleitung basiert auf GitHub PC. Wenn du im Umgang mit GitHub per Terminal bereits vertraut bist: (Klicke Hier)
Zuerst lass die Installationsanwendung ihre Arbeit verrichten.
- Logge dich in dein GitHub Konto ein. Falls du noch kein Konto besitzt, tritt GitHub bei. Ich empfehle dir, dass du zuerst das GitHub Hello World Tutorial absolvierst, bevor du hier weitermachst.
- Lade die GitHub Desktop Anwendung herunter.
- Alternativ: Wenn du im Umgang mit GitHub per Terminal vertraut bist: Hier ist ein Link zu der CLI-Anleitung.
- Falls du VS Code benutzt, beinhaltet es Git bereits und erlaubt dir, alles Notwendige gleich innerhalb des Editors zu machen.
- Allerdings ist die einfachste Art dieser Anleitung zu folgen, die GitHub Desktop Anwendung zu benutzen.
Nachdem GitHub installiert ist, können wir mit dem Beitrag zum Projekt anfangen.
Werde ein(e) Open Source Beitragende(r) in 10 einfachen Schritten.
Voraussichtlich benötigte Zeit: weniger als 30 Minuten.
- Das Ziel hier ist es, eine Kopie des Projektes auf deinem eigenen Konto anzulegen.
- Ein Verzeichnis (repository oder kurz repo) ist der Name eines Projektes auf GitHub, eine Gabelung (fork) ist eine Kopie von diesem.
- Stell sicher, dass du auf der main page dieses Verzeichnises (repository) bist.
 |
|---|
| Drücke auf den Fork-Knopf |
- Nun hast du eine komplette Kopie dieses Projektes auf deinem Konto.
- Jetzt wollen wir eine lokale Kopie des Projektes anlegen. Das ist eine Kopie, welche auf deinem Gerät gespeichert ist.
- Öffne die GitHub Desktop Anwendung. In der Anwendung:
 |
|---|
| Drücke auf File dann Clone repository |
- Du wirst eine Liste deiner GitHub Projekte und Zweige (Branches) sehen.
- Wähle
<your-github-username>/Contribute-To-This-Projectaus. - Drücke auf Clone
 |
|---|
| ↪️ Ein abgezweigtes (forked) Projekt hat ein Gabel Symbol auf der linken Seite. Deine Abzweigung hat deinen eigenen GitHub Benutzer an dessen Stelle |  |
|---|
- Es wird eine Weile dauern, bis das Projekt auf deine Festplatte kopiert wurde. Ich empfehle, den standard Pfad beizubehalten:
..\Documents\GitHub. - Nun hast du eine lokale Kopie des Projektes.
- Sobald das Verzeichnis geklont ist und du sie in der GitHub Desktop Anwendung geöffnet hast, wird es Zeit, einen neuen Zweig (branch) zu erstellen.
- Ein Zweig (branch) ist ein Weg, um deine Änderungen vom Hauptteil des Projektes namens
Masterzu separieren. Falls zum Beispiel etwas schief läuft und du nicht glücklich über deine Änderungen bist, kannst du diesen Zweig (branch) einfach löschen und das Hauptprojekt (Master) wird nicht davon beeinflusst.
↪️ Drücke auf Current branch, Dann drücke auf New |
 |
|---|---|
↪️ Gib deinem Zweig einen Namen, dann drücke auf Create branch |
 |
| ↪️ Veröffentliche deinen Zweig auf GitHub |  |
- Du kannst dir den Namen frei aussuchen, aber nachdem es ein Zweig ist, um eine Karte mit deinem Namen zu dem Projekt hinzuzufügen, ist es allgemein üblich, den Namen
your-name-cardzu wählen, da es die Intention deines Zweiges (fork) klar zum Ausdruck bringt. - Nun hast du einen eigenen Zweig (branch), unabhängig vom Master-Zweig (Master), erstellt.
- Stelle für die nächsten Schritte sicher, dass du an diesem neuem Zweig arbeitest. Du siehst den Namen des momentan ausgewählten Zweiges (branch) in der Mitte oben in der GitHub Desktop Anwendung, wo Current branch steht.
Arbeite KEINESFALLS am master Zweig (branch)
- Nun musst du die Datei, welche wir gleich öffnen, mit deinem Lieblings-Code Editor öffnen.
- Finde den Projekt Ordner auf deinem Computer. Falls du den Standardpfad ausgewählt hast, sollte es
your-computer > Documents > GitHub > Contribute-To-This-Projectsein. - Die
index.htmlDatei ist direkt imContribute-To-This-ProjectOrdner. - Öffne deinen Code Editor (Sublime, VS Code, Atom..etc), nutze den
Datei öffnenBefehl und finde die index.html Datei im Hauptordner des Projektes.
 |
|---|
| ↪️ Alternativ kannst du die Datei auf deinem Computer suchen, Rechtsklick, öffne mit... deinem Editor |
- Nun ist die Datei in deinem Editor geöffnet und du kannst anfangen, deine Änderungen durchzuführen.
- Wir werden eine Kopie der Kopier-Vorlage anlegen, um an dieser risikofrei arbeiten zu können.
- Genau innerhalb von
<body>, findest du eine Sektion mit dem Namen<div class="container">. Diese Abteilung enthält auch eine Menge anderer Sektionen. - Die ersten 2 Sektionen sind exakt genau so wie:
<div class="row">. Klappe die Beiden zusammen, indem du auf den Pfeil auf deren linke Seite drückst, so wie im Bild darunter gezeigt wird. (Falls du einen anderen Editor benutzt, steht dir diese Funktion eventuell nicht zur Verfügung. In diesem Fall musst du runter scrollen). Das Einklappen macht es einfach einige Code-Teile zu verstecken, an welchen wir keine Änderungen durchführen müssen. - Nun solltest du die Sektion sehen, welche alle anderen Beitrags-Karten (von anderen Beitragenden) enthält:
<div class="grid" id="contributions">
 |
|---|
- In dieser Sektion gibt es eine Unterabteilung namens
== TEMPLATE ==. - Kopiere alles innehalb des roten Bereichs, welcher auf dem Bild zu sehen ist, vom Anfang des
Contributor card STARTKommentars bis zum Ende desContributor card ENDKommentars.
 |
|---|
- Füge nun das Kopierte genau unterhalb der Linie mit dem anzeigendem Kommentar ein; genau über der zuletzt eingefügten Karte vom vorherigen Beitragenden.
- Stelle sicher, dass genau eine Zeile über und unter deiner Karte frei bleibt. Füge außerdem eine weitere freie Zeile zwischen deinem Code und dem Kommentar
=== Paste YOUR CARD directly BELOW this line ===ein. Es ist gute Übung, unseren Code immer übersichtlich zu halten. - Benutze niemals Formatierer. Dieses Projekt hat schönere Werkzeuge zur Verfügung.
 |
|---|
- Dies ist nun deine HTML-Karte, welche du anpassen und bearbeiten kannst.
- Nun werden wir damit anfangen, HTML zu bearbeiten, indem wir die anpassbaren Felder unserer HTML-Karte ändern.
| ↪️ Ersetze 'Name' mit deinem Namen |  |
|---|
- Anmerkuing: Ändere KEINESFALLS
class="name"
↪️ Füge die URL zu deinem Twittter bzw. X-Account ein href="Insert URL here", und gib deinen Twitter bzw. X Namen ein |
 |
|---|
- Falls du lieber eine andere Kontakmöglichkeit angeben möchtest, musst das das Twitter icon in
<i class="fa fa-x-twitter"></i>ersetzen, indem du auf die Seite Font Awesome Icons gehst, nach dem richtigen Icon suchst, und nur denfa-x-twitterteil mit dem beispielsweise passenden Teilfa-facebookfür facebook ersetzt. Dann folge wieder den gleichen Schritten wie oben.
 |
|---|
| ↪️ Nenn uns etwas über dich. Halte dich kurz und präzise. Stelle es dir eher wie einen Tweet als wie einen Blogpost vor. |
 |
| ↪️ Teile mit der Gemeinde 3 Links, welche du hilfreich beim Web-Development findest. Das kann alles Mögliche sein, von Video, Zeitschrift, Artikel bis hin zu Blogposts. Falls du ein Anfänger bist, lasse dich davon nicht einschüchtern, teile was auch immer du kennst, auch wenn es nur Grundlagen sind. Du wirst überrascht sein, wie viele Leute davon profitieren können. |
- Link: Füge den Link
href="here", das#ersetzend, ein. Bitte benutze keinen URL-Kürzer oder versuche eine andere (welcher nicht von der ursprünglichen Website bereitgestellt wurde) Mehtode, um Ähnliches zu erreichen. - Titel: Gib eine kurze Beschreibung bei
title="here"an. - Name: Schreibe den Namen der Ressource hier hin:
>here</a>. - Stelle sicher, dass du all deine Änderungen gespeichert hast..
- Teste deine Änderungen. DIESER SCHRITT IST WICHTIG! Öffne die HTML Datei (index.html) in deinem Browser (z.B. indem du doppelt darauf klickst) und sieh dir an, wie deine Karte aussehen wird. Stelle sicher, dass die Seite noch so aussieht wie davor (mit deiner neuen Karte), und nichts kaputt gegangen ist. Drücke auf deine Links, und stelle sicher, dass diese auch funktionieren. Öffne die Konsole (Strg) + Shift + J (Windows / Linux) oder Cmd + Opt + J (Mac)) und überprüfe, dass keine Fehler aufgetreten sind.
- Sehr gut, du hast deinen Code fertig bearbeitet! Die nächsten Schritte werden dir zeigen, wie du deine Änderungen an GitHub senden kannst, und sie dann zum fertigen verschmelzen (merge) mit dem Hauptprojekt abgeben kannst.
- Gehe zurück in die GitHub Desktop Anwendung.
- Deine Änderungen wurden automatisch dem Vorbereitungsbereich (staging area) hinzugefügt.
- Das bedeutet, dass Git alle gespeicherten Änderungen aufgezeichnet hat.
- Dies sollte in der Anwendung widergespiegelt werden. Alles, was du der Datei hinzugefügt hast, erscheint in grün. Alles, was gelöscht wurde, erscheint in rot.
 |
|---|
↪️ Der nächste Schritt heißt Commit. Das bedeutet ungefährerweise bestätige die Änderungen |
 |
↪️ So sollte der obere Teil deiner GitHub Desktop Anwendung aussehen. Achte auf das Gabel Symbol neben dem Projektnamen bei Current repository, dein Current branch wird den Namen haben, welchen du ihm in Schritt 3 gegeben hast |
 |
↪️ Um Commit betätigen zu können, musst du erst das Summary Feld ausfüllen. In dieser Einreichungsmeldung, kannst du festhalten, welche Änderungen du durchgeführt hast. In diesem Fall wäre "Add my card information" eine vernünftige Meldung. Alternativ kannst du auch noch mehr unter Description eintragen. Drücke auf den Commit Schalter. Dein Button müsste ungefähr Folgendes anzeigen: Commit to "your-branch-name" |
- Deine Änderungen sind nun gespeichert und eingereicht. Allerdings nur lokal, also auf deinem Computer.
- Synchronisieren von lokalen Änderungen mit deinem Online GitHub Konto nennt man Push. Du "schiebst" (pushing) die Änderungen von deinem lokalen Verzeichnis (repository) zu der ferngesteuerten / abgelegenen (remote) Lager (repository) auf GitHub.
↪️ Drücke auf den Push Schalter |
 |
|---|
- Nach einigen Sekunden sollte die Anweisung ausgeführt worden sein, und nun hast du die exakt gleiche Kopie dieses Zweigs (branch) auf deinem Computer, sowie online auf GitHub.
- Nun ist der Moment gekommen, auf den Du gewartet hast: Eine Pull Request (PR) Anfrage.
- Bis jetzt hat all die Arbeit, die du getätigt hast, in deinem Zweig des Projektes stattgefunden, welcher sich, falls du dich erinnerst, auf deinem eigenen GitHub Account befindet.
- Nun ist es an der Zeit, die Änderungen an das Hauptprojekt (master) zu schicken, und diese mit jenem zu verschmelzen (merge).
- Diesen Vorgang nennt man Pull Request, da du den originalen Projektbetreiber bittest, deine Änderungen "in das Projekt zu ziehen".
- Gehe auf die Hauptseite deines Zweiges auf GitHub (dieses hat ein Gabelsymbol und deinen Benutzernamen ganz oben).
- Oben auf der Seite deiner Repository, wirst du eine hervorgehobene "Pull Request"-Nachricht mit einem grünem Button sehen.
 |
|---|
↪️ Drücke auf Compare and pull request |
 |
↪️ So sieht die Open a pull request Seite aus. |
- VERGISS NICHT: Du versuchst deinen Zweig (branch) mit dem originalen Projekt zu verschmelzen, nicht mit dem
MasterZweig (branch) deiner Abzweigung (fork). - Das Bild weiter unten zeigt dir, wie der Header deiner Pull Anfrage aussehen sollte.
- Auf der linken Seite, steht das originale Projekt, gefolgt vom Master-Zweig. Auf der rechten Seite ist deine Abzweigung (fork) und der Zweig (branch), welchen du erstellt hast.
 |
|---|
↪️ Erstelle eine Pull Anfrage: Schreibe einen Titel, füge der Beschreibung optionale Information hinzu, und drücke auf Create pull request |
- Lass dich nicht von all den Einstellungen beunruhigen. Du musst vorerst nur diese drei Schritte durchführen .
- Lasse die Option
Allow edits from maintainersangekreuzt. - Nun wird eine Pull Request zum Projekt Betreiber gesendet. Sobald diese begutachtet wurde, werden deine Änderungen auf der project web page angezeigt.
Das war's. Du hast es geschafft! Du hast nun zu Open Source auf GitHub beigetragen.
Du hast Code zu einer Live-Internetseite beigetragen: https://syknapse.github.io/Contribute-To-This-Project
Deine Änderungen werden nicht sofort sichtbar; zuerst müssen diese begutachtet, angenommen, und vom Projektbetreiber verschmolzen (merge) werden. Sobald diese verschmolzen (merge) wurden, sollte deine Karte live auf der Seite sichtbar sein.
Es ist vollkommen normal, dass ein Begutachter um Änderungen an der Pull Anfrage bittet. Seh es als eine gute Übung, falls es dir einmal passieren sollte. Halte Ausschau nach Kommentaren und erwünschten Änderungen. Sobald du die gewünschten Anpassungen (in deinem eigenem Zweig (branch)) vorgenommen hast, musst du nur noch deine Änderungen übernehmen und erneut auf GitHub "pushen". Die Pull Anfrage wird automatisch alle neuen Änderungen übernehmen.
Ich verspreche dir, dass ich jede neue Karte so schnell wie möglich begutachte und verschmelze (merge), aber ich erledige dies in meiner Freizeit, also sind einige Tage Verzögerung leider nicht zu vermeiden.
- Komme in einer Weile wieder, um nach deiner Pull Anfrage zu sehen.
- Du solltest eine E-Mail von GitHub bekommen, falls deine Änderungen angenommen wurden, oder zusätzliche Änderungen notwendig sind, sowie sobald deine Pull Anfrage mit dem master verschmolzen (merge) wurden und deine Karte hinzugefügt wurde.
- Du kannst auch von dieser kostenlosen Serie lernen, wie du weitere Beiträge leisten kannst: How to Contribute to an Open Source Project on GitHub.
- Falls du dieses Projekt nützlich fandest, gib ihm bitte einen ⭐ Stern ⭐ oben auf der Seite und Tweete darüber, um dieses Projekt weiter zu verbreiten
.
- Du kannst auch unserem Discord-Server beitreten.
- Du kannst mir folgen und mit mir in Kontakt treten 𝕏 (Twitter) oder eine der anderen Optionen nutzen.
- Dieses Projekt ist ein Open Source Projekt. Du bist herzlich dazu eingeladen, Verbesserungsvorschläge zu stellen, Bugs zu beheben, oder auf sonstige Weise mitzuwirken. Eröffne ein issue oder schicke eine pull request.
- Um die Gemeinschaft weiter zu verbessern, seh dir auch den: Discussions-Tab neben den Pull Anfragen an. Dieser Bereich ist dafür da, um dich genauer vorzustellen, an tieferen Diskussionen über Open Source teilzunehmen, und mit den Projekt-Betreibern in Kontakt zu treten. Wirst du uns helfen diese Funktion und Gemeinschaft weiter zu verbessern?
- Vielen Dank für deine Teilnahme an diesem Projekt. Nun kannst du fortfahren, und bei anderen Projekten beitragen; Halte nach dem
Schlüsselwort Ausschau, welches für anfängerfreundliche Problemstellungen gedacht ist. - Ich suche außerdem nach Mitwirkenden, welche mir bei der Begutachtung von eingereichten Pull Anfragen und Verschmelzungen jener helfen. Falls du fortgeschrittenere Git Anwendungspraktiken lernen möchtest, lies den maintainer's guide, trete unserem Discord-Server bei, und frage an, ob du dem Team der Projekt-Betreuer beitreten kannst.
Dieses Projekt ist sehr stark von Roshan Jossey's großartigem first-contributions Projekt und dessen hervorragender Anleitung beeinflusst.
Es ist außerdem besonders von der hervorragenden #GoogleUdacityScholars Gemeinschaft inspiriert. The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.
Dieses Projekt ist lizensiert unter folgender Lizenz: MIT License.