Webentwicklung mit HTML & CSS - Praxisnaher Komplettkurs

In diesem Video zeige ich dir wie du VS Code herunterladen kannst um deinen Code schreiben zu können. Außerdem installieren wir noch 2 wichtige Erweiterungen.

In diesem Video erfährst du, was HTML ist und welche Rolle es bei der Erstellung von Webseiten spielt. Ich zeige dir Schritt für Schritt, wie du eine einfache HTML-Datei erstellst und grundlegende Struktur- und Formatierungselemente einfügst.

In diesem Video erkläre ich dir den Unterschied zwischen Content- und Layout-Tags in HTML. Du lernst, wie Content-Tags zur Strukturierung und Semantik von Webseiteninhalten verwendet werden, während Layout-Tags für das Design und die Anordnung der Inhalte zuständig sind.

In diesem Video zeige ich dir, wie du Überschriften (Headlines) und Absätze (Paragraphen) in HTML erstellst. Du lernst, wie du verschiedene Header-Tags für die hierarchische Struktur deiner Seite nutzt und Texte sinnvoll gliederst. Am Ende des Videos gibt es eine kleine Aufgabe, bei der du deine neuen Kenntnisse anwenden kannst, um eine einfache HTML-Seite mit Überschriften und Absätzen zu erstellen.

Hier kommt die Lösung zur Aufgabe

In diesem Video erfährst du, wie du sortierte (nummerierte) und unsortierte (aufzählungsbasierte) Listen in HTML erstellst. Ich zeige dir Schritt für Schritt, wie du Listen mit den entsprechenden HTML-Tags erstellst.

In diesem Video lernst du, wie du Links in HTML erstellst und einfügst. Ich erkläre dir die verschiedenen Möglichkeiten, um interne und externe Verbindungen auf deiner Website zu erstellen und zu gestalten.

In diesem Video zeige ich dir, wie du Text in HTML fett und kursiv formatierst und das <span>-Tag nutzt, um spezifische Textbereiche zu stylen. Du lernst, wie du <strong> und <em> verwendest, um Text hervorzuheben und die Bedeutung zu betonen.

In diesem Video erkläre ich dir die Unterschiede zwischen globalen und spezifischen Attributen in HTML-Tags. Du erfährst, wie globale Attribute wie id und class auf beliebige HTML-Elemente angewendet werden können, um allgemeine Eigenschaften festzulegen.

In diesem Video erfährst du, was CSS ist und wie es verwendet wird, um das Design und die Gestaltung von Webseiten zu verbessern. Ich erkläre dir die drei Hauptmethoden, wie du CSS in deine HTML-Dokumente einbinden kannst: Inline-CSS, interne CSS-Stylesheets und externe CSS-Dateien.

In diesem Video gebe ich dir einen kurzen Überblick über den aktuellen Abschnitt und erkläre, was wir gemeinsam erreichen werden.

In diesem Video erkläre ich die Grundlagen der CSS-Selektoren, einschließlich der Element-, Klassen- und ID-Selektoren. Du lernst, wie du spezifische HTML-Elemente anvisierst und stylst, indem du entweder den Elementnamen, Klassenbezeichner oder ID-Attribute verwendest.

In diesem Video zeige ich dir, wie du Schriften in CSS gestalten kannst, um deinen Texten ein individuelles Aussehen zu verleihen. Du lernst, wie du Schriftarten, -größen, -stile und -farben anpasst, um deine Inhalte visuell hervorzuheben.

In diesem Video zeige ich dir, wie du den Hintergrund von Elementen in CSS gestalten kannst. Du lernst, wie du Hintergrundfarben mit background-color festlegst und Hintergrundbilder mit background-image hinzufügst. Ich erkläre dir, wie du Bilder positionierst, wiederholst und skalierst, um deine Webseiten visuell ansprechend zu gestalten.

In diesem Video erkläre ich dir, wie du in CSS die Höhe, Breite und Ränder von Elementen festlegst und gestaltest. Du lernst, wie du die height- und width-Eigenschaften verwendest, um die Dimensionen deiner Elemente zu steuern. Außerdem zeige ich dir, wie du mit der border-Eigenschaft Ränder um deine Elemente definierst.

In diesem Video erfährst du, wie du die margin- und padding-Eigenschaften in CSS verwendest, um den Abstand und die Polsterung deiner Elemente zu steuern. Ich erkläre den Unterschied zwischen margin, das den Abstand zwischen dem Element und anderen Elementen definiert, und padding, das den inneren Abstand zwischen dem Inhalt eines Elements und seinem Rand festlegt.

In diesem Video tauchen wir in die Flexbox-Technologie ein, ein leistungsstarkes Layout-Modul in CSS. Du lernst, wie du mit Flexbox komplexe Layouts einfach erstellen und verwalten kannst. Ich erkläre die grundlegenden Flexbox-Eigenschaften wie display: flex, flex-direction, justify-content und align-items, um deine Elemente flexibel und responsiv anzuordnen.

Hier zeige ich dir eine Seite mit der du deine Flexbox Fähigkeiten trainieren kannst.

In diesem Video erkläre ich den Unterschied zwischen Inline- und Block-Elementen in HTML und CSS. Du lernst, wie sich diese beiden Typen in der Layout-Gestaltung verhalten: Block-Elemente nehmen die gesamte verfügbare Breite ein und beginnen auf einer neuen Zeile, während Inline-Elemente nur so viel Platz einnehmen, wie ihr Inhalt benötigt, und nebeneinander angezeigt werden.

In diesem Video erkläre ich das Konzept der Spezifität in CSS, das bestimmt, welche CSS-Regeln auf ein Element angewendet werden, wenn mehrere Regeln in Konflikt stehen. Du lernst, wie sich die Spezifität von Selektoren wie Element-, Klassen- und ID-Selektoren unterscheidet und wie du sie effektiv nutzen kannst, um präzise Stile anzuwenden.

In diesem Video erkläre ich das Konzept der Vererbung in CSS, das bestimmt, wie Stile von übergeordneten Elementen an ihre untergeordneten Elemente weitergegeben werden. Du lernst, welche CSS-Eigenschaften vererbt werden und welche nicht, und wie du die Vererbung nutzen kannst, um konsistente und wartbare Designs zu erstellen.

In diesem Video erkläre ich die CSS-Eigenschaft box-sizing, die bestimmt, wie die Größe eines Elements berechnet wird. Du lernst den Unterschied zwischen den Werten content-box und border-box. Mit content-box werden die Breite und Höhe nur auf den Inhalt angewendet, während border-box die Breite und Höhe einschließlich Padding und Border berücksichtigt.

In diesem Video zeige ich dir, wie du die Developer Tools (DevTools) deines Browsers nutzen kannst, um Webentwicklung und Debugging zu erleichtern.

Ich erkläre dir was deine Aufgabe ist. Du wirst einen Header bauen und ein paar neue Dinge dafür lernen müssen. Die Aufgabe soll dich etwas herausfordern, aber das soll auch so sein.

In dieser Lektion werden wir die Navigation mit HTML aufbauen.

In dieser Lektion wird der Grundaufbau gemacht für unsere CSS Styles.

In diesem Video zeige ich wie wir die Navigation mit CSS stylen.

Ich zeige wie wir den Hauptbereich erstellen mit HTML.

Ich zeige wie wir bei dem Hauptbereich mit CSS den Hintergrund erstellen.

Ich zeige dir wie wir in dem Hauptbereich den oberen Textbereich stylen können.

Ich zeige dir wie wir den unteren Bereich mit CSS stylen können.

Wir werden kleine Verbesserungen vornehmen an unserem Header.

In diesem Video erkläre ich, warum du in CSS rem-Einheiten statt Pixeln verwenden solltest. Du lernst die Vorteile von rem im Vergleich zu festen Pixelwerten, insbesondere wie rem eine bessere Skalierbarkeit und Zugänglichkeit deiner Website ermöglicht. Ich zeige dir, wie rem auf der Basis der Schriftgröße des Root-Elements (<html>) funktioniert und wie es dir hilft, ein konsistentes und responsives Design zu erstellen, das sich leichter an verschiedene Bildschirmgrößen und Benutzerpräferenzen anpasst.

Im zweiten Projekt erstellen wir eine umfassende, moderne Website, die alle gelernten HTML- und CSS-Kenntnisse vereint. In diesem praxisorientierten Abschnitt wirst du eine komplette, responsive Website entwickeln, die auf allen Geräten optimal aussieht und funktioniert. Du wendest fortgeschrittene Designtechniken an, integrierst interaktive Elemente und perfektionierst das Layout, um eine professionelle und funktionale Webpräsenz zu schaffen.

Im Abschnitt "Grundaufbau für unseren Start" legen wir das Fundament für unsere Website.

Du lernst, wie du HTML nutzt, um die Struktur des Navigationsmenüs zu erstellen und wir bauen die Basis für unsere style.css.

Du lernst, wie du Schriftarten in deine Website integrierst und konsistent anwendest. Zusätzlich erklär ich, wie Vererbungsprobleme in CSS auftreten können, insbesondere bei Buttons.

Du lernst, wie du grundlegende CSS-Stile anwendest, um das Aussehen der Navigationsleiste anzupassen.

Du lernst, wie du grundlegende CSS-Stile anwendest, um das Aussehen der Navigationsleiste anzupassen.

Eine kleine Info zu den Glow Effekten und dem Hintergrund.

Du lernst, wie du HTML nutzt, um den Header mit den nötigen Elementen zu füllen. Wir erstellen eine klare und benutzerfreundliche Struktur, die als Ausgangspunkt für das weitere Styling und die Anpassung dient.

Du lernst, wie du CSS anwendest, um die Hauptüberschrift (<h1>), Textabsätze (<p>) und den Button im Header visuell ansprechend zu gestalten. Wir konzentrieren uns auf Schriftarten, Farben, Größen und Abstände, um sicherzustellen, dass diese Elemente gut zusammenarbeiten und einen klaren, einladenden Header schaffen.

In dieser Lektion kümmern wir uns um das Styling der drei Bilder, die im Header rechts platziert sind.

In dieser Lektion kümmern wir uns um das Styling der drei Bilder, die im Header rechts platziert sind.

In dieser Lektion lernst du den HTML Grundaufbau für die 4 Elemente in unserer Liste.

Du lernst, wie du die Liste mit Hilfe von CSS visuell ansprechend darstellen kannst.

Du lernst, wie du die Liste mit Hilfe von CSS visuell ansprechend darstellen kannst.

Du lernst wie der Grundaufbau mit HTML für den Bereich Lerninhalte aussehen kann und welche Tags verwendet werden sollten.

Du lernst den Bereich Lerninhalte mit CSS zu stylen und korrekt darzustellen.

Du lernst den Bereich Lerninhalte mit CSS zu stylen und korrekt darzustellen.

Du lernst den Bereich Lerninhalte mit CSS zu stylen und korrekt darzustellen.

Du lernst wie der HTML Aufbau für den Bereich Vorteile gestaltet werden kann.

Du lernst den Bereich Vorteile mit CSS korrekt zu stylen.

Du lernst den Bereich Vorteile mit CSS korrekt zu stylen.

Du lernst den Bereich Vorteile mit CSS korrekt zu stylen.

Du lernst den Bereich Vorteile mit CSS korrekt zu stylen.

Du lernst den HTML Aufbau für den Bereich Häufig gestellte Fragen.

Du lernst wie der Bereich Häufig gestellte Fragen mit CSS gestylt werden kann.

Du lernst wie der Bereich Häufig gestellte Fragen mit CSS gestylt werden kann.

Du lernst wie der Bereich Häufig gestellte Fragen mit CSS gestylt werden kann.

Du lernst den Bereich Testimonials mit Hilfe von HTML zu erstellen.

Du lernst wie der Bereich Testimonials mit Hilfe von CSS visuell ansprechend dargestellt werden kann.

Du lernst wie der Bereich Testimonials mit Hilfe von CSS visuell ansprechend dargestellt werden kann.

Du lernst das Kontaktformular mit HTML korrekt zu implementieren.

Du lernst das Kontaktformular mit HTML korrekt zu implementieren.

Du lernst wie wir mit CSS das Kontaktformular visuell ansprechend darstellen können.

Du lernst wie wir mit CSS das Kontaktformular visuell ansprechend darstellen können.

Du lernst wie wir mit CSS das Kontaktformular visuell ansprechend darstellen können.

Du lernst wie wir mit CSS das Kontaktformular visuell ansprechend darstellen können.

Du lernst wie wir mit CSS den Bereich Kontaktinfo visuell ansprechend darstellen können.

Du lernst wie wir mit CSS den Bereich Kontaktinfo visuell ansprechend darstellen können.

Du lernst den Footer mit HTML zu erstellen.

Du lernst den Footer mit CSS zu stylen.

Du lernst den Footer mit CSS zu stylen.

Wir nehmen kleine Verbesserungen an unserer Seite vor.

Du lernst Glow/Blur Effekte zu erstellen, wie sie für unsere Seite notwendig sind.

Du lernst die Glow Effekte richtig zu positionieren.

Du lernst die Glow Effekte richtig zu positionieren.

Du lernst die Glow Effekte richtig zu positionieren.

Du lernst einen ansprechenden Effekt für den Button zu erstellen.

Wir bringen die Links zum laufen, sodass Nutzer beim klicken weitergeleitet werden.

Du wirst lernen das Bild Waveline in den Hintergrund zu bringen.

Du lernst die Basis für das responsive Design, die Media Queries kennen.

Du lernst das Burger Menu einzubauen und mit Logik zu versehen.

Wir stylen die Navigation mit CSS für das responsive Design.

Wir stylen die Navigation mit CSS für das responsive Design.

Wir bringen die Links von dem responsiven Menu zum laufen

Hier erhältst du den Javascript code für das responsive Menü

Du lernst mit CSS den Hero Bereich für die mobilen Geräte zugänglich zu machen.

Du lernst mit CSS den Hero Bereich für die mobilen Geräte zugänglich zu machen.

Du lernst mit CSS den Hero Bereich für die mobilen Geräte zugänglich zu machen.

Du lernst mit CSS den Hero Bereich für die mobilen Geräte zugänglich zu machen.

Du lernst mit CSS die Liste für die mobilen Geräte zugänglich zu machen.

Du lernst mit CSS die Liste für die mobilen Geräte zugänglich zu machen.

Du lernst mit CSS den Bereich Lerninhalte für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS den Bereich Lerninhalte für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS den Bereich Lerninhalte für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS den Bereich Vorteile für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS den Bereich Häufig gestellte Fragen für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS den Bereich Testimonials für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS das Kontaktformular für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS die Kontaktinfo für mobile Geräte visuell ansprechend darzustellen.

Du lernst mit CSS den Footer für mobile Geräte visuell ansprechend darzustellen.

Du lernst wie die Glow Effekte für die mobile Version angepasst werden können.

Du lernst wie wir das Kontaktformular für den Chrome Browser optimal gestalten können und wie wir die Schriftfarbe anpassen können.

Was hast du eigentlich alles gerade gelernt und wie solltest du weiter machen ?

Ich zeige dir wie wir ein PHP Skript verknüpfen können, damit unser Kontaktformular auf einem Server läuft.

Wir bauen eine Seite, auf welche der Nutzer weitergeleitet wird, wenn er das Kontakformular absendet.

Wir bauen eine Seite, auf welche der Nutzer weitergeleitet wird, wenn er das Kontakformular absendet.

Im Abschnitt "Hosting erklärt" lernst du, wie du deine Website online stellst und sie für die Öffentlichkeit zugänglich machst. Außerdem erkläre ich dir kurz was es dabei zu beachten gibt.

Du lernst, wie du eine Domain kaufst und registrierst, um deiner Website eine professionelle Online-Adresse zu geben. Anschließend erklären wir den Prozess des Webhostings mit Ionos und wie du mithilfe von SFTP und FileZilla deine Website-Dateien sicher auf den Server überträgst. Dieser Abschnitt bietet dir eine umfassende Anleitung, um deine Website erfolgreich zu hosten und live zu schalten.

Du lernst worauf du achten musst bei der online Präsenz und dem live schalten einer Website.