HTML 5 Champion

Starte Deine Karriere als Webentwickler mit diesem kostenlosen HTML 5 - Kurs

Created byDr. Siegbert Stracke, Frithjof Ebert

Last updated 4/2017

German

What you'll learn

Mit diesem Kurs erhältst Du einen praxisnahen Einstieg, da wir gemeinsam eine Webseite erstellen.
Dieser Kurs ist der erste in einer Reihe weiterer Kurse zum Thema Webentwicklung. Diese werden Themen wie CSS, Javascript, jQuery, Bootstrap, PHP, MySQL, die Verwendung von Content Management Systemen aber auch Serveradministration umfassen. Du legst mit diesem Kurs den Grundstein, da alle weiteren hierauf aufbauen!
Ziel ist es hierbei, dass Du Schritt für Schritt zum Full Stack Developer wirst.

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

8 sections • 31 lectures • 5h 18m total length

Unterschied zwischen Front- und Backend10:34
Als Webentwickler wirst Du mit Begriffen wie Frontend und Backend konfrontiert und musst diese einordnen können. Diese Lektion hilft Dir bei der Einordnung dieser Begriffe und gibt Dir einen ersten Überblick über die Skriptsprachen HTML, CSS und Javascript.
HTML, CSS & Javascript im Vergleich5:14
In dieser Lektion werden wir mit Hilfe eines Code-Editors die Unterschiede zwischen HTML, CSS und Javascript kennenlernen. Du erhältst hier schon einen ersten Einblick in die Programmierung dieser drei Scriptsprachen.
Tools und Editoren6:26
Die in diesem Kurs verwendeten Programme kannst Du Dir kostenlos herunterladen. In dieser Lektion zeige ich Dir einige Code-Editoren, die Du prinzipiell verwenden kannst.
Chrome und Brackets3:42
Wir werfen einen ersten Blick auf den in diesem Kurs verwendeten Code-Editor und nehmen erste Anpassungen vor.
Erste Analyse einer Webpage16:19
Wir schauen uns in dieser Lektion den Quellcode einer Beispielseite im Internet an und versuchen an dieser Stelle schon ohne weiteres Vorwissen den Code zu analysieren.
Diese Lektion soll Dir zeigen, wie Du Dich selber an Quellcode herantasten kannst. Analog zu diesem Beispiel kannst Du Dir auch andere Seiten im Netz anschauen und diese analysieren.
Seiten, die Dir weiterhelfen7:07
Am Ende dieses Abschnittes zeige ich Dir, wo Du Dir weitere Hilfe zum Thema HTML im Internet erhältst.
HTML, CSS & Javascript im Vergleich

Wie funktioniert HTML?12:54
In dieser Lektion lernst Du die grundlegende Syntax von HTML.
Was sind Elemente? Was sind Attribute? Wie werden diese im Quellcode definiert.
Außerdem arbeiten wir den Quellcode unserer Beispielseite aus dem ersten Abschnitt dieses Kurses noch weiter auf und erstellen ein erstes Grundgerüst.
HTML-Grundgerüst8:42
Wir erstellen in dieser Lektion ein Grundgerüst anhand der Vorlage von "www.example.com" und analysieren den Quellcode der Seite nochmals genauer.
"Hello World"10:33
Jetzt ist es soweit - wir führen auch in diesem Kurs die alte Programmiertradition fort und schreiben unser erstes "Hello World" - Programm.
Grundlegende Syntax

Was bedeutet Textformatierung ?3:43
In dieser Lektion gebe ich Dir einen kurzen Überblick über die Textformatierung in HTML und gehe noch einmal speziell auf das Thema "Semantik" ein, welches seit HTML 5 sehr wichtig geworden ist.
Heading, Header und Head6:31
In dieser Lektion beschäftigen wir uns mit Überschriften. Wegen der Verwechselungsgefahr bzgl. "heading", "header" und "head" gehen wir hier auch noch mal auf die Unterschiede ein.
Paragraphen3:39
Neben Überschriften sind Textabschnitte elementarer Bestandteil einer jeden Webseite. Ihr erhaltet in dieser Lektion einen Überblick über die Anwendung des "paragraph"-Elements bevor wir die Theorie in Brackets anwenden.
Hands on paragraphs15:05
In diesem Abschnitt schauen wir uns Textabschnitte genauer an, gehen noch mal auf die verschiedenen Möglichkeiten der Zeilenumbrüche ein und schauen uns an, was es mit den sogenannten Entities in HTML auf sich hat.
Textauszeichnung16:19
Heading, Header und Head
Paragraphen

Was bedeutet Semantik?14:03
Hier erfährst Du, warum Du Deinen HTML-Code strukturieren solltest, damit er vom Browser besser interpretiert werden kann.
Das Thema Semantik ist seit HTML 5 sehr wichtig - nicht zuletzt für die Suchmaschinenoptimierung und das Ranking Deiner Webseite.
Semantische Tags11:02
In dieser Lektion zeige ich Dir, wie Du semantische Tags in Deinem Body-Element verwendest.
Block- und Inline-Elemente8:25
Eine wichtige Kategorisierung von Elementen kann nach Block- bzw. Inline-Elementen vorgenommen werden. Wir werden dies im CSS - Kurs noch genauer behandeln, aber hier bekommst Du schon einmal die wichtigsten Unterschiede zwischen Block-Elementen und Inline-Elementen erklärt.
Block- und Inline-Elemente

Überblick über Tabellen und Listen9:23
Wir starten mit einem Überblick über die möglichen Tags zur Erstellung von Tabellen und Listen, bevor wir dann in den anschließenden Lektionen die einzelnen Beispiele im Code-Editor durchgehen.
Tabellen8:12
Hier lernst Du, wie Du Tabellen erstellst und auf welche Fallstricke zu achten ist.
Listen10:06
In dieser Lektion dreht sich alles um das Thema Listen. Wir werden uns geordnete und ungeordnete Listen anschauen und auch noch einen Blick auf das Thema Beschreibungslisten werfen.
Listen und Tabellen

Links, Media & Karten13:54
Neben der Semantik liegt auf der Einbindung von Medienformaten wie Video oder Audio oder externen Webinhalten ein weiterer Schwerpunkt in HTML 5. Hier ist vieles im Vergleich zu den Vorgängerversionen von HTML einfacher geworden.
Pfadangaben15:36
Wie findet Dein Browser eigentlich die Inhalte oder Dokumente, die Du an bestimmten Stellen Deiner Seite einbetten möchtest. Wie kannst Du auf andere Dateien verlinken. Um das zu verstehen musst Du grundsätzlich den Unterschied zwischen relativen und absoluten Pfaden verstanden haben, der Dir in dieser Lektion erklärt wird.
Links7:50
Hier wollen wir von links nach rechts und zurück verlinken und lernen dabei das Prinzip der Pfadangaben aus der letzten Lektion anzuwenden.
Bilder14:52
Bilder sind Bestandteil jeder Webseite. Wie Du sie aus anderen Quellen einfügen oder intern verlinken kannst, das lernst Du hier.
Videos3:03
Auch Videos sind mittlerweile Bestandteil vieler Webpages geworden. Mit HTML 5 sind einige Features sehr einfach zu implementieren - wie Du Videos schnell und einfach in Deine Webpage einbauen kannst, das lernst Du in dieser Lektion.
Audio2:45
Deine Musik anderen über Deine Webseite teilen - kein Problem! Auch hier kannst Du mit HTML 5 schnell und einfach loslegen.
Verlinkung zu Mediendateien

Was sind Formulare?12:48
Wir starten mit einem Überblick über die wichtigsten Formular-Vorlagen, bevor wir dann in den nächsten zwei Lektionen einzelne Beispiele in Brackets durchgehen.
Formularfelder14:09
Über Formularfelder kannst Du Informationen eingeben, die dann im weiteren Verlauf von der entsprechenden Zielseite verarbeitet werden. Hier gibt es verschiedene Attribute, mit denen wir schnell und einfach zwischen den entsprechenden Formularfeldern wechseln können.
Auswahlmenüs17:51
Auswahlfelder wie Checkboxen und Radio-Buttons schließen den theoretischen Teil dieses Abschnittes ab.
HTTP-Request

Requirements

Du benötigst lediglich einen Computer, einen Internetzugang und 5,5 Stunden Zeit!
Die im Kurs verwendeten Programme sind frei erhältlich.
Du kannst den Kurs unter Windows, MacOS oder Linux absolvieren.

Description

Du erhältst in diesem kostenlosen Kurs einen praxisnahen Einstieg in die Webentwicklung mit HTML 5.

Neben dem eigentlichen Kurs erhältst Du ein komplettes eBook sowie eine HTML-Vorlage mit Code-Snippets, die Du für Deine eigenen Projekte verwenden kannst.

In allen Abschnitten werden wir neben der Theorie auch praktische Beispiele durchgehen und am Ende des Kurses gemeinsam eine Webseite mit Bildern, Videos und Formularen erstellen.

Dieser Kurs ist der erste in einer Reihe weiterer Kurse zum Thema Webentwicklung. Diese werden Themen wie CSS, Javascript, jQuery, Bootstrap, PHP, MySQL, die Verwendung von Content Management Systemen aber auch Serveradministration umfassen. Du legst mit diesem Kurs den Grundstein, da alle weiteren hierauf aufbauen!

Who this course is for:

An alle, die ihre erste Webseite erstellen möchten. Wir werden am Ende des Kurses eine komplette Webseite mit Bildern und Videos erstellen.
An Programmiereinsteiger, die schnell ihr erstes Projekt starten möchten.
An diejenigen, die den Grundstein für ihr eigenes Online-Business legen und finanziell unabhängiger werden wollen.
An alle, die eine Webseite in Auftrag gegeben haben und die Seite in Zukunft ohne fremde Hilfe pflegen wollen.

HTML 5 Champion

What you'll learn

Explore related topics

Coding Exercises

Course content

Einstieg in HTML6 lectures • 49min

HTML 5 - Syntax3 lectures • 32min

Textformatierung5 lectures • 45min

Strukturierung und Semantik3 lectures • 34min

Textgliederung mit Tabellen und Listen3 lectures • 28min

Medienelemente in HTML 56 lectures • 58min

Formulare3 lectures • 45min

HTML-Challenge2 lectures • 28min

Requirements

Description

Who this course is for: