WIE MAN

HowTo-Startseite

Menüs

Symbolleiste Menüsymbol Akkordeon Registerkarten Vertikale Registerkarten Tab-Kopfzeilen Ganzseitige Registerkarten Hover-Tabs Top-Navigation Reaktionsschnelles Topnav Navigationsleiste mit Symbolen Suchmenü Suchleiste Feste Seitenleiste Seitennavigation Responsive Seitenleiste Vollbildnavigation Off-Canvas-Menü Bewegen Sie die Sidenav-Schaltflächen Seitenleiste mit Symbolen Horizontales Scroll-Menü Vertikales Menü Untere Navigation Responsive Bottom Nav Navigationslinks für den unteren Rand Rechtsbündige Menülinks Zentrierter Menülink Menülinks mit gleicher Breite Festes Menü Schieben Sie die Leiste beim Scrollen nach unten Navigationsleiste beim Scrollen ausblenden Navbar beim Scrollen verkleinern Klebrige Navigationsleiste Navigationsleiste auf Bild Hover-Dropdowns Klicken Sie auf Dropdowns Kaskadierendes Dropdown Dropdown in Topnav Dropdown im Sidenav Antwort Navbar Dropdown Subnavigationsmenü Herunterfallen Mega-Menü Mobiles Menü Vorhang-Menü Eingeklappte Seitenleiste Eingeklapptes Seitenpanel Seitennummerierung Semmelbrösel Schaltflächengruppe Vertikale Schaltflächengruppe Klebrige soziale Leiste Pille-Navigation Responsive Kopfzeile

Bilder

Diashow Diashow-Galerie Modale Bilder Leuchtkasten Responsives Bildraster Bildraster Tab-Galerie Bildüberlagerung verblassen Bildüberlagerungsfolie Bild-Overlay-Zoom Bild-Overlay-Titel Bildüberlagerungssymbol Bildeffekte Schwarz-Weiß-Bild Bildtext Bildtextblöcke Transparenter Bildtext Ganzseitiges Bild Form auf Bild Heldenbild Hintergrundbild verwischen Ändern Sie Bg auf Scroll Side-by-Side-Bilder Abgerundete Bilder Avatar-Bilder Responsive Bilder Bilder zentrieren Miniaturansichten Rand um das Bild Triff das Team Klebriges Bild Spiegeln Sie ein Bild Schütteln Sie ein Bild Portfolio-Galerie Portfolio mit Filterung Bildzoom Bildlupenglas Schieberegler für den Bildvergleich Favicon

Tasten

Alarmschaltflächen Gliederungsschaltflächen Geteilte Schaltflächen Animierte Schaltflächen Verblassende Schaltflächen Schaltfläche auf Bild Schaltflächen für soziale Medien Mehr lesen Weniger lesen Schaltflächen laden Schaltflächen herunterladen Pille-Knöpfe Benachrichtigungsschaltfläche Symbolschaltflächen Weiter/Zurück-Schaltflächen Schaltfläche "Mehr" im Navi Schaltflächen blockieren Textschaltflächen Runde Knöpfe Schaltfläche „Nach oben scrollen“.

Formen

Login Formular Anmeldeformular Checkout-Formular Kontakt Formular Social Login-Formular Anmeldeformular Formular mit Symbolen Newsletter Gestapeltes Formular Responsives Formular Popup-Formular Inline-Formular Eingabefeld löschen Zahlenpfeile ausblenden Text in die Zwischenablage kopieren Animierte Suche Schaltfläche „Suchen“. Vollbildsuche Eingabefeld in der Navigationsleiste Anmeldeformular in Navbar Benutzerdefiniertes Kontrollkästchen/Radio Benutzerdefinierte Auswahl Kippschalter Kontrollkästchen aktivieren Feststelltaste erkennen Auslösetaste bei Enter Passwort-Validierung Kennwortsichtbarkeit umschalten Mehrstufiges Formular Automatische Vervollständigung Deaktivieren Sie die automatische Vervollständigung Deaktivieren Sie die Rechtschreibprüfung Datei-Upload-Schaltfläche Leere Eingabevalidierung

Filter

Liste filtern Filtertabelle Filterelemente Filter-Dropdown Sortierliste Zaubertabelle

Tische

Zebra gestreifter Tisch Tische in der Mitte Tisch in voller Breite Side-by-Side-Tabellen Responsive Tabellen Vergleichstabelle

Mehr

Vollbildvideo Modale Boxen Modal löschen Zeitleiste Scroll-Anzeige Fortschrittsbalken Fertigkeitsleiste Range-Schieberegler Kurzinfos Schweben des Anzeigeelements Popups Zusammenklappbar Kalender HTML enthält Aufgabenliste Lader Bewertung in Sternen Benutzer-Bewertung Overlay-Effekt Wenden Sie sich an Chips Karten Klappkarte Profilkarte Produktkarte Warnungen Aufbieten, ausrufen, zurufen Anmerkungen Etiketten Kreise Stil HR Coupon Gruppe auflisten Liste ohne Aufzählungszeichen Responsiver Text Ausgeschnittener Text Leuchtender Text Feste Fußzeile Klebriges Element Gleiche Höhe Klarfix Reaktionsschnelle Schwimmer Imbissbude Vollbildfenster Scroll-Zeichnung Glatte Schriftrolle Bg-Scroll mit Farbverlauf Klebrige Kopfzeile Header beim Scrollen verkleinern Preistabelle Parallaxe Seitenverhältnis Responsive Iframes Schalten Sie „Gefällt mir“/„Gefällt mir nicht“ um Schalten Sie Ausblenden/Anzeigen um Schalten Sie den Dunkelmodus um Text umschalten Klasse umschalten Klasse hinzufügen Klasse entfernen Aktive Klasse Baumsicht Eigentum entfernen Offline-Erkennung Verstecktes Element finden Webseite umleiten Zoom-Hover Flip-Box Vertikal zentrieren Mittlere Taste in DIV Übergang beim Schweben Pfeile Formen Download-Link Element in voller Höhe Browser Fenster Benutzerdefinierte Bildlaufleiste Bildlaufleiste ausblenden Bildlaufleiste anzeigen/erzwingen Geräte-Look Inhaltlich editierbare Grenze Platzhalterfarbe Textauswahlfarbe Geschossfarbe Vertikale Linie Teiler Symbole animieren Countdown-Timer Schreibmaschine Demnächst Seite Chat-Nachrichten Popup-Chat-Fenster Geteilter Bildschirm Referenzen Abschnittszähler Zitate Diashow Schließbare Listenelemente Typische Geräte-Haltepunkte Ziehbares HTML-Element JS-Medienabfragen Syntax-Highlighter JS-Animationen Länge der JS-Zeichenfolge JS Potenzierung JS-Standardparameter Holen Sie sich die aktuelle URL Holen Sie sich die aktuelle Bildschirmgröße Holen Sie sich Iframe-Elemente

Webseite

Erstellen Sie eine kostenlose Website Machen Sie eine Webseite Erstellen Sie eine statische Website Eine Website erstellen (W3.CSS) Erstellen Sie eine Website (BS3) Erstellen Sie eine Website (BS4) Eine Website erstellen (BS5) Erstellen und Anzeigen einer Website Erstellen Sie eine Link-Tree-Website Erstellen Sie ein Portfolio Erstellen Sie einen Lebenslauf Erstellen Sie eine Restaurant-Website Machen Sie eine Business-Website Erstellen Sie ein WebBook Center-Website Kontaktbereich Über Seite Großer Kopf Beispiel-Website

Netz

2-Spalten-Layout 3-Spalten-Layout 4-Spalten-Layout Erweiterndes Raster Rasteransicht auflisten Gemischtes Spaltenlayout Säulenkarten Zick-Zack-Layout Blog-Layout

Google

Google-Diagramme Google-Schriftarten Google Font-Paarungen Google Analytics einrichten

Konverter

Gewicht umrechnen Temperatur umrechnen Länge umrechnen Geschwindigkeit konvertieren

Bloggen

Holen Sie sich einen Entwicklerjob Werden Sie ein Front-End-Entwickler.

So erstellen Sie einen Online-Lebenslauf

Ein Online-Lebenslauf ist eine digitale Version eines Lebenslaufs.

Es ist ein Überblick über Ihre Erfahrungen, Fähigkeiten, Ausbildung und Erfolge.

Es kann verwendet werden, um sich für einen Job, einen Freelancer-Auftritt, ein Beratungsengagement oder eine Bewerbung an einer Schule zu bewerben.

Der Wert, es online als Website zu haben, besteht darin, dass Menschen aus der ganzen Welt leicht darauf zugreifen können.

Kostenlos meinen Online-Lebenslauf erstellen »

Was ist ein lebenslauf

Der Lebenslauf ist ein Überblick über Ihre Erfahrungen, Kompetenzen und Fähigkeiten.

Es ist vor allem als Dokument bekannt, das zur Bewerbung um Stellen verwendet wird.

Unternehmen und Personalchefs nutzen den Lebenslauf, um sich ein Bild davon zu machen, wer Sie als Profi sind und was Sie können.

Ihr Online-Lebenslauf kann über seinen Link mit Unternehmen, Personalchefs und Personalvermittlern geteilt werden, damit diese auf Sie aufmerksam werden.


Warum einen Online-Lebenslauf erstellen?

Ein Lebenslauf ist für jeden Fachmann relevant.

Ihr Lebenslauf als Website macht es anderen leicht, auf Ihren Lebenslauf zuzugreifen und ihn anzuzeigen.

Es kann z. B. verwendet werden, um einen Job, einen freiberuflichen Job, ein Beratungsengagement oder eine Bewerbung an einer Schule zu bekommen.

Wenn Sie es online haben, können Sie von Menschen auf der ganzen Welt gefunden werden.

Die Gestaltung des Lebenslaufs vermittelt dem Leser einen Eindruck davon, wer Sie sind. Achten Sie darauf, dass es gut und vorzeigbar erscheint!


Was muss ich wissen, um meinen Lebenslauf als Website zu erstellen?

HTML, CSS und JavaScript sind die grundlegenden Sprachen zum Erstellen einer Website.

Sie können einen langen Weg zurücklegen, wenn Sie nur diese drei verwenden!

  1. Erstellen Sie die Struktur mit HTML. Das erste, was Sie lernen müssen, ist HTML, die Standardauszeichnungssprache zum Erstellen von Webseiten.
  2. HTML lernen ❯
  3. Mit CSS gestalten. Der nächste Schritt besteht darin, CSS zu lernen, das Layout Ihrer Webseite mit schönen Farben, Schriftarten und vielem mehr festzulegen.
  4. CSS lernen ❯
  5. Machen Sie es interaktiv mit JavaScript. Nach dem Studium von HTML und CSS sollten Sie JavaScript lernen, um dynamische und interaktive Webseiten für Ihre Benutzer zu erstellen.
  6. JavaScript lernen ❯

So erstellen Sie Schritt für Schritt einen Lebenslauf

Befolgen Sie die Schritte, um Ihren Online-Lebenslauf von Grund auf zu erstellen.


Vorbereitungen

Entscheiden Sie, welchen Code-Editor Sie verwenden möchten, und richten Sie Ihre Umgebung ein.

W3Schools hat einen benutzerfreundlichen Code-Editor namens W3Schools Spaces erstellt . Melden Sie sich an und legen Sie mit wenigen Klicks los.

Kostenlos starten ❯

Erstellen Sie Ihre index.html -Datei. Damit Sie bereit sind, den Code einzugeben.

Alles eingerichtet. Lass uns gehen!


Schritt Eins: Fügen Sie ein Website-Layout hinzu

Erstellen Sie eine responsive Website von Grund auf neu.

Lesen Sie hier, wie Sie ein Website-Layout erstellen: So erstellen Sie ein Website-Layout


Ein Lebenslauf kann auf verschiedene Arten erstellt werden.

Es gibt keine Einheitsgröße .

Denken Sie daran , warum, wie und wofür Sie es bauen.

Erstellen Sie den Lebenslauf, der zu Ihnen passt.


Schritt Zwei: Planen Sie Ihre Inhalte

Überlegen Sie, wie Sie Ihren Lebenslauf gestalten möchten.

  • Welche Informationen möchten Sie aufnehmen?
  • Welchen Eindruck möchten Sie beim Leser vermitteln?
  • Wie möchten Sie sich als Profi präsentieren?

Schritt drei: Inhalte hinzufügen

Fügen Sie die wesentlichen Abschnitte hinzu:

  1. Abschnitt Kontaktinformationen
  2. Abschnitt Zusammenfassung der Schlüssel
  3. Abschnitt Bildung
  4. Abschnitt Berufserfahrung

Weitere Codeausschnitte finden Sie in unserer Anleitungsbibliothek: Anleitungsbibliothek

1. Abschnitt Kontaktinformationen.

Fügen Sie Ihren Namen und Ihre Kontaktinformationen hinzu.

Der Abschnitt Kontaktinformationen informiert den Leser darüber, wie er mit Ihnen in Kontakt treten kann.

wichtiger zusammenfassender Abschnitt

2. Abschnitt Zusammenfassung der Schlüssel.

Schreiben Sie eine kurze Zusammenfassung, die Ihre Erfahrungen, Kompetenzen und Fähigkeiten hervorhebt.

Die Personalisierung des Textes kann Sie hervorheben.

Die Schlüsselzusammenfassung hilft dem Leser, sich ein Bild davon zu machen, wer Sie als Fachmann sind.

Halten Sie es kurz und einfach.

wichtiger zusammenfassender Abschnitt

3. Abschnitt Bildung.

Geben Sie einen Überblick über Ihren Bildungshintergrund.

Geben Sie Details wie die Institution, den Abschluss und das Jahr an.

Berufliche Kurse und Zertifizierungen können auch als Ausbildung aufgeführt werden.

Abschnitt Bildung

4. Abschnitt Berufserfahrung.

Listen Sie die Jobs auf, die Sie hatten.

Fügen Sie Details zu jedem Job hinzu, darunter das Jahr, Ihre Rolle und Ihre Verantwortlichkeiten.

Andere Erfahrungen wie Projekte und freiberufliche Auftritte können ebenfalls Teil dieser Liste sein.

Abschnitt Berufserfahrung

Beispiel Lebenslauf

Wir haben Ihnen eine Vorlage erstellt, die Sie verwenden und mit der Sie bauen können.

Sie können die Lebenslaufvorlage in W3Schools Spaces laden . Beginnen Sie mit der Veröffentlichung Ihres Online-Lebenslaufs mit wenigen Klicks.

Veröffentlichen Sie kostenlos meinen Lebenslauf ❯

* Keine Kreditkarte benötigt

Lebenslauf-Vorlage


W3Schulräume

W3Schulräume

Erstellen und veröffentlichen Sie Ihren Online-Lebenslauf mit W3Schools Spaces.

Kostenlos starten