The artwork is the residue of a process, of a project, rather than something that you see and then have to realize thereafter.

David Shrigley (Künstler), 2016

P R A X I S

Projekt anlegen

Ordner „javascript-6“ kopieren, in „javascript-7“ umbenennen und in VS Code öffnen
Datei „index.html“ im Chrome-Browser öffnen

Responsive Design

Die Objekte in der Übersicht abhängig von der Fenstergröße größer oder kleiner machen.

<div id="sammlung">
  <div class="objekt snacks">
    <img src="media/zuckerl.png" alt="Eine Packung Halszuckerl">
    <h2>Zuckerl</h2>
  </div>

  <div class="objekt gruen">
    <img src="media/flasche.jpg" alt="Trinki">
    <h2>Wasser</h2>
  </div>
</div>

HTML

#sammlung .objekt {
  width: 20%;
  text-align: center;
  transition: all ease-in-out 500ms;
}

@media (max-width: 768px) {
  #sammlung .objekt {
    width: 40%;
  }
}

CSS

Light und Dark Mode

Das Design der Website den visuellen Präferenzen des Betriebssystems anpassen.

body {
  background-color: #f0fff0;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: indigo;
    color: ivory;
  }
}

CSS

Theme

Dokument um Farbschema und Icon ergänzen.

<html lang="de">
  <head>
    …
    <meta name="theme-color" content="#ff69b4">
    <link href="media/favicon.png" rel="icon"> // 192x192px
  </head>
  <body>
    …
  </body>
</html>

HTML

Beschreibung

Dokument um erklärendes Snippet ergänzen. Suchmaschinen, Social Media und Messenger zeigen diese Information meistens neben dem Titel und dem Link an.

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine erste Website</title>
    <meta name="description" content="Some Things In My Bag!">

    <meta property="og:title" content="Ur cooler Spezialtitel für Social Media">
    <meta property="og:description" content="Wer das liest ist schön.">
    <meta property="og:image" content="media/website-thumbnail.jpg">
  </head>
  <body>
    …
  </body>
</html>

HTML

Drag & Drop

Ein Element frei auf der Website verschiebbar machen.

<div id="overlay">
  <button id="overlay-button">💖</button>
  <p id="overlay-content" class="hidden">Geheime Nachricht</p>
</div>

HTML

#overlay {
  …
  position: absolute;
  position: fixed;
  cursor: grab;
}

.drag {
  cursor: grabbing;
}

CSS

var overlayBox = document.getElementById("overlay");
var overlayOffsetX = 0;
var overlayOffsetY = 0;

function startDrag(event) {
  overlayOffsetX = event.clientX - overlayBox.offsetLeft;
  overlayOffsetY = event.clientY - overlayBox.offsetTop;

  overlayBox.classList.add("drag");

  document.onmousemove = whileDrag;
}

function stopDrag() {
  overlayBox.classList.remove("drag");

  document.onmousemove = null;
}

function whileDrag(event) {
  overlayBox.style.left = event.clientX - overlayOffsetX;
  overlayBox.style.top = event.clientY - overlayOffsetY;
}

overlayBox.onmousedown = startDrag;
overlayBox.onmouseup = stopDrag;

window.onmouseout = stopDrag;

Medien Slider

Eine interaktive Galerie einbauen.

<head>
  …
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  <link href="styles/vorname.css" rel="stylesheet">
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" defer></script>
  <script src="scripts/vorname.js" defer></script>
</head>
…
<body>
  …
  <section>
    <div class="slider">
      <div class="slide">
        <img src="media/beispiel-grafik-1.png" alt="Beschreibung 1">
      </div>
      <div class="slide">
        <img src="media/beispiel-grafik-2.png" alt="Beschreibung 2">
      </div>
      <div class="slide">
        <img src="media/beispiel-grafik-3.png" alt="Beschreibung 3">
      </div>
    </div>
  </section>
<body>

HTML

.slider {
  margin: 40px 0px;
}

.slide {
  width: 25%;
  height: 200px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.is-selected {
  border-radius: 20px;
}

.slider .previous {
  background-color: blue;
}
.slider .next {
  background-color: red;
}

.slider .dot {
  border-radius: 0;
}

CSS

var slider = new Flickity(".slider", {
  autoPlay: 2000,
  wrapAround: true,
});

3D Typografie

Schrift dreidimensional und interaktiv gestalten.

<head>
  …
  <script src="https://bennettfeely.com/ztext/js/ztext.min.js" defer></script>
  <script src="scripts/vorname.js" defer></script>
</head>
…
<body>
  …
  <section id="title">
    <h3 class="text-3d">Very Silly</h3>
  </section>
<body>

HTML

#title {
  width: 100vw;
  height: 50vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-3d {
  text-align: center;
  font-size: 80px;
}

CSS

var text3d = new Ztextify(".text-3d", {
  depth: "30px",
  fade: true,
  direction: "forwards",
  event: "pointer",
  eventRotation: "20deg",
});

Projekt Abgabe

Die fertige Archiv-Website muss bis zum Semesterende (01.07.2025) als ein verpackter Ordner mit maximal 200MB inklusive aller relevanten Dateien (HTML, CSS, JS, Medien, Fonts, …) per Teams DM abgegeben werden.

📂 → 🗜️ → 🎁 → 💬 → ✅