HTML 5 Champion
4.5 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
453 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML 5 Champion to your Wishlist.

Add to Wishlist

HTML 5 Champion

Starte Deine Karriere als Webentwickler mit diesem kostenlosen HTML 5 - Kurs
4.5 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
453 students enrolled
Last updated 4/2017
German
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 36 Supplemental Resources
  • 1 Coding exercise
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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.
View Curriculum
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 is the target audience?
  • 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
31 Lectures
05:18:28
+
Einstieg in HTML
6 Lectures 49:22

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.

Preview 10:34

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.

Preview 05:14

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.

Preview 06:26

Wir werfen einen ersten Blick auf den in diesem Kurs verwendeten Code-Editor und nehmen erste Anpassungen vor.

Preview 03:42

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.

Erste Analyse einer Webpage
16:19

Am Ende dieses Abschnittes zeige ich Dir, wo Du Dir weitere Hilfe zum Thema HTML im Internet erhältst. 

Seiten, die Dir weiterhelfen
07:07

Welche Aussage trifft NICHT zu ?

HTML, CSS & Javascript im Vergleich
1 question
+
HTML 5 - Syntax
3 Lectures 32:09

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.

Preview 12:54

Wir erstellen in dieser Lektion ein Grundgerüst anhand der Vorlage von "www.example.com" und analysieren den Quellcode der Seite nochmals genauer.

Preview 08:42

Jetzt ist es soweit - wir führen auch in diesem Kurs die alte Programmiertradition fort und schreiben unser erstes "Hello World" - Programm.

"Hello World"
10:33

Es gibt nicht viele Regeln zur Erstellung von HTML-Code. In diesem Quiz wiederholen wir die grundlegende Regel.

Grundlegende Syntax
1 question
+
Textformatierung
5 Lectures 45:17

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.

Preview 03:43

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. 

Preview 06:31

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. 

Paragraphen
03:39

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.

Hands on paragraphs
15:05

Textauszeichnung
16:19

Heading, Header und Head
1 question

Paragraphen
1 question
+
Strukturierung und Semantik
3 Lectures 33:30

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.

Preview 14:03

In dieser Lektion zeige ich Dir, wie Du semantische Tags in Deinem Body-Element verwendest.

Preview 11:02

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
08:25

Block- und Inlineelemente spielen eine wichtige Rolle beim Seitenaufbau. Während Blockelemente die ganze Bildschirmbreite einnehmen, ist der Bereich eines Inline-Elements immer nur so breit wie sein Inhalt. 

Block- und Inline-Elemente
1 question
+
Textgliederung mit Tabellen und Listen
3 Lectures 27:41

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.

Preview 09:23

Hier lernst Du, wie Du Tabellen erstellst und auf welche Fallstricke zu achten ist.

Preview 08:12

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
10:06

Mit Tabellen und Listen kannst Du Deiner Seite eine weitere Struktur geben.

Listen und Tabellen
1 question
+
Medienelemente in HTML 5
6 Lectures 58:00

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.

Preview 13:54

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.

Preview 15:36

Hier wollen wir von links nach rechts und zurück verlinken und lernen dabei das Prinzip der Pfadangaben aus der letzten Lektion anzuwenden.

Links
07:50

Bilder sind Bestandteil jeder Webseite. Wie Du sie aus anderen Quellen einfügen oder intern verlinken kannst, das lernst Du hier.

Bilder
14:52

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.

Videos
03:03

Deine Musik anderen über Deine Webseite teilen - kein Problem! Auch hier kannst Du mit HTML 5 schnell und einfach loslegen.


Audio
02:45

Für die Verlinkung zu entsprechenden Mediendateien ist es wichtig, dass die Pfadangabe korrekt ist.

Verlinkung zu Mediendateien
1 question
+
Formulare
3 Lectures 44: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.

Preview 12:48

Ü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.

Formularfelder
14:09

Auswahlfelder wie Checkboxen und Radio-Buttons schließen den theoretischen Teil dieses Abschnittes ab. 

Auswahlmenüs
17:51

Bei einer Serveranfrage sollte man immer wissen, welche Daten man "sichtbar" übertragen möchte!

HTTP-Request
1 question
+
HTML-Challenge
2 Lectures 27:41

In diesem Abschnitt sollst Du selbstständig eine Webpage nachprogrammieren. Du erhältst hier dann gleichzeitig auch die Lösung für den Quellcode. Auch die restlichen Materialien zur Erstellung der Seite erhälst Du in den Kursmaterialien.

HTML-Challenge Teil 1
19:54

Hier schließen wir unsere HTML-Challenge ab!

HTML-Challenge Teil 2
07:47
About the Instructor
Dr. Siegbert Stracke
4.6 Average rating
100 Reviews
1,306 Students
3 Courses
Sanexio GmbH & Co. KG

Henry Ford sagte einmal: "Wer aufhört zu lernen, ist alt. Er mag zwanzig oder achtzig sein."

Zum Lernen benötigt man allerdings Zeit - und leider ist unsere Zeit begrenzt. Online-Plattformen bieten hier eine flexible Möglichkeit des Lernens. Aus diesem Grund bin ich erst als Student auf Udemy gelandet und gebe nun auch als Instructor eigene Kurse.

Ich habe seit Gründung meiner Firma mit Schwerpunkt im Bereich E-Health viel Erfahrung in der Web- und App-Entwicklung sowie Datenanalyse sammeln können und möchte dieses Wissen an Euch weitergeben.

Frithjof Ebert
4.6 Average rating
100 Reviews
1,306 Students
3 Courses
Entwickler, Projektmanager, Fachinformatiker

Fachinformatiker für Systemintegration,

IT ist seit meiner Leidenschaft für Computer in der Jugend auch mein Beruf geworden. Meine Schwerpunkte liegen in der IT-Administration sowie Web- und App-Entwicklung.

Neben der Netzwerktechnik und der Administration habe ich als Projektleiter auch Software-Projekte für Unternehmen gemanagt.

Weiterhin habe ich als Web- und App-Entwickler viele eigene Programme für Kunden aus verschiedenen Wirtschaftsbereichen entwickelt und weiss, wie wichtig eine vernünftige Planung der Projekte ist.

Als Systemadministrator und Entwickler muss ich mich ständig auf dem neuesten Stand der Technik halten und da ich weiss, wie wichtig das stetige Lernen im IT-Bereich ist und man schnell zum „alten Eisen“ gehört, wenn man sich nicht regelmäßig fortbildet, möchte ich auf Udemy mein Wissen an andere weitergeben.