Skip to content

Latest commit

 

History

History
368 lines (242 loc) · 31.5 KB

File metadata and controls

368 lines (242 loc) · 31.5 KB

image info

Dieses Logo wurde mit 💖 von CandidDeer erstellt

Tweet

Discord PRs Welcome Open Source Love


Ankündigung:

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.


Schnellzugriffsregister


Einführung

Diese Anleitung soll Erst-Beitragenden helfen, Teil eines simplen und einfachen Projektes zu werden.

Ziele

  • Leiste einen Beitrag zu einem Open Source Projekt.
  • Werde vertrauter im Umgang mit GitHub.

Für wen ist diese Anleitung?

  • 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.

Warum sollte ich das machen?

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.

Was werde ich beitragen?

Contributor Card

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.


Übersetzungen

Diese Anleitung ist auch in anderen Sprachen verfügbar: other languages

Arabisch (عربي) Bangla (বাংলা) Chinesisch (Traditionell) (繁體中文) Englisch (English) Französisch (Français)
Deutsch (Deutsch) Hindi (हिंदी) Italienisch (Italiano) Japanisch (日本語) Koreanisch (한국어)
Polnisch (Polski) Portugisisch (Portuguese) Russisch (Русский) Serbisch (Српски) Spanisch (Español)
Turkisch (Türkçe) Ukrainisch (українська) Norwegisch (Norsk)

Übersetzungen für Projekt-Dokumentationen sind stets willkommen. Lies dir den Translation Guide druch, um dort beizutragen.


Installation :)

Zuerst lass die Installationsanwendung ihre Arbeit verrichten.

  1. 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.
  2. 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.

↑ Gehe nach oben ↑


Beitragen

Werde ein(e) Open Source Beitragende(r) in 10 einfachen Schritten.

Voraussichtlich benötigte Zeit: weniger als 30 Minuten.

Schritt 1: Gabele (fork) dieses Verzeichnis (repository)

  • 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.
Fork
Drücke auf den Fork-Knopf
  • Nun hast du eine komplette Kopie dieses Projektes auf deinem Konto.

↑ Gehe nach oben ↑


Schritt 2: Klone dieses Verzeichnis (repository)

  • 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:
Clone
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-Project aus.
  • Drücke auf Clone
Clone project
↪️ Ein abgezweigtes (forked) Projekt hat ein Gabel Symbol auf der linken Seite. Deine Abzweigung hat deinen eigenen GitHub Benutzer an dessen Stelle your fork
  • 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.

↑ Gehe nach oben ↑


Schritt 3: Erstelle einen neuen Zweig (Branch)

  • 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 Master zu 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 Create branch
↪️ Gib deinem Zweig einen Namen, dann drücke auf Create branch Name branch
↪️ Veröffentliche deinen Zweig auf GitHub Name branch
  • 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-card zu 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)

↑ Gehe nach oben ↑


Schritt 4: Öffne die index.html Datei

  • 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 esyour-computer > Documents > GitHub > Contribute-To-This-Project sein.
  • Die index.html Datei ist direkt im Contribute-To-This-Project Ordner.
  • Öffne deinen Code Editor (Sublime, VS Code, Atom..etc), nutze den Datei öffnen Befehl und finde die index.html Datei im Hauptordner des Projektes.
Open index file
↪️ 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.

↑ Gehe nach oben ↑


Schritt 5: Kopiere die HTML-Karten Vorlage

  • 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">
Find card template
  • 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 START Kommentars bis zum Ende des Contributor card END Kommentars.
Copy card template
  • 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.
Paste card template
  • Dies ist nun deine HTML-Karte, welche du anpassen und bearbeiten kannst.

↑ Gehe nach oben ↑


Schritt 6: Passe die Vorlage an

  • Nun werden wir damit anfangen, HTML zu bearbeiten, indem wir die anpassbaren Felder unserer HTML-Karte ändern.
↪️ Ersetze 'Name' mit deinem Namen Change name
  • 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 Change contact
  • 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 den fa-x-twitter teil mit dem beispielsweise passenden Teil fa-facebook für facebook ersetzt. Dann folge wieder den gleichen Schritten wie oben.
Change about
↪️ Nenn uns etwas über dich. Halte dich kurz und präzise. Stelle es dir eher wie einen Tweet als wie einen Blogpost vor.
Change resources
↪️ 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 nach oben ↑


Schritt 7: Übernimm deine Änderungen

  • 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.
Commit changes
↪️ Der nächste Schritt heißt Commit. Das bedeutet ungefährerweise bestätige die Änderungen
Commit changes
↪️ 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
Write commit message and commit
↪️ 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"

↑ Gehe nach oben ↑


Schritt 8: Schiebe (Push) deine Änderungen zu GitHub

  • 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 Push to GitHub
  • 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.

↑ Gehe nach oben ↑


Schritt 9: Reiche eine 'Pull Request' ein

  • 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.
Submit a Pull Request
↪️ Drücke auf Compare and pull request
Open a 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 Master Zweig (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.
Submit a Pull Request
↪️ 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 maintainers angekreuzt.
  • Nun wird eine Pull Request zum Projekt Betreiber gesendet. Sobald diese begutachtet wurde, werden deine Änderungen auf der project web page angezeigt.

↑ Gehe nach oben ↑


Schritt 10: Feiere

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.

↑ Gehe nach oben ↑


Nächste Schritte

  • 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 Tweet.
  • 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 Good First Issue 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.

↑ Gehe nach oben ↑


Anerkennungen

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.

Lizenzen

Dieses Projekt ist lizensiert unter folgender Lizenz: MIT License.

Top 100 Beitragende

GitHub Contributors Image

Zurück nach oben ↑