Genius! Interaktives 4 Minuten HTML & CSS Tutorial

Das „Webdesign in 4 minutes“ Tutorial von Jeremy Thomas ist einer der besten e-learning Ansätze, die ich seit langem gesehen habe.

Das Tutorial gibt es hier und ist eigentlich eine eigene dynamische Website: Webdesign in 4 Minutes – Jeremy Thomas.

Step by Step grundlegende HTML & CSS Funktionen lernen

Das geniale an dem 4-Minutes-Tutorial ist die Tatsache, dass die Anleitung sich dynamisch den gelehrten Funktionen ändert. Du bekommst gezeigt wie man den Body-Font einer Website in CSS ändert: Zack, das Ganze Dokument ändert seinen Font vom Default-Times-New-Roman zu Arial.

Und so verändert sich das ganze Dokument in 10 Lektionen von einem Standard HTML-File zu einer Website, wie man sie im Web tatsächlich vorfinden würde. Ziemlich beeindruckend und sehr smooth umgesetzt.

Die 10 HTML-CSS-Funktionen in der Übersicht

Die 10 Lektionen, die Jeremy Thomas verbaut hat, sind eigentlich Basic HTML- und CSS-Funktionen. Es sind:

  1. Content in Paragraph-Tags
  2. Centering von Elementen mit Margin- und Width-Attributen
  3. Font-Family Änderung (Schriftart)
  4. Spacing-Funktion mit line-height- und padding-Attributen
  5. Änderung der Schriftfarbe für bessern Kontrast zum Hintergrund
  6. Balancieren der Seiten-Darstellung durch Hinzufügen von Background-Colors
  7. Erhöhung des Wiedererkennungswertes durch Hinzufügen einer Primärfarbe
  8. Erweiterung der Seiten-Identität um eine Sekundärfarbe.
  9. Erneute Änderung der Schriftart mit einem Custom-Google-Font
  10. Hinzufügen eines Logos und eines Header-Hintergrund-Bildes

Die Dokumenten-Änderungen in der Übersicht

1 Intro
2 Content
3 Centering
4 Font Family
5 Spacing
6 Font Color
7 Balance
8 Primary Color
9 Secondary Color
Custom Google Font
11 Images
12 Background image

Die technische Umsetzung des interaktiven Tutorials

Die einzelnen Steps des Tutorials werden über Anchor-Links angesteuert. Allerdings wird hinter den einzelnen Link-Klicks noch die ein oder andere Javscript-Funktion liegen, die einzelnen-Sektionen von display:none auf display:block setzt.

Wer sich weiter mit dem Thema „Learn to code“ beschäftigen möchte, der kann sich gerne noch meinen Artikel zum Thema Die besten Coding-Ressourcen im Web zu Gemüte führen.

Christoph Kleine

... ist Senior Manager Online Marketing bei nexible & Gründer von internetzkidz.de. Neben Online-Marketing beschäftigt er sich mit Usability, Web-Analytics, Marketing-Controlling und Businessplanung. Xing, LinkedIn.

Kommentar posten

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.