Zum Campus
Videokurs

Responsive Portfolio-Website mit HTML und CSS erstellen

Erstelle mit HTML und CSS die Startseite einer Portfolio-Website, die sich an unterschiedliche Endgeräte anpasst

LERNZIELE

  • Du wendest HTML und CSS in der Praxis an
  • Du erstellst eine HTML-Datei mit Header und Footer
  • Du lernst, wie du ein Burger-Icon zu einem X animierst
  • Du lernst, wie du mit JavaScript Inhalte ein- und ausblendest
  • Du erhältst ein tieferes Verständnis für HTML-Strukturelemente
  • Du lernst CSS-Code übersichtlich zu strukturieren
  • Du erhältst ein tieferes Verständnis für die wichtigsten CSS-Eigenschaften
  • Du passt das Design mit Media Queries an verschiedene Displaygrößen an
  • Du setzt CSS-Flexbox in der Praxis ein

INHALT

Du kennst bereits die Grundlagen von HTML und CSS? Dir fehlt aber noch etwas der praktische Bezug? Dann ist dieser Kurs genau richtig für dich. Gemeinsam erstellen wir Lektion für Lektion eine anspruchsvolle Portfolio-Website mit einer seitlichen Navigation und kleinen Animationen. Ich nehme dich dabei an die Hand und erkläre dir jeden wichtigen Schritt.

Du sammelst dabei wichtige Erfahrung mit verschiedenen HTML-Elementen und CSS-Eigenschaften. Wir setzen CSS-Flexbox ein und nutzen Media Queries, um die Website responsive an verschiedene Endgeräte anzupassen. Der Kurs gibt dir die Sicherheit, um im Anschluss selbständig die Website mit eigenen Ideen weiter auszubauen.

ALLE LEKTIONEN IM ÜBERBLICK

Portfolio-Website erstellen
  • Intro
  • Einführung in Visual Studio Code
  • Vorbereitung der Arbeitsumgebung
  • Projektvorstellung
  • HTML-Code für den Kopfbereich erstellen
  • Mit CSS das Logo positionieren und Burger-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

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.

DEIN EXPERTE

Fabian Hiller
Webentwickler und CTO | Adstock

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.

Responsive Portfolio-Website mit HTML und CSS erstellen

Veröffentlicht am 13.12.2025
ab 49,00 €
im
ESSENTIAL PASS
Preise und Pakete vergleichen

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.

Kontaktformular