Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind

54,50 €

% 109,00 €* (50% gespart)

Lieferzeit Sofort lieferbar

Lernen Sie praxisnah das Erstellen von Websites, die sich automatisch an unterschiedliche Endgeräte anpassen. IT-Experte Fabian Hiller zeigt in seinem Videokurs alle Inhalte Schritt für Schritt. Sie können direkt mitmachen und Ihr erlerntes Wissen anhand von Übungsaufgaben und Quizzen überprüfen.


  • Responsive Webdesign anschaulich erklärt in 85 Lektionen
  • Prüfen Sie das Gelernte in Wissenstests
  • Stellen Sie den Experten Fragen über das Q&A-Modul
  • Machen Sie mit bei praktischen Übungen
Anzahl:
Artikel-Beschreibung

Responsive Webdesign ist schon lange kein Feature mehr, sondern ein fester Bestandteil von einer modernen Website. In diesem Kurs lernen Sie Schritt für Schritt die Grundtechnologien HTML und CSS. Sie werfen dabei auch einen Blick auf Webdesign und erhalten einen Einblick in die Vorgehensweise von professionellen Teams.

Der Kurs enthält drei umfangreiche Projekte, anhand denen Sie das Vorgehen bei der Entwicklung einer Website kennenlernen und erfahren, wie Sie wichtige Erfahrungen sammeln. Zusätzlich lernen Sie dabei auch das Frontend-Framework Bootstrap kennen, mit dem Sie einen Blog erstellen werden sowie das CSS Framework Tailwind, das vor allem in den letzten Jahren immer beliebter wird.

Falls Sie noch neu in der Welt der Webentwicklung sind oder bisher nur vereinzelt mit HTML und CSS gearbeitet haben, ist dieser Kurs genau richtig für Sie.

Länge:  552 Minuten




Alle Video-Lektionen im Überblick:


  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Aussicht
    • Intro
    • Rückblick
    • Ein Blick in die Zukunft
    • Fazit und Kursabschluss


Über den Trainer:

Fabian hat bereits mit 18 Jahren sein erstes Unternehmen gegründet und Unternehmen, Restaurants und Vereine in seiner Umgebung mit Grafikdesign und Webentwicklung unterstützt. 2018 folgte dann mit Adstock das zweites Unternehmen. Neben seinem YouTube-Kanal, auf dem er sein Wissen und seine Erfahrungen rund um UI und UX Design, sowie App- und Webentwicklung teilt, ist er bei vielen weiteren Softwareprojekten beteiligt.

So lernen Sie mit diesem Videokurs:
In den Videokursen von heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie den Experten bei der praktischen Arbeit zu und lassen Sie sich dabei 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 hält viele Funktionen für Sie bereit, die Ihnen beim Lernen helfen können:


  • 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.

Artikel-Details
Anbieter:
Heise Medien GmbH & Co. KG
Artikelnummer:
responsive_webdesign_hiller_01
Veröffentlicht:
15.07.2021

0 von 0 Bewertungen

Geben Sie eine Bewertung ab!

Teilen Sie Ihre Erfahrungen mit dem Produkt mit anderen Kunden.