Mit der Entwicklung so vieler Programmier-, Stil- und Auszeichnungssprachen wird das Erlernen von Webdesign komplizierter denn je. Glücklicherweise gibt es unzählige Tools, die Ihnen den Einstieg erleichtern. Suchen Sie nach ein paar grundlegenden Ressourcen wie Online-Tutorials oder einem aktuellen Buch über Webdesign. Sobald Sie bereit sind, beginnen Sie damit, die Grundlagen von HTML und CSS zu beherrschen. Dann können Sie mit fortgeschritteneren Webdesign-Sprachen wie JavaScript beginnen!
Schritte
Methode 1 von 4: Webdesign-Ressourcen finden
Schritt 1. Suchen Sie online nach Webdesign-Kursen und -Tutorials
Das Internet ist voll von detaillierten Informationen über Webdesign und vieles davon ist frei verfügbar. Sie können damit beginnen, einige kostenlose Online-Kurse zu Udemy oder CodeCademy zu belegen oder einer Programmier-Community wie freeCodeCamp beizutreten. Auf YouTube finden Sie auch Video-Tutorials zum Webdesign.
- Wenn Sie genau wissen, wonach Sie suchen, versuchen Sie es mit einer Suche mit bestimmten Begriffen (z. B. „Klassenselektoren im CSS-Tutorial“).
- Wenn Sie ein Anfänger ohne Webdesign-Erfahrung sind, lernen Sie zunächst die Grundlagen der Codierung in HTML und CSS kennen.
Schritt 2. Erwägen Sie, einen Kurs an einem örtlichen College oder einer Universität zu belegen
Wenn Sie eine Hochschule oder Universität besuchen, erkundigen Sie sich bei der Informatikabteilung Ihrer Schule oder konsultieren Sie Ihren Kurskatalog, um herauszufinden, ob Webdesign-Kurse verfügbar sind. Wenn Sie nicht zur Schule gehen, prüfen Sie, ob Hochschulen oder Universitäten in Ihrer Nähe Weiterbildungskurse in Webdesign anbieten.
Einige Universitäten bieten Online-Webdesign-Kurse an, die für jeden offen sind, der sich einschreiben möchte. Auf Websites wie Coursera.org finden Sie kostenlose oder erschwingliche Webdesign-Kurse, die von Hochschullehrern unterrichtet werden
Schritt 3. Holen Sie sich einige Webdesign-Bücher aus der Buchhandlung oder Bibliothek
Ein gutes Buch über Webdesign kann eine unschätzbare Referenz sein, wenn Sie Ihr Handwerk erlernen und anwenden. Suchen Sie nach aktuellen Büchern zum allgemeinen Webdesign oder zu bestimmten Codierungsformaten und Sprachen, die Sie lernen möchten.
Das Lesen von Zeitschriften und Blogartikeln zum Thema Webdesign ist auch eine gute Möglichkeit, neue Techniken zu erlernen, sich inspirieren zu lassen und mit den neuesten Trends Schritt zu halten
Schritt 4. Laden Sie eine Webdesign-Software herunter oder kaufen Sie sie
Eine gute Webdesign-Software kann Ihnen helfen, Websites effizienter und effektiver zu erstellen, und ist auch hervorragend geeignet, um die Besonderheiten der Anwendung von Codierung, Skripting und anderen wichtigen Designelementen zu erlernen. Sie können von der Verwendung von Tools profitieren wie:
- Grafikdesignprogramme wie Adobe Photoshop, GIMP oder Sketch.
- Tools zum Erstellen von Websites wie WordPress, Chrome DevTools oder Adobe Dreamweaver.
- FTP-Software zum Übertragen Ihrer fertigen Dateien auf Ihren Server.
Schritt 5. Finden Sie einige Website-Vorlagen, mit denen Sie zu Beginn spielen können
Es ist nichts falsch daran, Vorlagen zu verwenden, wenn Sie die Grundlagen des Webdesigns erlernen. Suchen Sie nach Webseitenvorlagen, die Ihnen gefallen, und sehen Sie sich den Code genau an, um eine Vorstellung davon zu bekommen, wie der Designer die Seite zusammengestellt hat. Sie können auch experimentieren, indem Sie den Code ändern und der Vorlage eigene Elemente hinzufügen.
Suchen Sie nach kostenlosen Website-Vorlagen, um loszulegen, oder experimentieren Sie mit Vorlagen, die mit Ihrer Webdesign-Software geliefert werden
Methode 2 von 4: HTML beherrschen
Schritt 1. Machen Sie sich mit den grundlegenden HTML-Tags vertraut
HTML ist eine einfache Auszeichnungssprache, die verwendet wird, um die grundlegenden Elemente einer Website zu formatieren. Sie können verschiedene Elemente Ihrer Website mithilfe von Tags formatieren. Tags erscheinen in spitzen Klammern vor und nach jedem Element und bieten Anweisungen zur Funktionsweise dieses Elements auf der Seite. Um das Tag zu schließen, setzen Sie ein / vor das letzte Tag innerhalb der spitzen Klammern.
- Wenn Sie beispielsweise möchten, dass ein Teil Ihres Textes Fett gedruckt, würden Sie das Element wie folgt mit dem Tag umgeben: Dieser Text ist fett.
- Einige gängige Tags sind (Absatz), (Anker, der verknüpften Text definiert) und (Schriftart, mit der verschiedene Attribute des Textes wie Größe und Farbe definiert werden können).
- Andere Tags definieren die verschiedenen Teile des HTML-Dokuments selbst. Wird beispielsweise verwendet, um Informationen über die Seite zu enthalten, die für den Betrachter nicht sichtbar sind, wie Schlüsselwörter oder eine Seitenbeschreibung, die in Suchmaschinenergebnissen erscheinen würde.
Schritt 2. Lernen Sie, Tag-Attribute zu verwenden
Einige Tags benötigen zusätzliche Informationen, um anzugeben, wie sie funktionieren sollen. Diese zusätzlichen Informationen erscheinen innerhalb des öffnenden Tags und werden als „Attribut“bezeichnet. Der Attributname erscheint unmittelbar nach dem Tagnamen, getrennt durch ein Leerzeichen. Der Attributwert wird mit einem =-Zeichen an den Attributnamen angehängt und in Anführungszeichen eingeschlossen.
- Wenn Sie beispielsweise einen Teil Ihres Textes rot machen möchten, können Sie dies tun, indem Sie das Tag und ein geeignetes Schriftfarbenattribut verwenden, wie folgt: Dieser Text ist rot.
- Viele der Effekte, die früher routinemäßig mit HTML-Tag-Attributen erzielt wurden, wie das Festlegen unterschiedlicher Schriftfarben, werden jetzt typischerweise stattdessen mit CSS-Codierung erreicht.
Schritt 3. Experimentieren Sie mit verschachtelten Elementen
HTML ermöglicht es Ihnen auch, Elemente innerhalb anderer Elemente zu platzieren, um komplexere Formatierungen zu erstellen. Wenn Sie beispielsweise einen Absatz definieren und dann einen Teil des Textes innerhalb des Absatzes kursiv schreiben möchten, können Sie dies folgendermaßen tun:
Ich liebe Codieren!
Schritt 4. Machen Sie sich mit leeren Elementen vertraut
Einige Elemente in HTML benötigen nicht sowohl öffnende als auch schließende Tags. Wenn Sie beispielsweise ein Bild einfügen, benötigen Sie nur ein einziges „img“-Tag, das den Tag-Namen und alle anderen erforderlichen Attribute enthält (z. B. den Namen der Bilddatei und alternativen Text, den Sie aus Gründen der Barrierefreiheit hinzufügen möchten). Zum Beispiel:
Schritt 5. Erkunden Sie das grundlegende Layout eines HTML-Dokuments
Damit Ihre HTML-basierte Website richtig funktioniert, müssen Sie wissen, wie die gesamte Seite formatiert wird. Dies beinhaltet die Definition, wo Ihr HTML-Code beginnt und endet, sowie die Verwendung von Tags, um zu bestimmen, welche Teile des Codes angezeigt werden, und welche, um versteckte Hintergrundinformationen bereitzustellen. Zum Beispiel:
- Verwenden Sie das Tag, um Ihre Seite als HTML-Dokument zu definieren.
- Fügen Sie als Nächstes Ihre gesamte Seite in die Tags ein, um zu definieren, wo Ihr Code beginnt und endet.
- Platzieren Sie alle Informationen, die dem Betrachter nicht angezeigt werden, wie Seitentitel, Schlüsselwörter und Ihre Seitenbeschreibung, in den Tags.
- Definieren Sie den Hauptteil Ihrer Seite (d. h. alle Texte und Bilder, die der Betrachter sehen soll) mit den Tags.
Methode 3 von 4: Sich mit CSS vertraut machen
Schritt 1. Verwenden Sie CSS, um Stile auf Ihre HTML-Dokumente anzuwenden
CSS ist eine Stylesheet-Sprache, mit der Sie verschiedene Stil- und Designelemente auf Ihre Webseite anwenden können. Wenn Sie beispielsweise einigen Textelementen auf Ihrer Seite selektiv eine bestimmte Schriftart oder Textfarbe zuweisen möchten, können Sie dazu eine CSS-Datei erstellen. Anschließend können Sie die CSS-Datei an einer beliebigen Stelle in Ihr HTML-Dokument einfügen.
-
Wenn Sie beispielsweise möchten, dass eine CSS-Datei alle Absatzelemente in Ihrem HTML-Dokument grün färbt, können Sie eine.css-Datei mit den folgenden Zeilen erstellen:
- P {
- Farbe grün;
- }
- Sie würden dann die Datei unter einem Namen wie style.css speichern.
- Um das Stylesheet auf Ihr HTML-Dokument anzuwenden, würden Sie es als leeres Link-Element innerhalb der Tags einfügen. Zum Beispiel:
Schritt 2. Machen Sie sich mit den Elementen eines CSS-Regelsatzes vertraut
Ein einzelner CSS-Code wird als „Regelsatz“bezeichnet. Der Regelsatz enthält die verschiedenen Elemente, die definieren, was Ihr Code tun soll. Diese beinhalten:
- Der Selektor, der das HTML-Element definiert, das Sie formatieren möchten. Wenn Sie beispielsweise möchten, dass sich Ihr Regelsatz auf Absatzelemente auswirkt, würden Sie Ihren Regelsatz mit dem Buchstaben „p“beginnen.
- Die Deklaration, die die Eigenschaften definiert, die Sie formatieren möchten (z. B. Schriftfarbe). Die Deklaration steht in geschweiften Klammern {}.
- Die Eigenschaft, die angibt, welche Eigenschaft des HTML-Elements Sie formatieren möchten. Sie können beispielsweise innerhalb des Tags angeben, dass Sie die Farbe des Textes formatieren möchten.
- Der Eigenschaftswert definiert insbesondere, wie Sie die Eigenschaft ändern möchten (z. B. wenn die Eigenschaft eine Schriftfarbe hat, wäre der Eigenschaftswert „grün“).
- Sie können mehrere verschiedene Eigenschaften innerhalb einer einzigen Deklaration ändern.
Schritt 3. Wenden Sie CSS auf Ihren Text an, damit Ihr Satz gut aussieht
CSS ist nützlich, um eine Vielzahl von Effekten auf Ihren Text anzuwenden, ohne jede Eigenschaft einzeln in HTML codieren zu müssen. Experimentieren Sie mit dem Ändern verschiedener Schriftsatzeigenschaften in CSS, einschließlich:
- Schriftfarbe
- Schriftgröße
- Schriftfamilie (z. B. der Schriftbereich, den Sie in Ihrem Text verwenden möchten)
- Textausrichtung
- Zeilenhöhe
- Buchstaben-Abstand
Schritt 4. Experimentieren Sie mit Boxen und anderen CSS-Layout-Tools
CSS ist auch nützlich, um Ihrer Seite attraktive visuelle Elemente wie Textfelder und Tabellen hinzuzufügen. Darüber hinaus können Sie damit das Gesamtlayout Ihrer Seite ändern und definieren, wo die verschiedenen Elemente relativ zueinander positioniert sind.
Sie können beispielsweise Attribute wie Breite und Hintergrundfarbe eines Elements definieren, einen Rahmen hinzufügen oder Ränder festlegen, die Platz zwischen den verschiedenen Elementen auf Ihrer Seite schaffen
Methode 4 von 4: Arbeiten mit anderen Designsprachen
Schritt 1. Lernen Sie JavaScript, wenn Sie Ihren Seiten interaktive Elemente hinzufügen möchten
JavaScript ist eine großartige Sprache, die Sie lernen sollten, wenn Sie Ihren Websites erweiterte Funktionen wie Animationen und Popups hinzufügen möchten. Nehmen Sie an einem Kurs teil oder suchen Sie nach Online-Tutorials zum Programmieren in JavaScript und zum Einbinden dieser codierten Elemente in Ihre Webseiten |mit HTML.
Bevor Sie sich mit JavaScript vertraut machen können, müssen Sie sich mit den Grundlagen der Seitenerstellung in HTML und CSS vertraut machen
Schritt 2. Machen Sie sich mit jQuery vertraut, um die JavaScript-Codierung zu vereinfachen
jQuery ist eine JavaScript-Bibliothek, die die Java-Programmierung vereinfachen kann, indem Sie auf eine Vielzahl vorcodierter JavaScript-Elemente zugreifen können. jQuery ist ein großartiges Tool, wenn Sie bereits mit den Grundlagen der JavaScript-Codierung vertraut sind.
Über jQuery.org, die Website der jQuery Foundation, können Sie auf die jQuery-Bibliothek und viele andere wertvolle Ressourcen zugreifen
Schritt 3. Studieren Sie serverseitige Sprachen, wenn Sie an der Back-End-Entwicklung interessiert sind
Während HTML, CSS und JavaScript ideal für Webdesigner sind, die sich auf das konzentrieren, was der Benutzer auf der Website sieht und tut, sind serverseitige Sprachen nützlich, wenn Sie mehr an der Arbeit hinter den Kulissen interessiert sind. Wenn Sie mehr über Backend-Entwicklung erfahren möchten, konzentrieren Sie sich auf das Erlernen von Sprachen wie Python, PHP und Ruby on Rails.
Diese Sprachen sind nützlich, um Daten zu verwalten und zu verarbeiten, die der Benutzer nicht sieht. PHP kann beispielsweise verwendet werden, um sichere Tools zur Passworterstellung auf Websites zu erstellen, die eine Anmeldung erfordern
Hilfedateien
HTML-Spickzettel
CSS-Spickzettel
