Web (HTML, CSS & JS)

Wenn man über Webentwicklung redet, unterscheidet man meist zwischen dem Frontend und dem Backend. Das Frontend meint häufig die Webseite, die man im Browser öffnet: Wie sie aussieht, wie sie strukturiert ist und was passieren soll, wenn man auf einen Button klickt. Das Backend meint hingegen meist den Server, der “hinter” der Webseite steht und sich um die Logik und Daten, mit denen interagiert werden soll, kümmert. Als Beispiel, ein Login-Prozess vereinfacht dargestellt:

  • Das Frontend ist dafür verantwortlich, eine hübsche Login-Seite mit einem Email- und Passwortfeld anzuzeigen.
  • Sobald man auf den “Login”-Button klickt, kümmert sich das Backend um den eingegangen HTTP-Request und prüft in einer Datenbank, ob Email und Passwort übereinstimmen.

Im Frontend ist man gezwungen, mindestens HTML (+ CSS und evtl. JS) zu benutzen, weil so das World Wide Web “erfunden wurde” und alle Browser ein HTML-Dokument erwarten. Das Backend hingegen kann in vielen verschiedenen Programmiersprachen geschrieben werden.

Dieser Kurs hat den Fokus auf das Frontend. Er dient auch als Ergänzung für die Leute, die Lust auf ein Web-Projekt haben und parallel die Python oder Java Kurse machen, in denen das Backend realisiert werden kann/möchte1.

Pflichtmaterialien

Mozilla bietet mit ihren MDN Web Docs eine sehr ausführliche und hochwertige Sammlung von Materialien rund um die Webentwicklung an. Dieser MDN Guide Getting started with the web ist ein guter Anfang, um einen Einstieg in die Basics zu bekommen. Weitere Lektionen gehen dann tiefer in HTML, CSS und JavaScript. Es lohnt sich, alle Lektionen auf MDN einmal anzuschauen. Wir haben im Folgenden noch ein paar weitere Hinweise zu den einzelnen Themengebieten.

Einstieg

Wie funktioniert das Internet? Warum braucht man eigentlich HTML und CSS und JavaScript? Woher weiß mein Browser, dass google.de auf Google zeigt und tu-berlin.de auf die Homepage meiner Uni? Warum funktioniert meine hallo_welt.html “Webseite” nur auf dem PC, auf dem ich sie erstellt habe?

Getting started with the web

HTML

Grundlegend notwendig für die Webentwicklung.

HTML Kurs

CSS

Damit deine Webseite hübsch aussieht. Wie CSS funktioniert, ist wichtig zu wissen. Damit man aber nicht immer das Rad neu erfinden muss, gibt es viele CSS-Bibliotheken, die bereits fertig-gestylte Komponenten wie Buttons und Textfelder bereitstellen. Eine Auswahl dieser Bibliotheken für dein Projekt findest du in Bausteine.

CSS Kurs

JavaScript

Eine vollständige JavaScript-Umgebung läuft schon in deinem Browser. Drücke einfach F12 in Firefox, Chrome, o.Ä., und wechsle zum “Konsole”-Tab. Dort kannst du mit JavaScript experimentieren.

Sobald du JavaScript auch außerhalb eines Browsers laufen lassen willst, zum Beispiel lokal auf deinem Rechner, musst du eine Laufumgebung installieren:

  • NodeJS de-facto Standard
  • Deno neu & cool
  • Bun noch neuer & cooler

JavaScript Kurs

Projektideen

Webapp: Backend in Python/Java/JavaScript + Frontend

Vor allen möglichen Sachen (also bspw. Programme, die erstmal nur auf der Kommandozeile laufen) kann man eine Webseite (Frontend) bauen und somit diese Funktion mit anderen Leuten teilen und auch auf User-Input reagieren.

Siehe Inspirationen, insbesondere “todo.txt file format” und “Web-APIs wie transport.rest”, und Python Bausteine.

Eigene Portfolio/Blog/About-Me/Lebenslauf-Website

Fokus: Design, HTML, CSS

Kleine statische Website, die ein bisschen was zu dir sagt: ein eigener Blog, was für Programmier-Projekte du schon gemeistert hast, …

Kleines Spiel im Browser

Fokus: JavaScript

Bausteine für Projekte

CSS-Bibliotheken

Bei den genannten Bibliotheken reicht es meistens, ein <link rel="stylesheet" ... in den Anfang des HTML-Dokumentes zu kopieren. Dann musst du dich nicht mit npm, bower, und anderen Build- und Kompilierschritten rumquälen, die andere, komplexere Bibliotheken brauchen.

React und Co.

Es lohnt sich vorher Trends in der Webentwicklung ab 2010 zu lesen.

Du solltest dich im Verwenden von HTML, CSS und vor allem JavaScript sicher fühlen. Idealerweise solltest du bereits eigenständige Projekte mit “Vanilla”-JavaScript, also ohne dem Verwenden von einem der Frameworks wie React, Vue, Svelte oder Angular, abgeschlossen haben.

Die folgenden Materialien sind nicht für Anfänger*innen geeignet.

React Curriculum für Studis mit fortgeschrittenen JavaScript-Kenntnissen

  1. Client-side web development tools
  2. Understanding client-side JavaScript frameworks
    • Warum sind React und Co. entstanden?
  3. Learn React
  4. (Optional) Für ein React-Framework entscheiden

Fußnoten

  1. Heutzutage wird (evtl. soger öfter) auch in JavaScript das Backend geschrieben, damit man in Front- und Backend die gleiche Sprache hat. Siehe Trends in der Webentwicklung ab 2010 und ExpressJS ↩

Inhalt