Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind

Responsive Webdesign ist längst kein Feature mehr, sondern fester Bestandteil einer modernen Website. In diesem Kurs lernen Sie Schritt für Schritt die grundlegenden Technologien HTML und CSS kennen. Außerdem werfen Sie einen Blick auf das Webdesign und erhalten einen Einblick in die Arbeitsweise professioneller Teams.

Der Kurs beinhaltet drei umfangreiche Projekte, anhand derer Sie die Vorgehensweise bei der Entwicklung einer Website kennenlernen und wichtige Erfahrungen sammeln. Außerdem lernen Sie das Frontend-Framework Bootstrap kennen, mit dem Sie einen Blog erstellen, sowie das CSS-Framework Tailwind, das in den letzten Jahren immer beliebter geworden ist.

Wenn Sie neu in der Welt der Webentwicklung sind oder bisher nur sporadisch mit HTML und CSS gearbeitet haben, ist dieser Kurs genau das Richtige für Sie.

Alle Video-Lektionen im Überblick:

• 1. Einführung in den Kurs

  • Herzlich Willkommen zu diesem Kurs

  • Einführung in Visual Studio Code

  • Einführung in die Browser-Entwicklungstools

  • Vorbereitung der Arbeitsumgebung

• 2. HTML-Grundlagen

  • Intro

  • Was ist HTML?

  • Aufbau von HTML-Elementen und Tags

  • Das HTML-Grundgerüst hinzufügen

  • Überschriften und Absätze darstellen

  • Externe und interne Inhalte verlinken

  • Grafiken und Bilder einbinden

  • Sortierte und unsortierte Listen erstellen

  • Mit Tabellen arbeiten

  • Formulare anlegen

  • Websites richtig strukturieren

  • Quiz: HTML Grundlagen

• 3. CSS-Grundlagen

  • Intro

  • Was ist CSS?

  • Deine erste Zeilen in CSS

  • CSS-Selektoren kennenlernen

  • CSS-Selektoren verbinden, kombinieren und gruppieren

  • Schriften darstellen und Texte formatieren

  • Mit dem CSS-Box-Modell Höhe, Breite und Abstände festlegen

  • Hintergrund mit Farben, Bilder oder Schatten gestalten

  • Mit der Display-Eigenschaft definieren, wie der Browser Elemente rendert

  • Elemente positionieren und ausrichten

  • Überlaufverhalten, Sichtbarkeit und Deckkraft

  • Mit CSS-Flexbox layouten

  • CSS-Grid kennenlernen

  • CSS-Grid in der Praxis

  • Elemente animieren und Übergänge definieren

  • Website mit Media Queries für unterschiedliche Geräte optimieren

  • CSS-Kaskade verstehen

  • Quiz: CSS-Grundlagen

• 4. Design-Grundlagen

  • Intro

  • Design and Prototyping Tools kennenlernen

  • Mit Design-Systemen gestalten

  • Die richtigen Farben finden und festlegen

  • Typografie richtig anwenden

  • Icons einbinden

  • Mit Komponenten arbeiten

  • Typische Layoutelemente im Webdesign

  • Workflow für die Konzeption deiner Website

  • Quiz: Design-Grundlagen

• 5. Portfolio-Website mit HTML und CSS

  • Intro

  • Projektvorstellung

  • HTML-Code für den Kopfbereich erstellen

  • CSS-Code für den Kopfbereich definieren

  • Mit CSS das Logo positionieren und Bürger-Icon erstellen

  • Burger-Icon zu einem X animieren

  • Texteingabefeld für die Suche gestalten

  • Hauptnavigation gestalten

  • HTML-Elemente dem Hauptinhalt hinzufügen

  • CSS-Regeln und Typografie für Hauptinhalt festlegen

  • Projektliste mit CSS gestalten

  • HTML und CSS für den Fußbereich hinzufügen

  • Kopfbereich für größere Endgeräte optimieren

  • Hauptinhalt für größere Endgeräte optimieren

  • Fußbereich für größere Endgeräte optimieren

  • Quiz: Portfolio-Website mit HTML und CSS

• 6. Blog-Website mit Bootstrap

  • Intro

  • Was ist Bootstrap?

  • Projektvorstellung

  • HTML-Code für den Kopfbereich erstellen

  • Kopfbereich mit Klassen von Bootstrap definieren

  • Willkommenbereich anlegen

  • HTML-Code für die Beitragsliste erstellen

  • Beitragsliste mit Bootstrap-Klassen gestalten

  • Beitragsliste für größere Endgeräte optimieren

  • Fußbereich anlegen

  • HTML-Code für Beitragsseite erstellen

  • Beitragsseite mit Klassen von Bootstrap definieren

  • Quiz: Blog Website mit Bootstrap

• 7. Online-Shop-Website mit Tailwind CSS

  • Intro

  • Was ist Tailwind?

  • Projektvorstellung

  • HTML-Code für den Kopfbereich erstellen

  • Kopfbereich mit Klassen von Tailwind definieren

  • HTML-Code für Hauptinhalt erstellen

  • Banner mit den Klassen von Tailwind gestalten

  • Grafik im Banner gestalten und Anpassungen für größere Endgeräte vorehmen

  • Produktliste für die mobile Version gestalten

  • Produktliste für größere Endgeräte optimieren

  • Buttons mit Hover-Effekt versehen und Produktliste fertigstellen

  • HTML-Code für den Fußbereich erstellen

  • Fußbereich mit Tailwind-Klassen definieren

  • Quiz: Online-Shop-Website mit Tailwind CSS

• 8. Aussicht

  • Intro

  • Rückblick

  • Ein Blick in die Zukunft

  • Fazit und Kursabschluss

So lernen Sie mit diesem Videokurs:

In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:

• Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten

• Wissensquizzes zur Lernkontrolle

• Lernhistorie und Lernfortschritt

• Lesezeichen und Notizen

• Volltextsuche in den Videos

• Frage-den-Experten-Modul

• Übungsmaterial zum Mitmachen

• Responsive Web-App und Videostreaming für alle Endgeräte

Technische Voraussetzungen:

Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.