Der ultimative HTML5 und CSS3 Komplettkurs

Lerne alles über HTML5 und CSS3 inkl. responsives Webdesign, Grid-Systeme und Flexboxen inkl. riesigem Praxis-Projekt!

4.80 (4825 reviews)
Udemy
platform
Deutsch
language
Web Development
category
instructor
27,670
students
34 hours
content
Jan 2024
last update
$69.99
regular price

What you will learn

Lerne alles zum Thema HTML5 und CSS3 in Theorie und Praxis

Starte deine Karriere als Webdesigner oder Webentwickler

Setze ein aufwändiges und umfangreiches Praxis-Projekt um

Lerne responsive Webdesign und baue dein eigenes Grid-System

Verstehe die Grundlagen von mobile-first Webdesign und Flexboxen

Description

Lerne HTML5 und CSS3 wie ein Profi - detailliert, vollständig und praxisnah   

Du willst Webdesigner oder Webentwickler werden? Oder brauchst du HTML und CSS für Beruf, Studium oder ein Praktikum? Dann bist du hier genau richtig! Dieser Kurs ist der detaillierteste, praxisorientierteste und bestbewertete deutschsprachige Kurs für HTML5 und CSS3 auf Udemy.

Dieser Kurs vermittelt Verständnis bis in die Tiefe der Materie

In mehr als 190 Lektionen und knapp 33 Stunden Videomaterial lernst du alles über HTML5 und CSS3 und erstellst in einem riesigen Praxis-Projekt deine erste eigene Website. Du lernst dabei immer alles bis ins Detail und wir beschäftigen uns gemeinsam mit nahezu jedem noch so kleinen Aspekt von HTML und CSS.

Du lernst responsives Webdesign - Optimiert für Desktop und Mobile Devices   

Websites müssen heutzutage nicht nur am PC gut aussehen, sondern auch für mobile Endgeräte wie Smartphones oder Tablets optimiert sein. Deshalb lernst du in diesem Kurs genau das, was du in der heutigen Zeit brauchst: Responsives Webdesign!
Ganz nebenbei beschäftigen wir uns jedoch auch mit allen anderen gängigen Entwicklungsansätzen, wie Grid-Systemen, mobile-first Webdesign und Flexboxen.

Die Kombination aus Theorie und Praxis führt dich zum Erfolg

Wer HTML und CSS lernen will, der wird mit Theorie alleine nicht glücklich werden - denn Praxiserfahrung ist das A und O im Bereich Webdesign! Neben der komplett theoretischen Basis erstellst du deshalb in einem riesigen Praxis-Projekt deine erste eigene Website und sammelst ganz nebenbei mehr als 15 Stunden wertvolle Praxiserfahrung.

Geeignet für alle Zielgruppen - vom Anfänger bis hin zum Profi

Ganz egal, ob du noch nie mit HTML und CSS zu tun hattest oder ob du vielleicht nach einer guten Möglichkeit suchst, dein Wissen aufzufrischen oder zu erweitern - dieser Kurs bietet dir genau das, was du brauchst. Als Komplettkurs konzipiert, fangen wir ganz vorne bei den Basics an und arbeiten uns stressfrei und unkompliziert vor bis hin zum Expertenwissen.

Wir lernen gemeinsam und du bist niemals allein   

Wir schauen uns jedes Thema gemeinsam an und du lernst in den Tempo, das zu dir passt. Sollte dabei doch mal eine Frage offen bleiben, kannst du sie problemlos im Fragenbereich des Kurses stellen. Bisher ist dabei noch keine Frage unbeantwortet und kein Problem ungelöst geblieben!

Noch Fragen? Dann schreib mir eine Nachricht auf Udemy

Solltest du jetzt noch Fragen haben oder du dir noch immer unsicher sein, ob der Kurs der Richtige für dich ist, dann zögere nicht mir eine Nachricht bei Udemy zu schreiben. Ich freue mich von dir zu hören!

Content

Einleitung

Herzlich Willkommen im Kurs!
Ein Hinweis für Teilnehmer
Allgemeine Worte zum Kurs
Vorstellung des Lehrplans
Vorstellung des Praxis-Projekts

Vorbereitung

Installation und Einstellungen des Code-Editors (Atom.io)
Installation des Browsers (Google Chrome)

Basics: Einführung in HTML

Die Grundlagen von HTML I: Elemente
Die Grundlagen von HTML II: Attribute
Das HTML-Grundgerüst
Deine erste Webseite: Das "Hallo Welt!" in HTML
Textstrukturierung I: Überschriften, Paragrafen & Zeilenumbrüche
Textstrukturierung II: Fett, Kursiv, Unterstrichen & mehr
Einführung in HTML

Basics: Einführung in CSS

Die Grundlagen von CSS
Inline CSS
Internal CSS
External CSS
Einführung in CSS

Basics: CSS-Selektoren

Typselektoren und Vererbung
Klassenselektoren
ID-Selektoren
Kindselektor
Nachfahrenselektor
Geschwisterselektor
Kombinierte Selektoren
CSS-Selektoren

Praxis: Wir planen unser Projekt!

Das Website-Konzept
Der Website-Blueprint

Basics: Breite, Höhe, das <div> und das Box-Model

Das HTML-Grundgerüst als Snippet einfügen
Breite (width) und Höhe (height)
Das <div> - Unser bester Freund!
Das Box-Model
Praxis-Tipp: box-sizing: border-box
Innenabstand (padding) und Außenabstand (margin)
Rand (border)

Basics: Arten von Größenangaben

absolute Größenangaben
relative Größenangaben (%)
relative Größenangaben (em und rem)
Welche Größenangabe? Wann?

Basics: Arten von Farben

vordefinierte Farben
Hex-Farben
RGB- & RGBA-Farben
HSL- & HSLA-Farben

Basics: Schriftarten

Schriftarten einbinden
externe Schriftarten einbinden
Schriftarten mit @font-face lokal einbinden I
Schriftarten mit @font-face lokal einbinden II

Praxis: Das Projekt-Setup

Anlegen von Ordner-Struktur
Anlegen der HTML- und CSS-Dateien
generelle CSS-Grundregeln

Basics: Inline- und Block-Elemente, Bilder, Kommentare und Seitenstrukturierung

Inline- vs. Block-Elemente
Die display-Eigenschaft
Bilder einbinden
Kommentare in HTML und CSS
Seitenstrukturierung in HTML5

Basics: Positionierung von Elementen mit CSS

position: relative und absolute
position: fixed, sticky und static

Basics: Links in HTML

Links I: Die Basics
Links II: Bookmarks
Links III: Links stylen

Basics: Listen in HTML

Listen I: geordnete und ungeordnete Listen
Listen II: geschachtelte Listen
Listen III: Listen stylen

Praxis: Atom-Einstellungen und -Plugins

Auto-Funktionen wieder einschalten
Hilfreiche Plugins installieren

Basics: Emmet

Emmet - Die Grundlagen
Emmet - komplexere Abkürzungen

Praxis: Los geht's mit der Navigations-Leiste!

Navigationsleiste I: Navigationsleiste & Logo
Navigationsleiste II: Navigationsliste
Navigationsleiste III: Navigationsliste stylen, klickbares Logo & Active-Class

Basics: Hintergrund

Hintergrund I: background-color und background-image
Hintergrund II: background-repeat
Hintergrund III: background-position
Hintergrund IV: background-attachment
Hintergrund V: Kurzschreibweise

Praxis: Der Header-Banner

Header-Banner I: verschiedene Varianten
Header-Banner II: die Variante für Fortgeschrittene
Header-Banner III: Banner auf allen Seiten anlegen

Basics: Modernes Webdesign und Grid-Systeme

Modernes Webdesign: Die wichtigsten Begriffe und Entwicklungsansätze
Einleitung in das Thema "Grid-Systeme"
Die CSS-Eigenschaft "min-/max-width" und "min-/max-height"
Die Pseudoelemente ::before, ..after & die CSS-Eigenschaft "content"
Die float-Eigenschaft
Die clear-Eigenschaft
Der "clearfix-Hack"
Die Grundlagen von Attribut-Selektoren
Die Grundlagen von Media-Queries

Praxis: Grid-System entwickeln

Das Grundgerüst des Grid-Systems
Der Container
Die Rows
Die Columns
Das Grid-System sichtbar machen
Das Grid-System responsive machen (Media Queries)
Das Grid-System responsive machen (responsive Meta-Tag)

Praxis: Navigationsleiste für mobile Geräte optimieren

Grid-System in der Navigationsleiste implementieren
Das Dropdown I: Der Dropdown-Button
Das Dropdown II: Grundlegendes Dropdown-Menü
Das Dropdown III: Die Positionierung
Das Dropdown IV: Dropdown-Funktionalität und Active-Highlighting
Das Dropdown V: Dropdown responsive machen

Basics: HTML-Formulare

Die Input-Elemente
Die Textarea
Die "name"-, "value"- und "placeholder"-Attribute
Der Input-Typ "hidden"
Radio-Buttons und Checkboxen
Das Select-Menü
Buttons
Das Formular-Element
Die Grundlagen von URLs
Query-String und URL-Zeichenkodierung
Formulare strukturieren
Der Input-Typ "file"
Das "form"-Attribut
Das "pattern"-Attribut, Formular-Validierung und RegEx
Weitere Attribute und allgemeine Hinweise

Praxis: Der Newsletter-Bereich

Newsletter-Bereich I: Alle Elemente anlegen
Newsletter-Bereich II: Die Elemente stylen
Newsletter-Bereich III: Die Elemente stylen
Newsletter-Bereich IV: Den Bereich responsive machen
Fehler-Korrekturen und Ausbesserungen

Basics: Pseudo-Klassen und mehr!

Konfliktlösungen in CSS
Strukturelle Pseudoklassen I
Strukturelle Pseudoklassen II
Strukturelle Pseudoklassen III
Outlines
Box-Shadows
Die :focus-Pseudoklasse

Praxis: Der Leistungen-Bereich

Die :focus-Pseudoklasse stylen
Leistungen-Bereich I: Alle Elemente anlegen
Leistungen-Bereich II: Alle Elemente anlegen mit Emmet
Leistungen-Bereich III: Den Intro-Bereich stylen
Leistungen-Bereich IV: Die Leistungs-Boxen stylen
Leistungen-Bereich V: Die Buttons stylen
Leistungen-Bereich VI: Das Button-Styling wiederverwenden
Leistungen-Bereich VII: Den Bereich responsive machen

Basics: Multimedia-Elemente und Grafiken

Videos in HTML I
Videos in HTML II
Audio in HTML
Das Picture-Element I
Das Picture-Element II

Basics: CSS-Sprites, border-radius und runde Elemente

Praxis-Tipp: CSS-Sprites I (Theoretische Grundlagen)
Praxis-Tipp: CSS-Sprites II (Praktische Umsetzung)
Die CSS-Eigenschaft "border-radius" & Praxis-Tipp: Kreise und runde Elemente

Praxis: Der Video-Bereich

Video-Bereich I: Alle Elemente anlegen
Video-Bereich II: Alles stylen und responsive machen

Basics: Tabellen in HTML

Das Grundgerüst von Tabellen
Tabellen strukturieren und gliedern
Tabellen stylen I: border, border-collapse und border-spacing
Zellen und Spalten miteinander verbinden (colspan und rowspan)
Tabellen stylen II: background-color, caption-side, empty-cells, width & mehr
Mini-Challenge: Eine schöne Tabelle stylen

Praxis: Der Service-Bereich

Service-Bereich I: Alle Elemente anlegen
Service-Bereich II: Die Service-Boxen stylen
Service-Bereich III: Die Service-Icons stylen
Service-Bereich IV: Den Bereich responsive machen

Basics: Animations in CSS

Animations I: Die Grundlagen
Animations II: Komplexere Animationen
Animations III: Animationen verzögern, wiederholen und umkehren
Animations IV: Geschwindigkeitskurven, Füllmodus und Pausieren
Animations V: Die Kurzschreibweise

Praxis: Der Über-Uns-Bereich

Über-uns-Bereich I: Alle Elemente anlegen
Über-uns-Bereich II: Alles stylen
Über-uns-Bereich III: Alles responsive machen

Basics: Transformations und Transitions in CSS

Transformations
Transitions I: Die Grundlagen
Transitions II: Verzögerung und Geschwindigkeitskurven
Transitions III: Kurzschreibweise

Praxis: Der Footer-Bereich

Footer-Bereich I: Alle Elemente anlegen
Footer-Bereich II: Alles stylen und responsive machen

Basics: Flexboxen

Die Grundlagen der Flexbox
Flex-Container I: flex-direction, flex-wrap und flex-flow
Flex-Container II: justify-content und align-items
Flex-Container III: align-content
Flex-Items I: flex-grow, flex-shrink, flex-basis und flex
Flex-Items II: order und align-self

Praxis: Die Leistungen-Seite coden

Leistungen-Seite I: Alle Elemente anlegen
Leistungen-Seite II: Flexboxen einbauen, stylen und mehr I
Leistungen-Seite III: Flexboxen einbauen, stylen und mehr II
Leistungen-Seite IV: Flexboxen einbauen, stylen und mehr III
Leistungen-Seite V: Buttons stylen und mehr
Leistungen-Seite VI: Alles responsive machen I
Leistungen-Seite VII: Alles responsive machen II
Leistungen-Seite VIII: Letzte Anpassungen und die Seite vervollständigen

Praxis: Die Kontakt-Seite coden

Kontakt-Seite I: Alle Elemente anlegen
Kontakt-Seite II: Alles stylen und responsive machen

Praxis: Die Impressum coden

Das Impressum anlegen

Praxis: Der letzte Schliff

animiertes Logo I: Alle Elemente anlegen und stylen
animiertes Logo II: Die Animation
Transitions für Buttons und Inputs einbauen
Favicons erstellen und hinzufügen

Praxis: Ausbesserungen und Bugfixing

Den Head-Bereich optimieren
Die Navigationsleiste ausbessern
Die Startseite ausbessern
Die Kontakt-Seite und das Impressum ausbessern
Die CSS-Datei aufräumen
Bugfixing und Google-Fonts lokal einbinden

Praxis: Die Website fertig stellen

Vendor Prefixes per Autoprefixer einfügen
Die CSS-Datei minimieren

Schlussworte

Herzlichen Glückwunsch, du hast es geschafft!
Bonuslektion: Gutschein-Codes für meine Kurse

Screenshots

Der ultimative HTML5 und CSS3 Komplettkurs - Screenshot_01Der ultimative HTML5 und CSS3 Komplettkurs - Screenshot_02Der ultimative HTML5 und CSS3 Komplettkurs - Screenshot_03Der ultimative HTML5 und CSS3 Komplettkurs - Screenshot_04

Reviews

Max
November 9, 2023
Sehr umfangreich und gut erklärt. Leider beim Praxis-Projekt keine Dateien von den einzelnen Schritten vorhanden um einen korrekten Code zu haben, mit dem man seine Fehler finden kann. (Bei JavaScript gab es diese)
Christoph
November 8, 2023
Insgesamt war ich mit dem Kurs sehr zufrieden. Viele der Grundlagen waren aber für mich "nur" Wiederholungen. Trotzdem war vieles dabei, wofür sich der Kurs für mich gelohnt hat. Ruben Winkler versteht es, totz der unvermeindlichen Längen den Teilnehme zum Weitermachen zu movtivieren. Leider ist der Kurs aber schon recht alt, die Ursprünge des Kurses sind in den Jahren 2017/2018. leider merkt man dies an manchen Stellen. Da wirkt der Stoff doch etwas veraltet, den im Netz findet man Neuerungen oder auch (bessere?) Alternativen zu einigen HTML- oder CSS-Techniken. Ein komplettes Upgrade des Kurses wäre aus meiner Sicht durchaus sinnvoll. Zudem hat Ruben Winkler auf einigen neueren Fragen und Anmerkungen nicht reagiert, was ich recht schade finde, vielleicht hat dies aber auch durchaus erklärbare Gründe.
Alex
November 8, 2023
Der mit großer Wahrscheinlichkeit bester HTML + CSS Kurs im deutschsprachigen Raum. Alle Themen werden sehr lange und intensiv behandelt. Das Praxisprojekt ist auch sehr aufwendig gestaltet. Der Dozent hat eine angenehme Stimme, spricht deutlich und sehr verständlich.
Christin
November 1, 2023
Es ist mittlerweile mein dritter Kurs von Ruben und ich bin wieder sehr begeistert. Der Kurs beinhaltet alles, was man für eine solide Website braucht und geht bei allen Inhalten gut ins Detail, sodass man a) gut folgen b) sicher mitarbeiten und c) verstehen kann, wieso und warum etwas gemacht wird. Danke Ruben für dein Arbeit, die du in diese Kurse steckst!
Max
November 1, 2023
Schritt für Schritt zum Ziel! Ein bisher sehr gelungener Kurs man kann diesem sehr gut folgen. Man wird sehr gut mitgenommen und man bekommt alles direkt in der Anwendung gezeigt. Sehr Empfehlenswert!
Jan
October 18, 2023
Bin sehr zufrieden mit dem Kurs. Ich halte mich kurz wer html&css lernen will ist hier gut aufgehoben!
Felix
March 23, 2023
Ich werde 59 Jahre alt, mache seit 25 Jahren u. a. Webentwicklung und konnte mich bislang immer um diesen Kot herumdrücken. Aber mit diesem Kurs bzw. den Kursen von Ruben Winkler entdecke ich den Spaß daran! Im Vergleich zu vielen anderen Kursen, die ich hier schon gebucht (und teils wieder storniert) habe, finde ich wirklich ALLES daran sehr angenehm! Die Stimme, die Struktur, die Art der Darstellung ... super! Vielen Dank an Ruben!! Gruß vom Felix
Ralph
March 22, 2023
Wirklich gut verständlich. Auch wenn ich schon leichtes Vorwissen habe wird mir nicht langweilig und lerne immer wieder was neues dazu. Für jemanden der Einsteigt sehr gut geeignet und auch für leicht Fortgeschrittene.
Jasmin-Sophie
March 21, 2023
Danke Ruben! Ein toller Kurs für jeden, der HTML und CSS von Grund auf lernen will! Ich habe angelehnt an das Praxisprojekt meine erste eigene Landing Page erstellt und bereits jetzt viel Lob erhalten... Als nächstes kommen nun deine Kurse zu JavaScript und RegEx an die Reihe :-) Liebe Grüße aus Düsseldorf!
Ulrich
March 15, 2023
Ein sehr guter Kurs zur umfassenden Einführung in die Themen HTML5 und CSS3. Alles ist gut durchdacht und didaktisch super aufbereitet, so dass auch ein Einstieg ohne Vorkenntnisse sehr gut gelingen kann. Das gewählte Praxisprojekt ist sehr umfassend und deckt die theoretischen Kenntnisse komplett ab. Am Ende des Kurses hat man eine erste nicht triviale Webseite in die Praxis umgesetzt und somit einen umfassenden Überblick über den gesamten Prozess des Webdesigns gewonnen. Ich kann diesen Kurs deshalb nur empfehlen und sage dem Dozenten herzlichen Dank.
Andreas
March 14, 2023
Also da ist alles dabei was ich gebraucht habe. Meinen Mentor in der Schule habe ich gemutet, und mache lieber diesen Kurs hier, und ich merke das war eine gute Idee.
Joachim
March 10, 2023
Bisher finde ich alles bestens. Die Geschwindigkeit ist gut und der Inhalt ist bis jetzt leicht verständlich. Der große Vorteil für mich ist, dass ich das Video zwischen durch anhalten zurückgehen oder nochmal anschauen kann. In einem realen Kurs ist das nicht so einfach möglich, wenn mehrere Teilnehmer dabei sind.
Marco
March 7, 2023
Wirklich super einfach erklärt und für jeden Anfänger super leicht hinterher zu kommen. Sehr empfehlenswert. :)
Michael
March 5, 2023
Top Kurs. Sehr detailliert und strukturiert. Komplexe Inhalte leicht erklärt, leicht zu folgen und umzusetzen.
Noah
February 14, 2023
Für mich als kompletter Anfänger war es ein super Kurs. Die Art und Weise, wie beigebracht wird ist sehr angenehm und immer nachvollziehbar. Die einzigen Mängel, die mir aufgefallen sind und meine Bewertung zu 5-Sternen aufbessern würden sind: - Die Unterschiede von Atom und Visual Studio Code - Wenige selbstständig zu lösenden Aufgaben - Der Teil zu Flexboxen hätte etwas ausführlicher sein können Trotzdem 4.5 Sterne, weil ich mehr als zufrieden war. Danke für diesen Kurs!

Coupons

DateDiscountStatus
2/26/202486% OFF
expired

Charts

Price

Der ultimative HTML5 und CSS3 Komplettkurs - Price chart

Rating

Der ultimative HTML5 und CSS3 Komplettkurs - Ratings chart

Enrollment distribution

Der ultimative HTML5 und CSS3 Komplettkurs - Distribution chart
1301816
udemy ID
7/23/2017
course created date
11/1/2019
course indexed date
Bot
course submited by