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 lernst du Schritt für Schritt die grundlegenden Technologien HTML und CSS kennen. Außerdem wirfst du einen Blick auf das Webdesign und erhältst einen Einblick in die Arbeitsweise professioneller Teams.

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

Wenn du neu in der Welt der Webentwicklung bist oder bisher nur sporadisch mit HTML und CSS gearbeitet hast, ist dieser Kurs genau das Richtige für dich.

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 lernst du mit diesem Videokurs:

In den Videokursen der heise academy lernst du IT-Themen anschaulich und verständlich. Du siehst den Experten bei der praktischen Arbeit zu und lässt dir dabei alles genau erklären. Das Wissen ist in kompakte Lerneinheiten unterteilt, sodass du den Kurs Schritt für Schritt durcharbeiten oder gezielt zu Lektionen springen kannst, die dich interessieren. Die persönliche Lernumgebung der heise academy hält viele Funktionen für dich bereit, die dich 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.