6 — Let’s Platform!

Hier ein neues zip-Bundle mit der 11ty-Grundstruktur inklusive der berüchtigten .eleventy.js-Datei. Und der einstündige Walkthrough durchs eigentlich nur 6-minütige Tutorial.

Hinweis: Wenn ihr ein neues Repository für euer Semesterprojekt erstellt, muss es wie folgt heißen: [username].github.io, euer lokaler Order (also der auf eurer Festplatte) muss _site heißen und in eurer 11ty-Struktur liegen. Wenn alles richtig konfiguriert ist, baut 11ty euch eure Seite direkt ins Repository, sodass über Commit und Push veröffentlicht werden kann.

Außerdem: Hier noch ein sehr ausführliches Tutorial in dem noch langsamer als in meinem vorgeturnt und am Ende auch noch ein richtiges CMS (Content-Management-System – ab Minute 59, alles davor haben wir schon mehr oder weniger gemacht) eingebunden wird. (Damit können andere dann so richtig uploaden) Ich bin damit noch nicht ganz durch, aber wer will, kann sich das ja über die Feiertage anschauen.

---

→Alle 19 Ergebnisse:

5 — Online

In dieser Aufgabe wollen wir (endlich) online gehen.

1. Lade dir dafür dieses →Bundle herunter und entpacke die Zip-Datei.

2. Folge dieser →Anleitung, um dein Repository über Github zu hosten.

3. Lege das Bundle in euren lokalen Ordner, der mit Github Desktop verknüpft ist.

4. Verlinke deine Ergebnisse aus den ersten vier Aufgaben mit dem <img>Tag in den <div>Boxen mit der Klasse .item und nutze CSS Flex und Grid, um ein passendes Layout zu entwickeln.

5. Erstelle eine Markdown Datei mit dem Link zu deiner Website https://[username].github.io/[ggf-hier-euer-Repository] und lade die Datei →hier hoch.

---

→Alle 19 Ergebnisse:

4 — Oups I GRID it again

1. In dieser Aufgabe lernen wir CSS Grid kennen. Ähnlich wie in der letzten Runde gibt es ein →Tutorial, ein →Spiel und ein →Codepen.

   Ab hier Hausaufgabe:

2. Schau dieses →Tutorial, erstelle dir einen Account auf →Github, lade →Github Desktop herunter und verbinde es mit deinem Account.

3. Lade deine Ergebnisse aus Aufgabe 4 und auch alle anderen Ergebnisse auf Github hoch. Am besten legst du dafür einen Ordner an, der submissions oder ähnlich heißt.
   Wichtig: Das Repository muss öffentlich sein!

4. Erstelle einen direkten Link zum Bild auf Github per Rechtsclick aufs Bild → Grafikadresse kopieren und schreibe eine Markdown-Datei, in der du das Bild einbindest. Kein iFrame – ein Bild in Markdown geht so: ![alternativer Text](Link zum Bild)

5. Lade die Markdown-Datei →hier hoch.

---

→Alle 19 Ergebnisse:

3 — Weird Flex but Ok

1. Schau dir zunächst dieses →Tutorial an und spiele ein paar Level →Flexbox Froggy.
2. Probiere dann CSS Flex im neuen →Codepen aus. Der ganze Text ist in einer div-box mit der Klasse .ganzertext und jeweils in Abschnitten mit Headline und dazugehörigem Abschnitt .textblock zusammengefasst. Teste die verschiedenen Möglichkeiten der Positionierung mit CSS Flex. Speichere verschiedene Varianten bei Codepen und lade die Screenshots hier hoch.
3. Sammle deine Ergebnisse per Screenshot (JPG oder PNG) und lade sie hier hoch.
4. Erstellt Markdown-Dateien von euren Entwürfen wie in 2 — Play the CSSystem und ladet die Dateien →hier hoch.

---

→Alle 18 Ergebnisse:

2 — Play the CSSystem

1. Erstellt euch auf →Codepen einen eigenen Account. In dieser Aufgabe erwartet euch ein ähnliches Setup wie in der letzten Aufgabe. Neu ist, dass wir nicht mehr in InDesign und einem festen Format, sondern mit HTML und CSS für ein (bewegliches) Browserfenster gestalten.

2. Macht euch in der Codepen-Vorlage mit der neuen Struktur aus HTML-Tags, CSS-Klassen, Elementen usw vertraut, probiert rum, baut eure Ergebnisse aus der letzten Aufgabe mach (oder versucht es) und zieht am Browserfenster.

3. Sammelt eure Ergebnisse per Screenshot Shift+Command+4 und lade sie hier hoch.

4. Wenn ihr ein PDF hochgeladen habt: Klickt oben rechts auf den Button Freigeben und kopiert den Link. Der Link wird auf /view?usp=share enden. Ändert das in /preview . Kopiert diesen Link in eine Markdown-Datei (endet immer mit .md) mit dem Frontmatter:

   ---
   author: "[dein Name]"
   ---
   

   und folgendem iFrame-Tag:

   <iframe class="pdf" src="[euer Link aus GoogleDrive]"></iframe>
   

   wenn ihr ein PNG oder JPEG hochgeladen habt, geht ihr genauso vor jedoch hat euer iFrame-Element eine andere Klasse:

   <iframe class="image" src="[euer Link aus GoogleDrive]"></iframe>
   

   und ihr nutzt möglicherweise mehrere iFrame-Elemente, weil ihr pro Bild ein Element und nicht wie beim PDF mehrere Seiten in einem Element habt.

5. Vergesst nicht, euer Codepen zu speichern und den Link der Markdown-Datei (nach oben, aber nicht übers Frontmatter) hinzuzufügen!

6. Bitte ladet die Markdown-Datei →hier hoch.

---

→Alle 22 Ergebnisse:

1 — Coding As A Playground

In der ersten Aufgabe starten wir mit einem Plakat im Format A2.

1. Lade dafür diese →Vorlage herunter und öffne Sie in Indesign. Der gesamte Text liegt hier in einem Rahmen, welcher nicht verändert werden darf.
2. Öffne das Fenster Absatzformate, ziehe es groß und öffne alle Gruppen, sodass du alle Formate sehen kannst. Die Formate sind zunächst in die Schriftgrößen S M L und XL gruppiert und jeweils in 1-, 2- oder 4-spaltig eingeteilt. Möglich ist außerdem das Strukturieren des Textes durch Spaltenumbrüche Schrift → Umbruchzeichen einfügen → Spaltenumbruch.

Ziel der Übung ist, den Text ausschließlich über das Zuweisen von Absatzformaten zu gestalten — Viel Spaß!

3. Lade deine Ergebnisse als pdf hier hoch.

---

→ Alle 18 Ergebnisse:

0.5 — Links

1. Absolviere alle 10 Schritte → dieses Tutorials, um dich mit Markdown vertraut zu machen.

2. Erstelle eine Markdown-Datei die einen Link zu einer Website enthält, die du gut gestaltet (gute Typo/gutes Layout) findest. Die Datei soll folgendes Frontmatter enthalten:

---
category: "reference"
added_by: "[dein Name]"
---

3. Lade die Datei → hier hoch.

---

Eure 26 Recherche-Ergebnisse:

0 — A Catalogue Of One Thing

1. Think of something. One thing. A thing of which there might be many versions, many instances, many models, many sizes, many somethings. For example.
2. Find a website, where this thing is a category.
3. Think of a Title for that category. Maybe a new one. Maybe not.

or

1. Find a website, where a thing is a category.
2. Think about it. The thing. A thing of which there might be many versions, many instances, many models, many sizes, many somethings. For example.
3. Think of a Title for that category. Maybe a new one. Maybe not.

or

1. Think of a Title for a category. Maybe a new one. Maybe not.
2. Find a website, with this category.
3. Think about it. The things in the category. Things of which there might be many versions, many instances, many models, many sizes, many somethings. For example.

or alike.

And then: Scrape it →Tutorial
And then: Upload your catalog →here.
And then: Good luck.

Thank you for engaging!

---

→ See all 35 Submissions