Einführung

  • 5 Minuten

Es ist beeindruckend, was im Internet alles möglich ist. Sie können Weboberflächen erstellen, die auf allen Geräten ausgeführt werden können, alle Arten von Medieninhalten enthalten, und komplizierte Berechnungen durchführen. Sie können sogar Apps erstellen, die wie native Anwendungen aussehen und sich anfühlen.

Wenn Sie noch heute in die Webentwicklung einsteigen möchten, stehen Sie vermutlich vor einer schwindelerregenden Vielzahl von Optionen. In diesem Modul lernen Sie die grundlegenden Komponenten einer Website und einige der Tools kennen, mit denen Sie mit der Webentwicklung beginnen können. Sie setzen HTML, CSS und JavaScript gemeinsam ein, um eine einfache Website zu erstellen, und nutzen Entwicklertools im Browser, um zu verstehen, was abläuft.

Mit diesem grundlegenden Wissen haben Sie bei der Erstellung von Websites einen besseren Kontext, um in Zukunft Entscheidungen zu treffen; Beispielsweise, ob Sie JavaScript-Frameworks auswählen oder eigene JavaScript-Funktionen erstellen sollten, um Ihre Website zu erstellen.

Lassen Sie uns beginnen, indem wir uns ansehen, wo es hingehen soll.

Szenario

Angenommen, Sie sind Webentwickler und sollen die Website Ihres Unternehmens für ein breiteres Kundenspektrum attraktiver gestalten. Damit Ihre Kunden die Benutzeroberfläche auf Ihrer Website anpassen können, entscheiden Sie sich, Unterstützung für helle und dunkle Designs hinzuzufügen. Sie erstellen eine einfache Proof-of-Concept-Website, um die Unterstützung von Designs unter Verwendung von CSS zu demonstrieren, und schreiben eine JavaScript-Funktion zum Umschalten zwischen diesen Designs.

Nachdem dies erfolgt ist, sieht Ihre Website mit ausgewähltem dunklen Design wie dieses Beispiel aus:

Screenshot der fertiggestellten Website im dunklen Design

Was enthält eine Webseite?

Inhalt, Stil und interaktive Logik sind jeweils in HTML-, CSS-und JavaScript-Dateien unterteilt. Ein Entwurfsprinzip bei moderner Programmierung ist die Aufgabentrennung. Zwei der vielen Gründe für die Trennung von Aufgaben sind Einfachheit und Wiederverwendung. Indem Sie beispielsweise HTML-Elemente mit CSS formatieren, können Sie Ihren HTML-Code vereinfachen. Anstatt die Darstellung in jedem Element zu codieren, wenden Sie unabhängig von der Seitenkomplexität CSS-Formatvorlagen auf alle Elemente auf einer Seite an. Darüber hinaus können Sie mehrere HTML-Seiten mit einer einzelnen CSS-Datei verknüpfen, was Ihnen helfen kann, eine einheitliche Darstellung auf Ihrer gesamten Website zu ermöglichen.