Sie suchen Ihre bereits erworbenen Lerninhalte? Dann geht es hier entlang: Zum academy Campus
Lernen Sie praxisnah, wie Sie Webseiten erstellen, die sich automatisch an verschiedene Endgeräte anpassen. IT-Experte Fabian Hiller zeigt in seinem Videokurs alle Inhalte Schritt für Schritt. Sie können direkt mitmachen und Ihr Wissen anhand von Übungen und Quizfragen überprüfen.
Flexible IT Weiterbildung on demand, schon als monatliches Abo erhältlich
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.
Klicken zum Abspielen
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
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
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
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
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
Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Fabian Hiller gründete bereits mit 18 Jahren sein erstes Unternehmen und unterstützte Unternehmen, Restaurants und Vereine in seiner Umgebung mit Grafikdesign und Webentwicklung. 2018 folgte dann mit Adstock das zweite 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 an zahlreichen weiteren Softwareprojekten beteiligt.
Füllen Sie ganz einfach und bequem das Kontaktformular aus und wir werden Ihnen Ihre Fragen schnellstmöglich beantworten.
Teamleiter Redaktion & Content-Produktion
Telefonisch erreichbar: Mo – Fr | 9 – 17 Uhr