Responsive Websites mit HTML5 und CSS3 erstellen - E-Learning

Responsive Websites mit HTML5 und CSS3 erstellen - E-Learning

Bauen Sie ein starkes Fundament in der modernen Webentwicklung mit HTML5 und CSS3 auf – den Kerntechnologien hinter jeder Website im Internet. Dieser Kurs wurde entwickelt, um Ihnen dabei zu helfen, optisch ansprechende, responsive und benutzerfreundliche Webseiten von Grund auf neu zu erstellen.

Sie beginnen mit den Grundlagen der HTML-Struktur und gehen schrittweise zu fortgeschrittenen Styling-Techniken mit CSS3 über, einschließlich Flexbox, Grid, Animationen und den Prinzipien des Responsive Designs. Durch praktische Übungen und reale Projekte lernen Sie, wie Sie Websites in professioneller Qualität entwerfen und erstellen, die auf allen Geräten nahtlos funktionieren.

Am Ende dieses Kurses werden Sie in der Lage sein, moderne Web-Layouts souverän zu erstellen, und Sie sind bereit für den nächsten Schritt auf Ihrem Weg zum Frontend-Entwickler.

Hauptmerkmale

• Kurs und Materialien auf Englisch

• Niveau: Anfänger bis Fortgeschrittene

• Mehr als 7 Stunden On-Demand-Videos

• 34 angeleitete Praxisübungen

• 8 automatisch bewertete Tests (Assessments)

• 3 Praxisaufgaben (Assignments)

• 60 Wissensquizze zur Wiederholung

• Mehr als 20 Stunden empfohlene Lernzeit

• 1 Jahr Zugriff auf die Lernplattform

• Inklusive Zertifikat bei Kursabschluss

Lernziele

• Die verschiedenen Arten von HTML-Eingabeelementen verstehen und lernen, wie man sie zum Erstellen interaktiver Webformulare nutzt

• Lernen, wie Formulareingaben mithilfe von HTML validiert werden, um die Datengenauigkeit und die Benutzererfahrung zu verbessern

• Webinhalte durch den Einsatz semantischer HTML-Tags effektiv strukturieren, um die Lesbarkeit und Barrierefreiheit zu verbessern

• CSS-Styles kaskadierend anwenden, um zu steuern, wie Regeln priorisiert und auf einer Webseite angezeigt werden

• CSS-Pseudoelemente verwenden, um das Design zu verbessern und Styling-Effekte ohne zusätzlichen HTML-Code hinzuzufügen

• Mit Flexbox arbeiten, um flexible, responsive Layouts zu erstellen und die Ausrichtung sowie die Abstände von Elementen effizient zu verwalten

Zielgruppe

• Angehende Webentwickler

• Einsteiger in der Frontend-Entwicklung

• UI/UX-Designer, die ihre Entwürfe selbst coden möchten

• Studierende und Jugendliche, die eine Karriere in der Webentwicklung anstreben

• Fachkräfte, die in Tech-Rollen wechseln möchten

• Alle, die daran interessiert sind, Websites von Grund auf neu zu bauen

Voraussetzungen

• Keine vorherige Programmiererfahrung erforderlich

• Grundlegende Computerkenntnisse

• Interesse an Webdesign und Webentwicklung

Kursinhalt

Einführung in die Webentwicklung

• Was ist HTML?

• Was ist CSS?

• Einrichten der Arbeitsumgebung

• Hello World!

• VS Code mit Live-Reload nutzen

• Verwendung von Emmet und Online-Tools

• Nutzung der Chrome Developer Tools

Einführung in HTML

• HTML-Elemente und -Tags

• Einzelne (selbstschließende) und paarige Tags

• Struktur einer HTML-Seite

• Überschriften- und Absatz-Tags (Headings & Paragraphs)

• Attribute in HTML

• Bilder einbinden

• Links – intern und extern

• Listen

• Tabellen

• Das style-Attribut

• Farben in HTML

• Semantische HTML5-Tags

• HTML5 Audio- und Video-Tags

Grundlegende HTML-Tags und Attribute

• Das Image-Tag und seine Attribute

• Links – intern und extern

• Listen – geordnet und ungeordnet

• Tabellen in HTML

• Das style-Attribut

• Farben in HTML

• Semantische Elemente in HTML5

• HTML-Audio- und -Video-Elemente

Formulare und Eingaben (Forms & Inputs)

• Das form-Tag

• Verwendung des label-Tags

• Das HTML-input-Tag

• select (Auswahllisten) und textarea (Textfelder)

• Buttons (Schaltflächen)

• Das datalist-Element

• Erstellung eines Kontaktformulars

• Einfache Formularelemente

• Labels und Inputs

• Grundlegende HTML-Tags und Attribute

• Auswahllisten (Selects) und Optionen (Options)

• E-Mail-, Passwort-Eingaben und Buttons

• Datalists in HTML

Einführung in CSS

• Verwendung des style-Tags

• HTML-Elemente gezielt ansprechen (Selektoren)

• Verschachtelte HTML-Elemente ansprechen

• Verwendung externer Stylesheets

• CSS-Styles überschreiben

• Häufige CSS-Eigenschaften

• CSS-Einheiten

• Das CSS-Box-Modell

• Weitere CSS-Eigenschaften

• CSS-Pseudoklassen

• Verwendung des style-Elements

• HTML-Elemente in CSS ansprechen

• Verschachtelte HTML-Elemente ansprechen

• Verwendung externer Stylesheets

• Styling mithilfe externer Stylesheets

Fortgeschrittenes CSS

• CSS-Positionierung – static, relative und absolute

• CSS-Positionierung – fixed und sticky

• CSS-Pseudoelemente ::before und ::after

• CSS-Variablen

• Eigene Schriftarten (Custom Fonts) in CSS

• Importieren externer Stylesheets

• Übergänge (Transitions) und Animationen

• Was sind CSS-Transitions?

• Grundlegende Übergänge und CSS-Eigenschaften

• CSS-Animationen und deren Eigenschaften

• Keyframes definieren

Responsive Webdesign

• Media Queries

• Was ist CSS Flexbox?

• Zeilen und Spalten erstellen (Rows & Columns)

• Weitere Flexbox-Eigenschaften

• Was ist das CSS Grid Layout?

• Zeilen und Spalten im Grid

• Rasterzellen zuweisen

• Grid Template Areas

• Erstellung einer responsiven Bildergalerie

• Media Queries

• CSS Flexbox-Eigenschaften

• Fortgeschrittene Flexbox-Eigenschaften

• CSS Grid

• CSS Grid-Eigenschaften

• Grid-Bereiche (Grid Areas) im CSS Grid

FAQ (Häufig gestellte Fragen)

Wird es über die On-Demand-Videos hinaus weitere Lernmaterialien geben?

Absolut! Das On-Demand-Lernerlebnis bietet weit mehr als nur Videos, um eine immersive Lernumgebung zu schaffen. Dazu gehören:

• LERNEN: Interaktive eBooks, Wissensquizze und reale Fallstudien zur Festigung der Konzepte.

• BEWERTEN: Einstufungstests, modulbasierte Tests und Abschlussprüfungen, um Ihren Fortschritt zu verfolgen.

• PRÄSENTIEREN/ÜBEN: Praxisnahe Übungen mit realen Simulationen und Cloud-Labs.

• EINBLICKE GEWINNEN: Echtzeit-Analysen und Berichte, die Ihre Lernfortschritte, Herausforderungen und vorgeschlagenen Bereiche aufzeigen, die Sie für das Meistern der Schlüsselkompetenzen noch einmal vertiefen sollten.

Kann ich diesen Kurs neben meinem Vollzeitjob absolvieren?

Ja! Dieser Kurs ist auf maximale Flexibilität ausgelegt. Da er in einem Onlinemodus zum Selbststudium bereitgestellt wird, können Sie ganz nach eigenem Zeitplan lernen und sich weiterbilden. So lässt sich das Training perfekt mit Ihrem Hauptberuf vereinbaren.

Was werde ich in diesem Kurs lernen?

Sie lernen, wie Sie moderne, responsive Websites erstellen – unter Verwendung von HTML5 für die Struktur und CSS3 für das Design, einschließlich fortgeschrittener Layout-Techniken wie Flexbox und Grid.

Ist dieser Kurs für Anfänger geeignet?

Ja, er ist speziell für absolute Einsteiger konzipiert, die noch keine Erfahrung im Programmieren oder Coden haben.

Kann ich nach Abschluss dieses Kurses echte Websites bauen?

Ja, Sie werden in der Lage sein, voll funktionsfähige und responsive Websites eigenständig zu entwerfen und zu programmieren.

Beinhaltet der Kurs ein Training für Responsive Design?

Ja, Sie lernen, wie Sie Websites so gestalten, dass sie sich mithilfe moderner CSS-Techniken automatisch an unterschiedliche Bildschirmgrößen (Smartphone, Tablet, Desktop) anpassen.

Welche praktischen Fähigkeiten werde ich erwerben?

Sie lernen, wie man Webseiten strukturiert, Layouts gestaltet, Formulare erstellt sowie responsive und interaktive Designs umsetzt.