01: Einführung

Willkommen im Kurs „Digitalkompetenzen“, der bis vor Kurzem noch „Webdesign“ hieß – falls ihr also „Webdesign“ noch nachholen müsst, seid ihr hier auch richtig. In diesem Kurs darf ich euch gestalterische und technische Grundlagen vermitteln, die sich vor allem auf aktuelle Front-End-Technologien (HTML, CSS, in kleinen Mengen JavaScript) und die Gestaltung interaktiver Websites konzentrieren.

Ihr werdet lernen, wie man semantisch korrekte HTML-Dokumente (Websites) erstellt und benutzergerecht gestaltet und untereinander verlinkt. Dabei schauen wir uns natürlich auch an, wie ihr multimediale Elemente einbetten und kleinere Animationen umsetzen könnt. Ich bin der festen Überzeugung, dass Praxis viel effektiver ist als Theorie. Deshalb besteht dieser Kurs aus einer guten Mischung von theoretischen Vorträgen und praktischen Übungen.

Leider ist das Feld so groß, dass wir die meisten Themen nur ansatzweise besprechen können, aber ich gebe mein Bestes, euch eine solide Grundlage für weitere Entwicklung zu geben, falls euch das Thema interessiert. Ich verstehe auch, dass „Programmieren“ und Web nicht für jeden von euch etwas sind, aber in der heutigen Zeit werdet ihr nicht darum herumkommen. Deshalb ist es gut, wenn ihr zumindest schon einmal von den Grundlagen gehört habt.

Das Web ist wunderbar, das Web ist die Zukunft – und ich hoffe, mit diesem Kurs vielleicht einige unter euch auch dafür begeistern zu können.

Wer bin ich?

Ich bin Amadeus, ein Web-Entwickler und Designer, der 2021 hier an der Hochschule München seinen zweiten Bachelor in Kommunikationsdesign gemacht hat – ich saß also vor gar nicht allzu langer Zeit dort, wo ihr jetzt auch sitzt. Meinen ersten Bachelor habe ich an der LMU in Anglistik und Informatik gemacht, aber das war mir alles ein bisschen zu theoretisch, also bin ich, statt einen Master zu machen, hier an der HM gelandet und irgendwie stecken geblieben.

Meine ersten Kurse (in Blender und fortgeschrittener Web-Entwicklung, später Webdesign) habe ich gehalten, während ich noch Studierender war, und nach meinem Abschluss habe ich nach kurzer Pause dann das Webdesignmodul für ID übernommen und bin seit diesem Semester wieder bei KD.

Wenn ich nicht unterrichte, arbeite ich als Head of Technology and Digital Design bei Flavour Kommunikation, einer Agentur hier aus München. Wir sind vor allem im Hightech- und Medizinbereich tätig und machen für unsere Kunden alles von Visitenkarten über Fotoshootings und Videodrehs bis hin zur Social-Media-Betreuung und Web-Entwicklung. Außerdem entwickle ich leidenschaftlich gerne Apps, die ihr auf meinem (schrecklich veralteten) Portfolio finden könnt – von der To-do-Liste mit Zeittracking, über ein Social Network für angehende Autor:innen, bis hin zu einem Content-Management-System ist alles mit dabei.

Erreichen könnt ihr mich jederzeit via E-Mail, Telegram oder auch auf Mastodon – ich antworte, wenn ich Zeit habe.

Kursstruktur

Aber genug von mir, in diesem Kurs geht es um euch. Wir werden uns mit den folgenden Themen beschäftigen, immer mit dem Hintergrund, dass Theorie weniger wichtig ist als Praxis:

1. Design

2. HTML

3. CSS

4. Hosting

Dabei werden wir uns die meiste Zeit mit CSS beschäftigen, weil das der für euch komplexeste Teil sein wird. Wenn aber noch Zeit und Energie zum Ende des Kurses hin übrig sind, kann ich euch gerne noch folgende Bonusthemen näher bringen:

• JavaScript

• SVG (Vektorgrafiken + Animationen)

• Content-Management-Systeme

• Statische Seitengenerierung

• Das mysteriöse „Backend“

Abgabe

Machen wir uns keine Illusionen: Wichtig ist für euch vor allem, was ihr am Ende des Kurses abgeben müsst, um ihn zu bestehen:

Um den Kurs zu bestehen, braucht ihr eine responsive, individuell gestaltete Portfolio-Website, die online erreichbar ist. Auf ihr stellt ihr euch vor, zeigt einige eurer Arbeiten und bietet eine Option zur Kontaktaufnahme.

Konkret bedeutet das, dass eure Website:

1. online erreichbar ist

2. responsiv ist

3. von euch gestaltet ist

4. mindestens einen Abschnitt über euch, eine (oder mehr) eurer Arbeiten und einen Abschnitt zur Kontaktaufnahme enthält

5. rechtliche Vorgaben erfüllt

6. eine akzeptable UX vorweist

7. von Hand geschrieben ist

8. zeitgemäßes CSS verwendet

9. alle Multimediainhalte für das Web optimiert ausspielt, d.h. Bilder sind komprimiert und auf passende Größen zugeschnitten

10. in semantisch korrektem HTML geschrieben ist

Wie das Ganze aussehen könnte, habe ich euch hier als Beispiel vorbereitet. Teil eurer Abgabe ist auch eine Zwischenpräsentation, in der ihr mir und euren Kommiliton:innen die Gestaltung eurer Website präsentiert, bevor ihr sie umsetzt.

Wenn ihr in diesem Kurs aufpasst, gut mitmacht und die Übungen bearbeitet, sollte die Abgabe kein Problem für euch sein – aber nehmt es bitte nicht auf die leichte Schulter. Webdesign und vor allem Webentwicklung sind komplexe Themen mit vielen Punkten, die aufeinander aufbauen. Von Anfang an dran bleiben und nicht prokrastinieren lohnt sich.

Deshalb habe ich euch diese Website zur Verfügung gestellt, damit ihr jederzeit auf Inhalte vergangener Unterrichtsblöcke zurückgreifen könnt. Zögert bitte auch nie, Fragen zu stellen. „Blöde“ Fragen gibt es nicht.

Um ein paar dieser Fragen vorwegzunehmen:

Wix, Squarespace, Framer und Co.

Diese Werkzeuge sind sogenannte „What you see is what you get“-Editoren, kurz WYSIWYG. Sie erlauben es euch, „Websites“ zu erstellen, indem ihr sie wie in einem Design-Tool zeichnet, und bieten oft vorgefertigte Themes und Templates an.

Leider haben diese Werkzeuge viele Probleme, mehr dazu später. Für eure Abgabe sind sie aber gänzlich ungeeignet. Bitte schreibt euren Code selbst.

Wordpress, Drupal und Co.

WordPress ist eines der bekanntesten Content-Management-Systeme der Welt und bietet ebenfalls viele Templates und ein riesiges Ökosystem an vorgefertigtem Code. Falls ihr schon fortgeschritten seid und eine WordPress-Website schreiben möchtet, ist das in Ordnung – aber nur, wenn der Code für euer Theme von euch selbst geschrieben ist!

Bitte verwendet auch hier keine WYSIWYG-Editoren / Themes wie Semplice, Elementor, etc.

SSGs, Frontend Frameworks

Static-Site-Generatoren wie Astro, Next, etc., sowie der Einsatz von Frontend-Frameworks wie Vue, React und Svelte sind in Ordnung, aber auch hier gilt, dass der Seitenquellcode für eure Abgabe hauptsächlich von euch selbst geschrieben sein muss.

Man muss ein guter Webentwickler sein, bevor man ein guter React-Entwickler sein kann, nicht andersherum.

Für Überflieger

Schickt mir bis nächste Woche Beispiele eurer bisherigen Web-Arbeiten per Mail. Wenn ich mich von euren Fähigkeiten überzeugt habe, braucht ihr nicht mehr am Unterricht teilzunehmen (außer an der Präsentation eures Designs und der finalen Abgabe).

Bitte beachtet aber, dass ich eure Abgabe dann auch nach eurem erfahreneren Kenntnisstand bewerten werde, also legt euch ins Zeug!

Ein Paar Worte zum Thema „KI“

Große Sprachmodelle sind seit ein paar Jahren in aller Munde und werden als etwas verkauft, was sie gar nicht sind: „Künstliche Intelligenz“. Mit Intelligenz haben diese Werkzeuge Produkte aber leider nicht viel gemeinsam, sie sind, grob gesagt, stochastische Papageien. Ein LLM gibt nämlich gar keine Antwort auf eure Fragen, sondern eine Antwort auf die Frage „Wie würde eine Antwort auf eure Frage klingen?“

Die Antworten eines LLMs klingen unfassbar plausibel, und wer will nicht gern weniger arbeiten? Aber um welchen Preis? Denn diese Produkte machen euch nicht den Haushalt oder erledigen den Wocheneinkauf für euch. Sie bügeln und falten auch nicht eure Kleider, sie kochen nicht für euch und sie geben auch nicht eure Päckchen in der Post ab.

LLMs schreiben Texte. Generieren Bilder, Videos, Quellcode…anstatt euch mehr Zeit für Kreativität zu geben, nehmen sie euch die Kreativität ab. Und das nicht mal besonders gut. Nur damit ihr mehr Zeit dafür habt, euer Bad zu putzen, eure Kartoffeln zu schälen und bei kaltem Wetter zum Supermarkt zu huschen, um noch schnell Lebkuchen zu kaufen.

Dabei verbrennen diese Produkte unfassbare Mengen an Energie, verbrauchen Wasser, das anderorts schmerzlich vermisst wird – und stehlen nebenbei alles Kreative, was die Menschheit jemals vollbracht hat. Wenn ihr ein Lied illegal herunterladet und erwischt werdet, drohen euch empfindliche Geldstrafen. Wenn Meta zum Training ihrer LLM-Modelle plötzlich sämtliche Bücher auf der Welt raubkopiert, ist das aber scheinbar okay.

Schaut euch an, was mit euren Lieblingsstreamingdiensten und sozialen Netzwerken passiert ist: Alles wird teurer, alles wird manipulativer, alles wird schlechter. Wie lange, bis das auch mit eurem Lieblingschatbot passiert?

Sein Abo bei Disney+ zu kündigen ist schwierig, aber möglich. Nicht mehr auf Instagram und TikTok zu scrollen, ist noch schwieriger, aber sobald ihr es nicht mehr macht, geht es euch vermutlich besser. Ohne LLM in der Arbeitswelt klarzukommen, nachdem ihr euch damit durch eure Unizeit habt tragen lassen? Das wird richtig hart.

Ihr seid hier nicht, um Aufsätze und Websites zu produzieren. Ihr seid hier, um eure Kreativität zu entfalten, um zu lernen und um euren Horizont zu erweitern. So eine Chance bekommt ihr nicht wieder, also lasst sie euch nicht von einem Werkzeug Produkt wegnehmen, das alles zu Einheitsbrei verkommen lässt.

HTML ist nicht Programmieren

HTML steht für „Hypertext Markup Language“ und dient dazu, elektronische Dokumente zu strukturieren und miteinander zu verknüpfen. HTML-Dokumente sind Textdateien, die die Struktur für die darin enthaltenen Informationen vorgeben, also zum Beispiel „hier ist ein Navigationselement, das eine Liste von Links enthält“ oder „hier ist der Hauptinhalt der Seite mit Überschrift und Absätzen“.

Neben sichtbaren Elementen, wie Überschriften, Absätzen, Bildern, etc., können HTML-Dokumente auch unsichtbare Elemente enthalten, z.B. Metadaten wie den Autor des Dokuments, eine Zusammenfassung des Inhalts, oder die verwendeten Sprachen.

Wenn ihr also ein HTML-Dokument schreibt, dann programmiert ihr nicht, sondern beschreibt darin nur die Struktur eurer Website.

WYSIWYG Editoren

Anfangs mag das Schreiben von HTML-Dokumenten nicht besonders intuitiv wirken, besonders, wenn man noch lernt, welche Strukturelemente es gibt oder was einen Absatz von einem Block vorformatiertem Text unterscheidet. Für viele Menschen mit Gestaltungshintergrund ist es außerdem schwer, nur anhand von Text zu visualisieren, wie sich die Struktur einer Seite auf ihre Gestaltung auswirken kann.

Deshalb kommen viele Menschen schnell in Versuchung, ein „visuelles“ Werkzeug zum Erstellen von Websites zu verwenden, nämlich die zuvor schon erwähnten „What you see is what you get“-Editoren. Leider ist das ein Trugschluss, mit dem man sich schnell in eine Falle begibt, denn diese Werkzeuge haben einige Nachteile:

Abhängigkeit

Ihr macht euch von einer einzigen Firma abhängig, denn die Websites, die ihr mit ihrem Werkzeug erstellt, könnt ihr oft nicht zu einem anderen Anbieter mitnehmen. Deshalb seid ihr unausweichlichen Preiserhöhungen und fragwürdigen Datenschutzpraktiken völlig ausgeliefert.

Kontrollverlust

Ihr gebt ein hohes Maß an Kontrolle und Freiheit auf. Anstatt alles exakt so umsetzen zu können, wie ihr es möchtet, seid ihr plötzlich an vorgefertigte Module, willkürlich erscheinende Einschränkungen und die generellen Eigenheiten des Systems gebunden. Gerade als Designer oder Designerin mündet das schnell in einen niemals enden wollenden Kampf gegen „das System“ eures Anbieters, der nur Zeit und Nerven kostet.

Schlechtere Ergebnisse

Der Quellcode, den diese Werkzeuge produzieren, ist oft alles andere als optimal. Das führt zu schlechterer Benutzbarkeit, seltsamen Fehlern und langen Ladezeiten – alles Dinge, die dazu führen, dass eure Website in Suchergebnissen weniger hoch platziert wird.

Abkürzungen, die keine sind

Und zu guter Letzt kennen wir wahrscheinlich alle die Situation, in der jemand eine „Abkürzung“ kennt und man plötzlich doppelt so lang braucht, um an seinem Ziel anzukommen. WYSIWYG-Editoren sind solche Abkürzungen, die gar keine sind.

Ihr lernt ein Werkzeug eines einzelnen Anbieters, nicht die grundlegenden Prinzipien, die ihr überall verwenden könntet. Die geschlossenen Systeme der Werkzeuge zwingen euch, Umwege zu gehen, um eure gestalterischen Ziele zu erreichen.

Mit einem WYSIWYG-Editor erhaltet ihr womöglich schneller ein oberflächlich „schönes“ Produkt, aber früher oder später werdet ihr an Grenzen stoßen. Dieser anfängliche Zeitgewinn wird dann dadurch zunichtegemacht, dass ihr mit eigenem Quellcode wieder von vorne beginnen, oder einen Experten dafür bezahlen müsst.

Code ist die bessere Wahl!

Wenn ihr den Quellcode eurer Website selbst schreibt, entwickelt ihr ein intuitives Verständnis dafür, wie er funktioniert und wie die einzelnen Elemente eurer Seite miteinander zusammenhängen. Ihr erhaltet volle Kontrolle über Aussehen, Geschwindigkeit, Interaktivität, Animation, Inhalt und Datenverarbeitung eurer Website.

Ihr bleibt völlig unabhängig – eure Website ist Text in einem Dokument, und wenn euer Hostinganbieter seine Preise erhöht, könnt ihr dieses Dokument einfach nehmen und bei einem anderen Anbieter hochladen.

Die Grenzen der WYSIWYG-Anbieter existieren nicht mehr, ihr könnt eurer Kreativität freien Lauf lassen – und weil ihr die grundlegenden Prinzipien der Webentwicklung kennenlernt, wird euch in Zukunft niemand mehr mit einem „Das ist technisch nicht möglich“ abspeisen können.

HTML ist erst der Anfang. Zusammen mit CSS und JavaScript lernt ihr alles, was man braucht, um nicht nur Websites, sondern auch Apps und sogar Roboter zu programmieren.

Wenn ihr Code beherrscht, gibt es nichts, was ihr nicht umsetzen könnt.

Okay, aber wie funktioniert das alles?

Das Internet ist ein globales Netzwerk aus verbundenen Computern – den Servern. Auf diesen Computern läuft verschiedene Software, eine davon ist dafür verantwortlich, bestimmte Daten, meist Bilder und Text, auf Anfrage zurückzugeben. Diese Art der Software bezeichnet man auch als Webserver.

1989 begründete Sir Tim Berners-Lee vom CERN das World Wide Web, ein über das Internet abrufbares Netzwerk aus untereinander verknüpften Hypertext-Dokumenten. Das „Hyper“ bezieht sich darauf, dass diese Dokumente mehr sind als eine Publikation in einem Buch, da sie durch (Hyper-)Links frei miteinander zu komplexen Netzen verbunden werden können. Anders als andere Konzepte zu der damaligen Zeit, war das World Wide Web über freie Protokolle (HTTP und später HTTPS) für jeden zugänglich, ohne durch Lizenzen beschränkt zu sein.

Während Server Daten ausliefern, fragen Clients die Daten an und verarbeiten sie. Ein Client ist im World Wide Web dabei oftmals ein Webbrowser, der dafür verantwortlich ist, ein HTML-Dokument anzuzeigen und bei einem Klick auf einen Link ein neues Dokument anzufragen. Dadurch entsteht ein Kreislauf, in dem ein Client ein bestimmtes Dokument, z.B. „about.html“ anfrägt, der Server dieses Dokument ausliefert, und der Browser das Dokument darstellt, bis der Client ein neues Dokument anfrägt.

Das Web ist die Zukunft

Zu sagen, das WWW hätte die Welt verändert, wäre eine Untertreibung. Durch das Web habt ihr Zugriff auf beinahe die gesamte Information der Menschheit. Das Web ist frei und autoritäre Staaten müssen große Hürden überwinden, um den Zugriff auf das Web einzuschränken.

In seinem Kern ist das Web sogar dezentral, da alle Websites letztlich einfach Textdokumente auf einem Server sind, können sie jederzeit verschoben und von einem anderen Server aus zugänglich gemacht werden. Kein einzelnes Unternehmen dieser Welt kann das Web kontrollieren – auch wenn leider immer mehr Unternehmen genau das versuchen.

Euer Instagram-Profil kann gebannt werden, weil jemandem nicht gefällt, wie viel Haut ihr zeigt. Euer YouTube-Kanal kann euch weggenommen werden, weil ein Unternehmen beschließt, dass eure Videos zu politisch sind. Eure eigene Website ist euer Reich. Solange ihr nicht gegen Gesetze verstoßt, könnt ihr darauf machen, was ihr wollt – unabhängig von der politischen Lage und den gesellschaftlichen Wankungen der Welt.

Apple und Google haben ein Monopol auf den Vertrieb von Smartphone-Apps. Wenn ihr eine App für Android oder iOS in den jeweiligen App-Stores veröffentlichen möchtet, entscheiden diese Firmen, ob ihr das dürft – und lassen sich das bezahlen. Gerade bei Apple warten Entwicklerinnen und Entwickler teilweise wochenlang darauf, dass die Updates für ihre Apps von den Moderationsteams überprüft werden, bevor sie es an ihre User ausliefern können. Und eines der Unternehmen kann jederzeit entscheiden, eure App aus dem Store zu schmeißen, ohne, dass ihr etwas dagegen unternehmen könnt.

Deshalb gibt es eine immer größere Zahl an progressiven Web-Apps (PWAs), die wie eine Website ausgeliefert, aber wie eine App auf euren Geräten installiert werden können – an den gängigen Vertriebssystemen vorbei und unabhängig davon, welches Betriebssystem installiert ist. Eine Web-App ist von Haus aus plattformunabhängig, denn das Web ist überall. Von eurem Laptop über euer Smartphone, bis hin zum „intelligenten“ Kühlschrank. Nur einen Link entfernt.

Fast alles passiert heutzutage im Web, vom Banking über E-Mails bis hin zum Doomscrollen. Oft merkt man gar nicht, dass man gerade eine App verwendet, die mit Webtechnologien gebaut ist. Spotify, Netflix, Figma, WhatsApp Desktop, Hyper, Obsidian, VS Code, … – die Liste ist unendlich lang.

Leider ist die Zukunft des Webs dank des raschen Fortschritts der großen Sprachmodelle ungewiss – aber ich halte daran fest, dass das Web die Zukunft ist, in welcher Form auch immer.

Einige Ressourcen, weil man nie auslernt

Weil das Web so viel kann, ist es natürlich auch dementsprechend komplex – es gibt unzählige Wege, um zum selben Ziel zu kommen. Ich lerne selbst nach über zehn Jahren Entwicklertätigkeit noch immer Neues. Passt auf, dass ihr euch nicht überwältigen lasst von der schieren Menge an Informationen, gerade jetzt am Anfang.

Eure erste Anlaufstelle sollte dieser Kurs und die damit verbundenen Materialien sein. Wenn ihr aber mehr über etwas Spezifisches lernen möchtet, schaut gerne auf diesen Seiten vorbei und sucht danach. Ganze Artikel, Tutorials und News zum Thema Web würde ich euch erst empfehlen, wenn ihr in ein paar Wochen solide Grundkenntnisse erworben habt.

1. Mozilla Developer Network (MDN){ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

2. Web.dev{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

3. CSS-Tricks{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

4. Rachel Andrew{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

5. UX Planet{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

6. Dev.to{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

Unsere Werkzeuge für diesen Kurs

Die Erstellung einer Website gliedert sich im Großen und Ganzen in zwei Hälften: die Gestaltung und die Entwicklung. Für beides gibt es viele verschiedene Werkzeuge, ich stelle euch hier ein paar vor – falls ihr aber schon eure persönlichen Lieblinge ausgesucht habt, verwendet ruhig die.

Gestaltung

Für die Gestaltung lässt sich prinzipiell jede Art von Gestaltungssoftware verwenden – man kann sogar ganz altmodisch mit Stift und Papier starten. Manche Werkzeuge erleichtern einem die Arbeit aber doch sehr, ganz besonders sogenannte Screendesign-Tools. Als Industriestandard hat sich inzwischen Figma durchgesetzt, aber ich möchte euch auch Penpot ans Herz legen. Das ist eine quelloffene Alternative, die noch nicht 100% auf dem Stand von Figma ist, aber immer weiter aufholt.

Besonders hervorheben möchte ich bei diesen Werkzeugen die „Auto-Layout“ Funktionen, denn diese geben euch einen Eindruck davon, wie anders Gestaltung im Web funktioniert. Anstatt von Hand Elemente an die richtigen Positionen zu setzen, wird die Position von Elementen im Web in den meisten fällen passiv durch die Eigenschaften der umgebenden Elemente bestimmt.

Wichtige Frame-Größen für das Gestalten in Figma:

• 1440px (oder 1920px) in der Breite für die Desktop-Version eurer Website

• 320px in der Breite für die Mobile-Version. Dies entspricht der gesetzlich vorgeschriebenen Mindestgröße bei 1280px Breite und 400% Vergrößerung, sowie den kleinsten gängigen Smartphone-Displays, siehe auch Informationen der WCAG{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }

• Weitere Größen (und später Umbruchpunkte, bzw. Breakpoints) ergeben sich aus eurem Layout, z.B 1024px in der Breite für ein kleines Laptop oder großes Tablet

Beschäftigt euch auch gerne mit dem Raster-System („Layout Grids“) in Figma. Typischerweise verwendet man im Web auf Desktopgrößen ein 12-spaltiges Raster, da man damit sowohl 2, 3, und 4 Spalten gut darstellen kann. Auf kleineren Bildschirmen kann man dann gut auf 8, 6 und 4 Spalten reduzieren.

Entwicklung

Die Wahl eines Code-Editors ist eine sehr persönliche. Als Entwicklerin oder Entwickler verbringt man dort sehr viel Zeit und passt ihn gewöhnlich auch sehr an die eigenen Bedürfnisse an. Als mein Lieblingseditor, Atom, abgeschaltet wurde, war ich tatsächlich ein wenig traurig.

Auch bei diesem Werkzeug gibt es einen de-facto-Standard: Visual Studio Code{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" } von Microsoft. Ich persönlich finde den Editor aber gerade für den Anfang viel zu kompliziert und überladen, von Datenschutzbedenken einmal abgesehen. Deshalb verwende ich Zed. Dieser Editor ist deutlich schlanker und dadurch auch schneller.

Wer sich für einen Mittelweg entscheidet, kann auch VS Codium{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" } verwenden. Das ist eine Version von Visual Studio Code, bei der die gesamten Microsoft-spezifischen Features und das Tracking entfernt wurden.

Quadrants

Damit ihr euch gerade am Anfang des Kurses noch nicht mit der Installation und Konfiguration eines Code-Editors herumschlagen müsst, habe ich euch ein Tool entworfen, mit dem ihr ohne das Drumherum eure ersten Schritte in HTML und CSS machen könnt. Dieses Werkzeug werden wir auch für Code-Beispiele im Kurs und hier im Skript verwenden, damit ihr sie direkt ausprobieren könnt. Ich hoffe, das kann euch die teilweise sehr abstrakten Konzepte etwas greifbarer machen.

Quadrants öffnen

Praxis

Bitte macht euch mit Figma (oder eurem Screendesign-Tool der Wahl) vertraut, indem ihr verschiedene Websites, die euch gefallen, sammelt und daraus ein Moodboard für die Gestaltung eurer eigenen Portfolio-Website erstellt.

Ihr könnt Screenshots ganzer Websites verwenden, aber auch nur Elemente wie die Gestaltung des Menüs, verschiedene Farbinspirationen, oder den Einsatz von Typografie. Schaut euch an, wie Links gehandhabt werden, ob ihr Muster in der Anordnung von grafischen Elementen entdecken könnt, und wie Websites unterschiedlich wirken, wenn man sie in ihrer Gänze, oder nur im Ausschnitt des Bildschirms betrachtet. Es bietet sich auch immer an, das Browserfenster in verschiedene Größen zu ziehen, um sich inspirieren zu lassen, wie Websites sich auf unterschiedlichen Bildschirmgrößen verhalten.

Bitte stellt dieses Moodboard bis nächste Woche fertig und haltet einen Screenshot eurer Lieblingswebsite für die nächste Praxisaufgabe bereit.