woto: Vorlage für responsive HTML5-konforme Webseite mit CSS

Liebe Community,

vor einigen Jahren habe ich die selfhtml-Seite intensiv genutzt um mir eine private Homepage zu basteln. Nach ein paar Experimenten mit cms wurde mir die Seite mittlerweile von Schadsoftware zerstört. Ich arbeite nicht regelmäßig mit html, css, php, js, habe aber prinzipiell ein Grundverständnis für diese Sprachen/Strukturen. Aber seit ich meine letzte Seite erstellt habe ist auch viel passiert, bspw. war es damals kein Thema, die Darstellung für Handys oder Tablets anzupassen.

Ich würde mir nun gerne schnell eine funktionsfähige Webseite erstellen, die ich dann so nach und nach anpassen und was die Neuerungen für mich betrifft (Flexbox, Responsivität, etc.) verstehen kann. Ich habe gesehen, dass es ein html5-Grundgerüst auf selfhtml.org gibt, gibt es auch ein Grundgerüst mit Flexbox und main.css-Datei, das ich erst einmal kopieren kann? Selbstverständlich würde ich alle Copyright-Vermerke dauerhaft belassen.

Viele Grüße Woto

  1. Servus!

    Ich würde mir nun gerne schnell eine funktionsfähige Webseite erstellen, die ich dann so nach und nach anpassen und was die Neuerungen für mich betrifft (Flexbox, Responsivität, etc.) verstehen kann. Ich habe gesehen, dass es ein html5-Grundgerüst auf selfhtml.org gibt, gibt es auch ein Grundgerüst mit Flexbox und main.css-Datei, das ich erst einmal kopieren kann?

    Ja!

    • CSS/fertige_Layouts: viele Templates, die alle responsiv sind und flexbox oder grid verwenden.

    • CSS/Tutorials/Flexbox: Hier siehst du , wie man mit Flexbox eine responsive Seite im Mehrspaltenlayout erstellt.

    Selbstverständlich würde ich alle Copyright-Vermerke dauerhaft belassen.

    Brauchst Du nicht ist alles free und opensource:

    Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.

    Herzliche Grüße

    Matthias Scharwies

    --
    "Survive or die trying!"
  2. Hallo woto,

    Ich habe gesehen, dass es ein html5-Grundgerüst auf selfhtml.org gibt, gibt es auch ein Grundgerüst mit Flexbox und main.css-Datei, das ich erst einmal kopieren kann? Selbstverständlich würde ich alle Copyright-Vermerke dauerhaft belassen.

    https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design01

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Hallo Matthias, hallo Matthias,

      vielen Dank für Euren schnellen Antworten, das sieht echt schon ziemlich gut aus... auf den ersten Blick gefällt mir das Design05 am besten, dass könnte aber auch daran liegen, dass ich auch eine SVG-Affinität habe 😉

      Ich denke, dass ich schon aus pädagogischen Gründen einen Verweis auf selfhtml und den Template-Ersteller setzen werde, wie kommt es, dass die Vorlagen kommplett Public-Domain sind?

      Was ist Grid?

      Viele Grüße Woto

      1. Servus!

        auf den ersten Blick gefällt mir das Design05 am besten, dass könnte aber auch daran liegen, dass ich auch eine SVG-Affinität habe 😉

        Da sind die Farben aus unserer Selfhtml-Farbpalette auch gut aufeinander abgestimmt.

        Ich denke, dass ich schon aus pädagogischen Gründen einen Verweis auf selfhtml und den Template-Ersteller setzen werde,

        Vielen Dank! Werbung können wir immer gebrauchen!

        wie kommt es, dass die Vorlagen kommplett Public-Domain sind?

        Eigentlich fehlt bei solchen Webseiten, genauer den Farbkombinationen, der HTML-Struktur, etc, die nötige Schöpfungshöhe. Außerdem soll es die Hürde senken, eine zeitgemäße responsive Struktur zu übernehmen.

        Was ist Grid?

        Was ganz geniales: Hier ist ein Kurs in 6 Kapiteln: Einstieg in Grid

        Herzliche Grüße

        Matthias Scharwies

        --
        "Survive or die trying!"
  3. hallo

    Ich würde mir nun gerne schnell eine funktionsfähige Webseite erstellen, die ich dann so nach und nach anpassen und was die Neuerungen für mich betrifft (Flexbox, Responsivität, etc.) verstehen kann. Ich habe gesehen, dass es ein html5-Grundgerüst auf selfhtml.org gibt, gibt es auch ein Grundgerüst mit Flexbox und main.css-Datei, das ich erst einmal kopieren kann? Selbstverständlich würde ich alle Copyright-Vermerke dauerhaft belassen.

    Ich habe 2 Themes geschrieben, die aber auf Javascript basieren (ergo keine Serverseitige Logik). Dieses Verfahren ist etwas umstritten (Navigation etc setzt JS voraus), ist aber für Leute gedacht, die einfache statische Seiten pflegen wollen und trotzdem ihre Seiten ganz schnell in ihr Angebot einbinden wollen.

    1. Hallo beatovich,

      ich werde glaube ich versuchen, ohne JS auszukommen!

      Trotzdem vielen Dank und Grüße Woto

  4. @@woto

    gibt es auch ein Grundgerüst mit Flexbox und main.css-Datei, das ich erst einmal kopieren kann?

    Hängt natürlich von Layout ab, aber oft ist CSS Grid das bessere Werkzeug zum Layouten als Flexbox. Und dazu auch noch das einfachere.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar,

      ich habe gerade mal aus Unwissenheit "Grid vs Flexbox" gegoogelt, ich denke, dass ich mich Deiner Einschätzung anschließen würde. Kannst Du mir spontan sagen, ob meine favorisierte Vorlage (Design05) eher eine Grid oder eine Flexbox-Vorlage ist?

      VG Woto

      1. @@woto

        Kannst Du mir spontan sagen, ob meine favorisierte Vorlage (Design05) eher eine Grid oder eine Flexbox-Vorlage ist?

        Wenn du mir spontan zeigen kannst, wo ich deine favorisierte Vorlage (Design05) finde …

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          Wenn du mir spontan zeigen kannst, wo ich deine favorisierte Vorlage (Design05) finde …

          ich denke er redet von dieser:
          https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design05

          Bis bald!
          Bernd

          1. @@Barksalot

            https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design05

            Sieht mir sehr nach Grid aus.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hallo Gunnar,

              Sieht mir sehr nach Grid aus.

              kann ich bestätigen:
              https://src.selfhtml.org/designs/design05/css/style.css

              Bis bald!
              Bernd