Matthias Scharwies: Wiki: Einstieg in CSS - zum Rundgang ausbauen?

Servus!

Durch den gestrigen Thread zu CSS-"Dingen" bin ich wieder auf den zweiten Teil des Einstieg in CSS-Tutorials gestoßen.

Langfristig würde ich gerne hier eine Reihe von Artikeln schaffen, die ähnlich dem HTML-Einstiegs-Tutorial an die Tradition der Rundgänge in der alten Doku anschließen.

Dabei habe ich folgende Fragen:

#A. Reihenfolge

Was ist die „richtige“ Reihenfolge?

  1. Einstieg in CSS
    • Regelsätze und Deklarationen
    • Stylesheets einbinden
  2. Einstieg in Selektoren
    • Elemente selektieren
    • Benutzeraktionen sichtbar machen
  3. das Box-Modell
  4. Kaskade
    • Spezifität
  5. Vererbung
  6. Medienabfragen (Media Queries)

Die Artikel Kaskade und Vererbung sind sehr speziell - die würde ich eher ans Ende packen. (oder ganz aus dem Einstiegs-Tutorial rauslassen.)

Das Box-Modell wäre jetzt imho als Teil 3 dran - seht ihr das auch so?

Danach die Media Queries als Teil 4. Hier haben wir drei verschiedene Artikel. Ich würde den Tipps und Tricks-Artikel ins Tutorial ziehen.

#Der richtige Name und Speicherort

Das ist jetzt wieder richtig wiki-intern. Trotzdem wäre es nett, wenn ihr Euch Gedanken machen würdet. Der Name CSS/Einstieg in CSS ergab sich aus dem Ursprungstitel CSS/Syntax. Eigentlich wären Tutorials aber unter CSS/Tutorials zu finden.

Was haltet ihr von:

So würde man nicht nur über die Fortsetzungsvorlage, sondern auch über das Breadcrumb-Menü zum Anfang kommen.

Wäre das zu lang?

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
  1. Aloha ;)

    Langfristig würde ich gerne hier eine Reihe von Artikeln schaffen, die ähnlich dem HTML-Einstiegs-Tutorial an die Tradition der Rundgänge in der alten Doku anschließen.

    Meine Idee zum Anknüpfen an die Rundgänge war ja die „guided tour“, das heißt ein Wikiartikel, der auf die verschiedenen Tutorials in einer logisch sinnvollen Reihenfolge verlinkt und auch einfach das "große Ganze" beim Lernen der Sprache im Blick behält.

    Leider bin ich bis heute nicht dazu gekommen, in die Richtung auch nur irgendwas zu machen. Es freut mich natürlich, wenn bei deinen Überlegungen sowas ähnliches rauskommt, denn von der Notwendigkeit sowas zu haben (trotz mangelnder Zeit, es zu schreiben) bin ich immer noch völlig überzeugt.

    Dabei habe ich folgende Fragen:

    Ich halte mich mal noch mit meinem Senf zurück, weil ich grad gedanklich davon weit weg bin. Ich kann mich aber gerne nochmal melden, falls anderweitige Antworten ausbleiben oder falls mir wichtige Ergänzungen einfallen.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    1. Servus!

      Aloha ;)

      Langfristig würde ich gerne hier eine Reihe von Artikeln schaffen, die ähnlich dem HTML-Einstiegs-Tutorial an die Tradition der Rundgänge in der alten Doku anschließen.

      Meine Idee zum Anknüpfen an die Rundgänge war ja die „guided tour“, das heißt ein Wikiartikel, der auf die verschiedenen Tutorials in einer logisch sinnvollen Reihenfolge verlinkt und auch einfach das "große Ganze" beim Lernen der Sprache im Blick behält.

      Die „verschiedenen Tutorials“ sind ja noch nicht alle da, sondern mehr oder weniger didaktisch ausgefeilte Stubs. Diese Baustelle soll eine Tutorialreihe / einen Rundgang ergeben, der sich im Aufbau von den Anfängen über Einzelbeispiele und kleine Exkurse langsam steigert.

      Dabei sollen sich die Tutorials von „normalen“ Wikiseiten und diese von den Referenzen klar unterscheiden.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
  2. hallo

    1. das Box-Modell
    2. Kaskade
      • Spezifität
    3. Vererbung
    4. Medienabfragen (Media Queries)

    Ich würde (ging's nicht um tutorials) zuerst den Geltungskontext, dann Syntax, Selektoren und Media-Queries (ja auch eine Art Selektor), dann Spezifität.

    Erst dann einzelne Eigenschaften besprechen.

    Tutorials sind aber von der Art:

    • ach lass uns einfach mal ins kalte Wasser springen, systematische Erklärungs gibts später
    • oder: wir wollen neu hinzugekommenes kennenlernen und vertiefen.
    --
    Neu im Forum! Signaturen kann man ausblenden!
    1. Servus!

      Ich würde (ging's nicht um tutorials) zuerst den Geltungskontext, dann Syntax, Selektoren und Media-Queries (ja auch eine Art Selektor), dann Spezifität.

      Ok, neuer Vorschlag:

      1. Warum Layouts mit CSS?
        • Stylesheets einbinden (aus dem Folgekapitel nach vorne gezogen)
      2. Syntax
        • Regelsätze und Deklarationen
        • typische Fehlerquellen
      3. Selektoren
        • Elemente selektieren
        • Benutzeraktionen sichtbar machen
      4. Box-Modell
        • „klassisches“ Box-Modell
        • box-sizing
      5. Media Queries
      6. Kaskade
        • Spezifität
      7. Vererbung

      Ich war mir nicht sicher, ob wir den vorhandenen Artikel Warum Layouts mit CSS? mit einbauen sollen?

      Erst dann einzelne Eigenschaften besprechen.

      Im Syntax-Teil ging's ja hauptsächlich um color und background-color; als 4. würde ich schon das Box-Modell nehmen und mögliche Lösungen wie box-sizing besprechen.

      Erst wenn ich Boxen nebeneinander platziere, kann ich danach die entsprechenden media queries besprechen. Vor allem möchte ich auf Flexbox und Grid hinweisen (nicht Teil des Tutorials) und auf float und position und die möglichen Fallstricke verzichten.

      Tutorials sind aber von der Art:

      • ach lass uns einfach mal ins kalte Wasser springen, systematische Erklärungs gibts später
      • oder: wir wollen neu hinzugekommenes kennenlernen und vertiefen.

      Bei SELFHTML springt man mit einem Beispiel ins nicht zu tiefe Wasser und wagt sich dann weiter rein. Es sind aber immer Hilfen in Form von Erklärungen und weiterführenden Links auf die anderen Seiten da.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. Hallo Matthias,

        deine Strukturierung finde ich gut.

        Ich war mir nicht sicher, ob wir den vorhandenen Artikel Warum Layouts mit CSS? mit einbauen sollen?

        Am Anfang des Rundgangs wird doch sicherlich eine Art „Motivation“ beschrieben, wozu man CSS braucht. Da passt der Artikel gut hin.

        Gruß
        Julius

        1. Servus!

          Hallo Matthias,

          deine Strukturierung finde ich gut.

          Ich war mir nicht sicher, ob wir den vorhandenen Artikel Warum Layouts mit CSS? mit einbauen sollen?

          Am Anfang des Rundgangs wird doch sicherlich eine Art „Motivation“ beschrieben, wozu man CSS braucht. Da passt der Artikel gut hin.

          @Julius Vielen Dank für Dein Feedback!

          Ja, das ist das „Lustige“ : erst hatten wir viele, nicht zusammenhängende Seiten. Im Oktober hatte ich dann CSS/Syntax in CSS/Einstieg in CSS umbenannt und andere Seiten integriert. Als Tutorial-Reihe habe ich es wieder auseinandergezogen und jetzt brauche ich nur noch gute Beispiele für Pseudoelemente (wsl. Links kennzeichnen) und das Box-Modell (3-spaltig mit float, flex und box-sizing:border-box).

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste