# Erstelle eine Lebenslauf-Website mit vscode.dev _Wie cool wäre es, wenn ein Recruiter nach deinem Lebenslauf fragt und du ihm einfach eine URL schickst?_ 😎 ## Lernziele Nach dieser Aufgabe wirst du gelernt haben: - Eine Website zu erstellen, um deinen Lebenslauf zu präsentieren ### Voraussetzungen 1. Ein GitHub-Konto. Gehe zu [GitHub](https://github.com/) und erstelle ein Konto, falls du noch keines hast. ## Schritte **Schritt 1:** Erstelle ein neues GitHub-Repository und gib ihm den Namen `my-resume`. **Schritt 2:** Erstelle eine `index.html`-Datei in deinem Repository. Wir fügen mindestens eine Datei direkt auf github.com hinzu, da du ein leeres Repository nicht in vscode.dev öffnen kannst. Klicke auf den Link `creating a new file`, gib den Namen `index.html` ein und wähle die Schaltfläche `Commit new file`. ![Eine neue Datei auf github.com erstellen](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.de.png) **Schritt 3:** Öffne [VSCode.dev](https://vscode.dev) und wähle die Schaltfläche `Open Remote Repository`. Kopiere die URL des Repositorys, das du gerade für deine Lebenslauf-Website erstellt hast, und füge sie in das Eingabefeld ein: _Ersetze `your-username` durch deinen GitHub-Benutzernamen._ ``` https://github.com/your-username/my-resume ``` ✅ Wenn erfolgreich, siehst du dein Projekt und die Datei `index.html` im Texteditor im Browser geöffnet. ![Eine neue Datei erstellen](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.de.png) **Schritt 4:** Öffne die Datei `index.html`, füge den folgenden Code in den Codebereich ein und speichere ihn.
HTML-Code, der für den Inhalt deiner Lebenslauf-Website verantwortlich ist. Dein Name hier!

ÜBER MICH

Schreibe hier etwas über dich!

BERUFSERFAHRUNG

Berufsbezeichnung

Name der Organisation hier | Startmonat – Endmonat

  • Aufgabe 1 - Schreibe, was du gemacht hast!
  • Aufgabe 2 - Schreibe, was du gemacht hast!
  • Beschreibe die Ergebnisse/den Einfluss deiner Arbeit

Berufsbezeichnung 2

Name der Organisation hier | Startmonat – Endmonat

  • Aufgabe 1 - Schreibe, was du gemacht hast!
  • Aufgabe 2 - Schreibe, was du gemacht hast!
  • Beschreibe die Ergebnisse/den Einfluss deiner Arbeit
Füge deine Lebenslaufdetails ein, um den _Platzhaltertext_ im HTML-Code zu ersetzen. **Schritt 5:** Bewege den Mauszeiger über den Ordner `My-Resume`, klicke auf das Symbol `New File ...` und erstelle 2 neue Dateien in deinem Projekt: `style.css` und `codeswing.json`. **Schritt 6:** Öffne die Datei `style.css`, füge den folgenden Code ein und speichere ihn.
CSS-Code zur Formatierung des Layouts der Website. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; max-width: 960px; margin: auto; } h1 { font-size: 3em; letter-spacing: .6em; padding-top: 1em; padding-bottom: 1em; } h2 { font-size: 1.5em; padding-bottom: 1em; } h3 { font-size: 1em; padding-bottom: 1em; } main { display: grid; grid-template-columns: 40% 60%; margin-top: 3em; } header { text-align: center; margin: auto 2em; } section { margin: auto 1em 4em 2em; } i { margin-right: .5em; } p { margin: .2em auto } hr { border: none; background-color: lightgray; height: 1px; } h1, h2, h3 { font-weight: 100; margin-bottom: 0; } #mainLeft { border-right: 1px solid lightgray; }
**Schritt 6:** Öffne die Datei `codeswing.json`, füge den folgenden Code ein und speichere ihn. { "scripts": [], "styles": [] } **Schritt 7:** Installiere die Erweiterung `Codeswing`, um die Lebenslauf-Website im Codebereich zu visualisieren. Klicke auf das Symbol _`Extensions`_ in der Aktivitätsleiste und gib Codeswing ein. Klicke entweder auf die _blaue Installationsschaltfläche_ in der erweiterten Aktivitätsleiste, um die Erweiterung zu installieren, oder nutze die Installationsschaltfläche, die im Codebereich erscheint, sobald du die Erweiterung auswählst, um weitere Informationen zu laden. Direkt nach der Installation der Erweiterung kannst du die Änderungen an deinem Projekt im Codebereich beobachten 😃. ![Erweiterungen installieren](../../../../8-code-editor/images/install-extension.gif) Das wirst du auf deinem Bildschirm sehen, nachdem du die Erweiterung installiert hast. ![Codeswing-Erweiterung in Aktion](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.de.png) Wenn du mit den Änderungen zufrieden bist, bewege den Mauszeiger über den Ordner `Changes` und klicke auf die Schaltfläche `+`, um die Änderungen zu stagen. Gib eine Commit-Nachricht ein _(Eine Beschreibung der Änderungen, die du am Projekt vorgenommen hast)_ und committe deine Änderungen, indem du auf das `Häkchen` klickst. Sobald du mit deinem Projekt fertig bist, wähle das Hamburger-Menü-Symbol oben links, um zum Repository auf GitHub zurückzukehren. Herzlichen Glückwunsch 🎉 Du hast gerade in wenigen Schritten deine Lebenslauf-Website mit vscode.dev erstellt. ## 🚀 Herausforderung Öffne ein Remote-Repository, für das du Berechtigungen hast, um Änderungen vorzunehmen, und aktualisiere einige Dateien. Versuche anschließend, einen neuen Branch mit deinen Änderungen zu erstellen und einen Pull Request zu stellen. ## Wiederholung & Selbststudium Lies mehr über [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) und einige seiner weiteren Funktionen. --- **Haftungsausschluss**: Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.