Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind
Lerne praxisnah das Erstellen von Websites, die sich automatisch an unterschiedliche Endgeräte anpassen
LERNZIELE
- Du lernst die Grundlagen von HTML und CSS
- Du kannst mit den Entwicklungstools des Browsers umgehen
- Du erhältst einen Einblick in das Design von Benutzeroberflächen
- Du erstellst eine Portfolio-Website mit HTML und CSS
- Du erstellst einen Blog mit HTML und dem Frontend-Framework Bootstrap
- Du erstellst die Benutzeroberfläche für einen Online-Shop mit HTML und Tailwind CSS
INHALT
Responsive Webdesign ist schon lange kein Feature mehr, sondern ein fester Bestandteil einer modernen Website. In diesem Kurs lernst du Schritt für Schritt die Grundtechnologien HTML und CSS kennen. Wir werfen dabei auch einen Blick auf Webdesign und ich gebe dir einen Einblick in die Vorgehensweise professioneller Teams.
Der Kurs enthält drei umfangreiche Projekte, anhand derer ich dir mein Vorgehen bei der Entwicklung einer Website erläutere und du wichtige Erfahrungen sammelst. Zusätzlich lernst du dabei auch das Frontend-Framework Bootstrap kennen, mit dem wir einen Blog erstellen, und das CSS-Framework Tailwind, das vor allem in den letzten Jahren immer beliebter geworden ist.
Falls du noch neu in der Welt der Webentwicklung bist oder bisher nur vereinzelt mit HTML und CSS gearbeitet hast, ist dieser Kurs genau richtig für dich.
ALLE LEKTIONEN IM ÜBERBLICK
- 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
- Intro
- Rückblick
- Ein Blick in die Zukunft
- Fazit und Kursabschluss
- 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
- 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
- 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
- Herzlich Willkommen zu diesem Kurs
- Einführung in Visual Studio Code
- Einführung in die Browser-Entwicklungstools
- Vorbereitung der Arbeitsumgebung
- 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
- 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
SO LERNST DU MIT DIESEM KURS
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
- Wissensquiz zur Lernkontrolle
- Lernhistorie und Lernfortschritt
- Lesezeichen und Notizen
- Volltextsuche in den Videos
- Übungsmaterial zum Mitmachen
- Responsive Web-App und Videostreaming für alle Endgeräte
TECHNISCHE VORAUSSETZUNGEN
Für diesen Videokurs wird lediglich ein aktueller Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind
inkl. MwSt. | 205,88 € netto
Du hast Fragen zu unseren academy Videokursen? Wir helfen dir gerne weiter.
Fülle ganz einfach und bequem das Kontaktformular aus und wir werden deine Fragen schnellstmöglich beantworten.