Lese-Tipp: Want to get better at code? Teach someone CSS.

[Matthias Scharwies]

Servus!

Habe grad den schon älteren Artikel auf CSS-tricks gefunden: Want to get better at code? Teach someone CSS. (Jetzt weiß ich ich was Chris Coyier mit Mädels macht: CSS lernen!)

tl;dr?

'''Nicht''' mit den HTML-Grundlagen ("We started with some basic HTML, and honestly, I saw my friend’s eyes glazing over almost immediately. It just looks so dull when you can’t see it doing anything right away") anfangen, sondern ein bestehendes Logo / eine bestehende Webseite ändern, mit :hover spielen - die Fragen nach den Grundlagen kommen dann von alleine.

---

Das entspricht dem Konzept, das @Felix Riesterer mal vorgeschlagen hatte und das ich hier als Tutorial veröffentlicht habe:

• HTML und CSS (zum-unterrichten.de)

1. Ich würde das gerne auch als Kurs auf SELFHTML veröffentlichen. Habt ihr einen griffigen Namen, unter dem man dies (und einen JS-Kurs mit halbfertigen Skripten) im Unterschied zu unseren Selbstlernkursen anbieten könnte

2. Habt ihr Vorschläge, welche Webseite man verändern sollt sollte?

   • Die der Schule / Bildungseinrichtung?
   • Eine mit möglichst klarem CSS? Unser (Beispiel-Layout)
   • Bei einer CMS-Seite von Wordpress müsste man sich ja erst durch die Klassen kämpfen!
   • Evtl ganz unkonventionell mit einem SVG-Logo? Wohl eher nicht oder?

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Matthias,

Das entspricht dem Konzept, das @Felix Riesterer mal vorgeschlagen hatte

meinst Du mein bestbewertetes Posting?

• HTML und CSS (zum-unterrichten.de)

Da kommt mein Quiz-Script zum Einsatz! Sehr schön. ;-) Und natürlich der obligatorische Fliegenschiss: Das Drag&Drop-Teil muss ein schließendes </header> sein, also mit Slash.

Mein Posting als Lernpfad umgesetzt würde nicht so viel auf der ersten Seite behandeln wollen. Was spricht dagegen, die vielen Elemente auf späteren Seiten einzusetzen? Der Unterschied zwischen Plaintext und HTML-Code sollte doch auf der ersten Seite genügen. Dazu kann man das <p>-Element alleine verwenden (Du nimmst gleich noch eine Überschrift dazu):

Ein Text
in mehrere Zeilen
aufgeteilt

Im Browser ergibt das eine einzige Zeile, weil die Zeilenumbrüche wie Leerzeichen dargestellt werden.

<p>Ein Text</p><p>in mehrere Zeilen</p><p>aufgeteilt</p>

Hier wirkt das Markup und erzeugt echte Zeilenumbrüche, obwohl im Quelltext keine stehen.

Damit ist ein erster Aha-Effekt geleistet, der zum Thema "Auszeichnungssprache" auf der nächsten Seite führen kann. Aber noch nicht auf der ersten Seite. Deine Lösungen enthalten ja genau das. Aber warum nicht auf ein einziges HTML-Element reduziert? Und mit einem deutlich kürzeren Beispieltext! Der vorliegende eignet sich später, wenn man das Zusammenspiel der verschiedenen Elemente im Hinblick auf Semantik üben will. Denn die werden dann ja verschachtelt, was auch ein Lernschritt für später sein sollte.

Auf der nächsten Seite würde bei mir dann die Überschrift und ihre hierarchischen Varianten kommen. Damit wird dann schon ein kleines Gefühl von Dokumentstruktur deutlich, weil mit der Hierarchie der Überschriften eine inhaltliche Gliederung einher geht. Und glaube mir, viele "reine Anwender" haben davon so überhaupt keine Ahnung! Aber Mediawiki hat sie und kann die Überschriften in einer entsprechend verschachtelten Navi am Anfang eines Dokumentes schön veranschaulichen.

Auf der dritten Seite würde ich dann Hyperlinks behandeln. Zuerst steht da das HTML-Attribut href. Immerhin ist es ja wichtig, dass ein Tag (ich sage das Tag weil das Preis-Schild) Attribute haben kann. Und natürlich kommt nach den ersten Links auf Nachbardateien innerhalb des selben Verzeichnisses das Thema (relative) Pfade und "andere Internetseiten" mit ihren vollen Domain-Pfaden.

Aber wem erzähle ich das alles... Die Quizze gehören in meinem Modell dann natürlich auch auf spätere Seiten.

1. Ich würde das gerne auch als Kurs auf SELFHTML veröffentlichen.

Da ist mein Quiz-Mechanismus aber nicht implementiert. Bei ZUM verwenden Sie ein Mediawiki, für das mein Quiz-Mechanismus ja schon angepasst ist. Also sollte seine Einbindung in unser Wiki kein Hexenwerk sein.

Habt ihr einen griffigen Namen, unter dem man dies (und einen JS-Kurs mit halbfertigen Skripten) im Unterschied zu unseren Selbstlernkursen anbieten könnte

Anfänger-Tutorial? (SELF)HTML for Dummies?

Liebe Grüße

Felix Riesterer