Grundlagen-Tutorial HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Lerne im Tutorial von Jan Brinkmann die Grundlagen und wende sie direkt an. Damit kannst du dynamische Webseiten erstellen, lesbar unterteilen, Bilder einbinden, Text formatieren und verschiedene Elemente positionieren. Was ist HTML? Was CSS? Und was JavaScript – nach dem Tutorial keine Fragen mehr für dich!

62 Lektionen in einem über 8-stündigen Video-Tutorial zum Einstieg in HTML, CSS und JavaScript
Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Ein Einstieg, der sich in deinem alltäglichen Umgang mit dem Netz bezahlt macht. Lade dir die Grundlagen der Web-Entwicklung in dein Know-how-Repertoire!

Details

Verwendbar mit:
Inhalt: 8 h Video-Training (Kompatibilitätshinweise)
Lizenz: private und kommerzielle Nutzungsrechte
Bonus: inklusive Arbeitsmaterial

Kategorien

CMS & Web

Mit Liebe erstellt von:

Jan Brinkmann

Einführung

kostenlos

Grundlagen HTML, CSS und JavaScript – 01 Einführung

Herzlich willkommen im Kurs!

Projektdatei herunterladen

HTML: Basics

Grundlagen HTML, CSS und JavaScript – 02 Was ist HTML?

Für das Verständnis von HTML hilft es, genauer zu verstehen, was HTML eigentlich ist. Diese Lektion behandelt genau diese Frage.

Grundlagen HTML, CSS und JavaScript – 03 HTML-Dokumente erstellen, anzeigen und editieren

Die entscheidende Frage, wenn du gerade einsteigst: Wie werden HTML-Dokumente erstellt, angezeigt oder verändert? In diesem Video findest du die Antwort.

Grundlagen HTML, CSS und JavaScript – 04 Die DNA von HTML: die Tags

Die Basis von HTML-Dokumenten sind die sogenannten Tags. Das Konzept lernst du in dieser Lektion kennen.

HTML: Struktur von HTML-Dokumenten

Grundlagen HTML, CSS und JavaScript – 05 Der Kopfbereich und Metainformationen

HTML-Dokumente bestehen aus einem Kopfbereich mit Informationen über das Dokument und dem sichtbaren Inhalt. In dieser Lektion geht es zunächst um den Kopfbereich (head).

Grundlagen HTML, CSS und JavaScript – 06 Der Seitenbody mit den Hauptinhalten

Die eigentlichen Inhalte werden im body-Bereich hinterlegt. Diese grundlegende Unterteilung musst du unbedingt verstanden haben. Diese Lektion ist daher in jedem Fall Pflicht!

Grundlagen HTML, CSS und JavaScript – 07 Kommentare

Gerade umfangreiche Dokumente profitieren von Kommentaren, die nicht auf der Webseite selbst angezeigt werden. Sie können den Code übersichtlicher machen und dokumentieren. Lerne, sie zu erstellen.

HTML: Hyperlinks

Grundlagen HTML, CSS und JavaScript – 08 Relative und absolute Pfadangaben

Im Web begegnen dir immer wieder Pfadangaben – und zwar in zwei Varianten: als relative oder als absolute Pfadangabe. Schaue diese Lektion an, um das Konzept zu verstehen.

Grundlagen HTML, CSS und JavaScript – 09 Interne Links

Verweise innerhalb einer Webseite sind extrem häufig. Die Umsetzung findest du in diesem Beitrag.

Grundlagen HTML, CSS und JavaScript – 10 Externe Links und Targets

Verweise auf andere Webseiten sind ebenso wichtig und gehören ebenfalls zum Alltag im Internet. Zudem gibt es mit dem Target eine Angabe, wie die Links geöffnet werden. Lerne, wie du das umsetzt.

Grundlagen HTML, CSS und JavaScript – 11 Verweise im Dokument

Verweise innerhalb von einem Dokument werden auch Anker genannt. Lerne, sie zu setzen und auf Bereiche auf der aktuellen Seite zu verweisen.

HTML: Dokumente unterteilen

Grundlagen HTML, CSS und JavaScript – 12 Überschriften

Zu einer hierarchischen Struktur gehören unter anderem Überschriften. Hier lernst du die verfügbaren Elemente kennen.

Grundlagen HTML, CSS und JavaScript – 13 Zeilenumbrüche, Leerzeichen und Trennlinien

Leerzeichen und Zeilenumbrüche in HTML-Dokumenten sind begrenzt. Es ist wichtig, dass du dieses Konzept kennst.

Grundlagen HTML, CSS und JavaScript – 14 Absätze einfügen

In einem Text spielen Absätze eine wichtige Rolle. Hier lernst du sie zu setzen.

Grundlagen HTML, CSS und JavaScript – 15 Listen erstellen

Gerade im Web müssen Texte übersichtlich sein. Listen helfen dem Betrachter beim Überfliegen. Daher ist die Lektion über geordnete und ungeordnete Listen absolute Pflicht.

Grundlagen HTML, CSS und JavaScript – 16 Tabellen verwenden

Tabellen sind enorm wichtig, um Daten tabellarisch aufzubereiten. Hier lernst du die Grundlagen kennen.

HTML: Sonstige Elemente

Grundlagen HTML, CSS und JavaScript – 17 Bilder einbinden

Ein Web ohne Bilder ist nicht vorstellbar. Du lernst hier, wie du Bilder einbindest.

Grundlagen HTML, CSS und JavaScript – 18 HTML-Entitäten verwenden

Lerne Sonderzeichen als HTML-Entitäten in deinen Dokumenten unterzubringen.

Grundlagen HTML, CSS und JavaScript – 19 Einbinden von iframes

Über iframes bettest du andere Webseiten direkt in deiner Webseite ein.

Grundlagen HTML, CSS und JavaScript – 20 JavaScript einbinden

JavaScripts werden in HTML-Dokumente eingebunden. Hier lernst du, wie das geht.

HTML: Übungen

Grundlagen HTML, CSS und JavaScript – 21 Übung #1: Texte und Überschriften

In der ersten HTML-Praxisübung geht es um Textaufbereitung und das Setzen von Überschriften.

Grundlagen HTML, CSS und JavaScript – 22 Übung #2: ein Rezept selbst erstellen

Hier erstellst du ein Rezept als HTML-Dokument und verwendest dabei grundlegende HTML-Elemente.

Grundlagen HTML, CSS und JavaScript – 23 Übung #3: eine lange Tabelle

Das Wissen rund um Tabellen wird hier nun in der Praxis angewandt.

CSS: Einführung

Grundlagen HTML, CSS und JavaScript – 24 Was ist CSS?

Lerne das Konzept der Cascading Style Sheets kennen.

Grundlagen HTML, CSS und JavaScript – 25 Inline-Styles

Lerne, CSS-Statements direkt den Elementen zuzuweisen.

Grundlagen HTML, CSS und JavaScript – 26 Internal Style Sheets

Interne Stylesheets sind ein weiterer Weg, direkt im Dokument Anweisungen zu hinterlegen.

Grundlagen HTML, CSS und JavaScript – 27 External Style Sheets

Ein sehr häufiger Fall: die Stylesheets werden in externe Dateien ausgelagert und eingebunden.

Grundlagen HTML, CSS und JavaScript – 28 HTML-Attribute class und id

Für das Styling sind die Attribute „class“ und „id“ extrem wichtig. Lerne sie hier kennen.

Grundlagen HTML, CSS und JavaScript – 29 Die Rolle der div-Container

Gerade Container spielen eine wichtige Rolle bei der Arbeit mit CSS. Hier lernst du das Konzept am Beispiel vom div-Tag kennen.

CSS: Grundlagen

Grundlagen HTML, CSS und JavaScript – 30 Schwebende Elemente mit float

Mit dem float-Attribut können Elemente unterschiedlich positioniert werden. Ein zentrales Element beim Design. Pflichtlektion!

Grundlagen HTML, CSS und JavaScript – 31 Elemente positionieren

Auch das position-Attribut ist extrem wichtig und gehört auf jeden CSS-Lehrplan.

Grundlagen HTML, CSS und JavaScript – 32 Innen- und Außenabstände

Lerne die verschiedenen Angaben für Abstände („padding“ und „margin“) kennen.

Grundlagen HTML, CSS und JavaScript – 33 Breite und Höhe festlegen

Die Breite und Höhe (height und width) sind Thema in dieser Lektion.

Grundlagen HTML, CSS und JavaScript – 34 Rahmen (border) setzen

HTML-Elemente können mit einem Rahmen dargestellt werden. Dazu gibt es das border-Attribut, welches du in diesem Video kennenlernst.

Grundlagen HTML, CSS und JavaScript – 35 Schriftgröße festlegen

Verschiedene Schriftgrößen hat jeder schon einmal genutzt. Nach dieser Lektion kannst du sie mit CSS festlegen.

Grundlagen HTML, CSS und JavaScript – 36 Schriftfamilien definieren

Schriftarten sind nicht immer auf jedem Rechner verfügbar. Darum werden im Web eher Schriftfamilien definiert. Lerne in diesem Video, wie das geht.

Grundlagen HTML, CSS und JavaScript – 37 Fetter, kursiver und unterstrichener Text

Die Basis der Textgestaltung: fetter, kursiver und unterstrichener Text. In dieser Lektion stelle ich dir die CSS-Anweisungen vor.

Grundlagen HTML, CSS und JavaScript – 38 Text-Alignment verändern

Die Ausrichtung von Text ist auch aus der Textverarbeitung bekannt und auch im Web nicht unüblich. Finde heraus, wie das mit CSS funktioniert.

Grundlagen HTML, CSS und JavaScript – 39 Hyperlinks aufhübschen

Das Standarddesign von Links kann mittels CSS deutlich verbessert werden. Lerne die verschiedenen Zustände von Links und die entsprechenden CSS-Anweisungen kennen.

JavaScript: Eine Einführung

Grundlagen JavaScript – 01 Was ist JavaScript?

Eine kurze Übersicht zur Frage: „Was ist JavaScript eigentlich genau?“

Grundlagen JavaScript – 02 Internes JavaScript

In diesem Crashkurs bindest du JavaScript in ein HTML-Dokument ein. Zunächst lernst du dies direkt im Dokument zu hinterlegen.

Grundlagen JavaScript – 03 Externes JavaScript

Externe JavaScripts sind ebenfalls wichtig und im Web ständig präsent.

Grundlagen JavaScript – 04 „Document Object Model“ (DOM) und HTML-Elemente

Lerne das „Document Object Model“ kennen.

Grundlagen JavaScript – 05 Daten ausgeben

Daten ausgeben musst du in TVML/TVJS auf diesem Weg nicht, aber es ist trotzdem wichtig für die weiteren Beispiele.

Grundlagen JavaScript – 06 Klick-Events behandeln

Ein wesentliches Feature von JavaScript ist die Steuerung durch Events. Hier lernst du das Konzept am Beispiel von Klick-Events kennen.

Grundlagen JavaScript – 07 Text austauschen

Lerne, wie du auf Elemente zugreifst und den Wert ändern kannst.

JavaScript: Grundlagen

Grundlagen JavaScript – 08 Variablen verwenden

Variablen – zentrales Konzept jeder Programmiersprache. Hier lernst du, wie sie in JavaScript angelegt werden.

Grundlagen JavaScript – 09 Datentypen in JavaScript?

Auch wenn JavaScript keine expliziten Datentypen bei der Deklaration verwendet, solltest du das Konzept dennoch verstehen.

Grundlagen JavaScript – 10 Arithmetik mit JavaScript

Ein Computer (zu Deutsch „Rechner“) ist ohne einfache Arithmetik nicht in der Lage etwas zu berechnen. JavaScript kann dies natürlich auch.

Grundlagen JavaScript – 11 Compound Assignments in JavaScript

Auch wenn du sie nicht direkt selbst verwendest, begegnen dir zusammengesetzte/kombinierte Zuweisungen in der Praxis häufiger. Gut, wenn du die Syntax lesen kannst!

Grundlagen JavaScript – 12 Bedingungen mit if

Ohne Bedingungen ist die Programmierung nur schwer vorstellbar.

Grundlagen JavaScript – 13 for-Schleifen

Auch das Konzept der Wiederholung ist enorm wichtig. Hier lernst Du eine Variante in JavaScript kennen.

Grundlagen JavaScript – 14 while-Schleifen

Auch while-Schleifen haben ihren Einsatzzweck. Gut, wenn du auch sie kennst.

JavaScript: Fortgeschrittene Konzepte

Grundlagen JavaScript – 15 Funktionen definieren

Funktionen wirst du auch in TVJS nutzen. Ein wichtiges Konzept, das es zu verstehen gilt.

Grundlagen JavaScript – 16 Gültigkeitsbereiche in JavaScript

Um dich vernünftig im Code zu bewegen, musst du die Gültigkeitsbereiche von JavaScript kennen (Scopes).

Grundlagen JavaScript – 17 Events

Hier geht es noch einmal und etwas mehr im Detail um Events.

Grundlagen JavaScript – 18 Strings

Strings begegnen dir vermutlich in jeder App. Auch sie gehören deshalb unbedingt in einen Crashkurs.

Grundlagen JavaScript – 19 Rechnen mit JavaScript

Themen wie Zufallszahlen und andere aufwendige Berechnungen sind ebenfalls wichtig.

Grundlagen JavaScript – 20 Arrays nutzen

Auch Arrays werden dir mit Sicherheit im JavaScript- und TVJS-Umfeld begegnen. Gut, wenn du sie kennst.

JavaScript: Objektorientierung

Grundlagen JavaScript – 21 Objekte definieren

Auch in TVJS werden Objekte eingesetzt. Du solltest also mindestens die JavaScript-Umsetzung kennen.

Grundlagen JavaScript – 22 Eigenschaften von Objekten

Eigenschaften gehören zur Objektorientierung und sollten grundsätzlich verstanden werden.

Grundlagen JavaScript – 23 Methoden

Auch Methoden sind wichtig und werden dir in den TVJS-Beispielen häufiger begegnen.

Details zum Inhalt

HTML, CSS, JavaScript – lerne die Grundlagen und wende sie direkt an

In vielen Bereichen gehört der Umgang mit dem Internet mittlerweile zum Alltag. Ob Blogger, Werbetexter oder Online-Marketer, ob Entwickler, Redakteur oder Journalist – ein Grundlagen-Verständnis von HTML, CSS und JavaScript erleichtert die Web-Arbeit und eröffnet zahlreiche Möglichkeiten, eigenständig in die Zeilen hinter den Websites einzusteigen.

Besonders die Einbindung von Text- und Bildinhalten sowie deren Formatierung und Positionierung sind vielfach nützliche Techniken, die schnell und leicht zu beherrschen sind. Dein Trainer Jan Brinkmann vermittelt dir in einem über achtstündigen Tutorial alle relevanten Aspekte in Theorie und Praxis. Die Inhalte im Überblick:

HTML – die Basis für deine Webseiten

Der Kurs unterteilt sich in die drei großen Blöcke HTML, CSS und JavaScript. In jedem Block findest du verschiedene Kapitel, die sich mit einem speziellen Hauptthema befassen. Nachdem du erfahren hast, was es mit HTML eigentlich auf sich hat, lernst du die Struktur von HTML-Dokumenten kennen, setzt Hyperlinks, unterteilst deine Dokumente durch Einsatz von Überschriften, Zeilenumbrüchen, Absätzen, Listen und Tabellen und wirst schließlich in die Lage versetzt, sonstige Elemente wie Bilder, iframes oder JavaScript einzubinden.

CSS – die Formatierung für deine Seiten

Der CSS-Lernblock verschafft deinen Websites Struktur, Übersicht und Format. Wenn du einmal weißt, worin die Funktion der sogenannten Cascading Style Sheets liegt, wirst du in fortführenden Lektionen Elemente positionieren, Abstände definieren, Schriftgrößen und -familien festlegen und zahlreiche andere Formatierungsmöglichkeiten anwenden.

JavaScript – Dynamik für deine Webprojekte

JavaScript erlaubt dir schließlich, deine statischen HTML-Dokumente zu dynamisieren. Du vertiefst noch einmal die Einbindung der JavaScript-Elemente und behandelst Themen wie das Document Object Model oder fortgeschrittene Konzepte wie Strings, Events oder Arrays.

Das lernst du im Grundlagen-Tutorial zu HTML, CSS und JavaScript

Zum einen verstehst du die grundlegende Funktionsweise des Webs, zum anderen bist du nach dem Video-Training in der Lage, selbst HTML-Dokumente in klar lesbarer Programmstruktur zu erstellen, Websites mit CSS zu gestalten und mit JavaScript mehr Dynamik einzubinden. Dir werden damit Fähigkeiten vermittelt, die du bei der alltäglichen Arbeit immer wieder anbringen und einsetzen oder auch für private Projekte nutzen kannst. Weiter könnte deine Webreise dann beispielsweise mit PHP oder CSS und Sass gehen.