Zum Hauptinhalt springen
frustfrei.dev

Websites frustfrei umsetzen mit HTML, CSS und UX

Lerne, wie aus einem Design robuste Frontends werden: mit UX-Fokus, sauberem HTML/CSS und praxiserprobten Methoden von frustfrei.dev.
David hat seine Website umbenannt von HAWK GT1191 in frustfrei.dev.

Aus der studienbegleitenden Website HAWK GT1191 ist frustfrei.dev geworden. Alles ist gleich geblieben – nur der Name hat sich geändert. Wir haben die Inhalte überarbeitet, die Tutorials aktualisiert und die Website aufgeräumt. Aber das Wichtigste: Wir haben uns auf das Wesentliche konzentriert: HTML, CSS und UX.

Warum die Basics den Unterschied machen

Auch mit KI-Tools wie ChatGPT, Claude oder Copilot basieren Websites auf denselben drei Sprachen: HTML für Struktur, CSS für Gestaltung, JavaScript für Interaktion. Wer sie versteht, baut robuster, schneller und zugänglicher – und weiß, wie man KI gezielt einsetzt. Also, warum geht’s hier?

HTML

HTML1 ist die Auszeichnungssprache, mit der Struktur und Inhalt einer Webseite aufgebaut werden – von Überschriften über Links bis hin zu Bildern und Formularen.

index.html
<h1>Das ist ein HTML-Element</h1>
Ein h1-Element markiert die wichtigste Überschrift auf der Seite und gibt ihr gleichzeitig eine Bedeutung – für Browser, Suchmaschinen und Screenreader.

Du möchtest HTML lernen?

Einstieg in HTML

CSS

CSS2 ist eine Sprache, die verwendet wird, um das Aussehen einer Webseite zu definieren. Mit CSS können Farben, Schriftarten, Layouts und andere visuelle Aspekte einer Webseite angepasst werden.

h1 {
  color: red;
}
Eine CSS-Regel besteht aus Selektor und Deklaration: Welches Element soll wie aussehen? Dieses Beispiel färbt alle h1-Elemente rot.
Einstieg in CSS

JavaScript

JavaScript ist eine Skriptsprache, die verwendet wird, um die Funktionalität einer Webseite zu erweitern. Mit ihr können dynamische Inhalte, interaktive Elemente und Benutzerinteraktionen erstellt werden.

const button = document.querySelector('button')


button.addEventListener('click', () => {
  alert('Du hast den Button geklickt!')
})
Ein EventListener wartet auf Nutzeraktionen. Hier öffnet ein Klick auf den Button eine Meldung – JavaScript reagiert auf das, was Nutzerinnen und Nutzer tun.

Fußnoten

  1. HTML steht für HyperText Markup Language und ist eine Auszeichnungssprache, die verwendet wird, um Webseiten zu erstellen. HTML-Dokumente bestehen aus einer Folge von Tags, die die Struktur und den Inhalt einer Webseite beschreiben. ↩

  2. CSS ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen einer Website zu definieren. Sie definiert die Farben, Schriftarten, Layouts und andere visuelle Aspekte einer Website. ↩