Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Marksheet: Ausgesprochen hübsche Tutorials zu HTML, CSS und Sass

    Marksheet: Ausgesprochen hübsche Tutorials zu HTML, CSS und Sass

(Bild: Pixabay)

Marksheet ist eine kostenlose Tutorialsammlung zu den Themen HTML, CSS und Sass, mit einem kleinen Abstecher zu grundlegenden Webtechnologien wie HTTP. MarkSheet ist gestalterisch auf der Höhe der Zeit und bildet so einen auffallend hübschen Gegenpol zu den sonst üblichen drögen Lernmaterialien im Weltennetz.

MarkSheet: Der Page-Generator Jekyll liefert den Motor für das Projekt

Jeremy Thomas aus dem französischen Bordeaux ist Designer mit Leib und Seele. Er bezeichnet sich selbst gar als CSS-Guru. Da verwundert es nicht, dass der Anteil an CSS-Tutorials in Marksheet höher ist als der aller anderen Themen zusammen. Das Projekt Marksheet ist Jeremys Dank an die Gemeinschaft der Webentwickler. Es ist daher grundsätzlich frei und auch auf Dauer kostenlos unter der Lizenz CC BY-NC-SA 4.0 verwendbar.

Marksheet: Schon die Landing Page zeigt, dass es ein Designer-Projekt ist. (Screenshot: t3n)
Marksheet: Schon die Landing Page zeigt, dass es ein Designer-Projekt ist. (Screenshot: t3n)

Technisch stellt Jekyll die Basis für Marksheet. Jekyll ist der Generator für statische Webpages, der auch die Github-Pages-Plattform antreibt. Jekyll mischt Text und Design zusammen und generiert daraus eine publikationsfertige Website. So lässt sich der Inhalt perfekt vom Aussehen trennen. Der Inhaltelieferant schreibt seine Texte etwa im simplen Markdown-Format, Jekyll kümmert sich um den Rest. Das Projekt steht unter der liberalen MIT-Lizenz und kann für private und kommerzielle Zwecke kostenfrei verwendet werden.

Marksheet ist lediglich eines der Side-Projekte, die Jeremy neben seiner hauptberuflichen Tätigkeit am SpatialOS betreibt. Du hast vielleicht schon mal von Bulma gehört. Bulma ist ebenfalls von Jeremy und stellt ein CSS-Framework dar, das auf CSS Flexbox aufsetzt und dabei stark an Bootstrap erinnert. Bulma haben wir hier bei t3n schon mal kurz vorgestellt.

Marksheet: Gute Lernmaterialien, die auch noch gut aussehen

Optisch ist Marksheet eine Perle. Selbst Menschen, die HTML, CSS oder Sass nur lernen müssen, ohne den rechten Antrieb in sich zu finden, werden sich der Schönheit der Darstellung nicht entziehen können. So wird dem Lernen wenigstens ein bisschen der Schrecken genommen. Umso mehr werden sich die Design-Ästheten freuen, die noch Spaß am Lernen haben.

Marksheet wirkt schon fast spielerisch. Das Design ist sehr nah an gängiger App-Gestaltung und in der Tat ist Marksheet auch auf mobilen Geräten uneingeschränkt nutzbar - fast finde ich es dort sogar noch ein bisschen schöner. Inhaltlich liefert Jeremy Thomas kurze Tutorials zu den heutzutage wichtigsten Anwendungsfällen moderner Web-Standards. Alle Anleitung liegen in verständlicher, aber natürlich englischer Sprache vor. An Quelltext-Beispielen wird nicht gespart.

MarkSheet: Ausschnitt aus den Erläuterungen zu CSS Display. (Screenshot: t3n)
Marksheet: Ausschnitt aus den Erläuterungen zu CSS Display. (Screenshot: t3n)

Marksheet ist generell für das lineare Durcharbeiten gedacht. Du kannst aber natürlich gezielt einzelne Wissenshappen, die dich besonders interessieren, ansteuern. Die Einzelthemen sind über gut sichtbare Anker verlinkbar, was das Zitieren in eigenen Beiträgen sehr einfach macht. Willst du etwa Erläuterungen zu display: inline verlinken, dann machst du das so.

Über das reine Erklären hinaus, streut Jeremy immer wieder Empfehlungen und Warnungen aus seiner eigenen Erfahrung ein. So merkt der geneigte Leser, dass hier jemand wirklich weiß, wovon er spricht.

MarkSheet: Die Übersicht der HTML-Tutorials. (Screenshot: t3n)
Marksheet: Die Übersicht der HTML-Tutorials. (Screenshot: t3n)

Marksheet ist als vollständiger Kurs angelegt. So beginnt man chronologisch richtig mit Erläuterungen zum Internet an sich. Drei Lektionen umfasst der Grundlagenteil zum Web. HTML5 wird hinsichtlich seiner Basics mit immerhin 13 Lektionen abgedeckt, CSS3 bringt es auf 29 Lektionen. Zum Ende der Tutorialsammlung greift Jeremy Thomas noch mit fünf Lektionen das Thema Sass auf. Neben der Antwort auf die Frage nach dem Warum behandelt er die gängigsten Vorteile gegenüber purem CSS und vermittelt auch hier saubere Grundlagen.

Marksheet sollte in keiner Werkzeugsammlung moderner Webdesigner und -entwickler fehlen. Nachdem der Bookmark nicht einmal was kostet, fällt mir kein Grund ein, warum du ihn nicht setzen solltest.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden
Alle Jobs
Zur Startseite
Zur Startseite