HTML, CSS & JavaScript auf dem iPad programmieren

Was du zum Programmieren auf dem iPad brauchst

Webseiten sind einfache Textdateien. Ein Browser liest index.html, folgt den Verweisen auf style.css und script.js und setzt alles zusammen. Auf dem iPad brauchst du also drei Dinge: einen Editor, der mehrere Dateien beherrscht, eine Vorschau für das Ergebnis und eine Konsole, die zeigt, was dein JavaScript macht.

Code Editor vereint alle drei in einer App: Deine HTML-Seite erscheint schon beim Tippen – auf dem iPhone unter dem Code, auf dem iPad daneben – und CSS, JavaScript und Bilder aus dem Projekt werden mitgeladen wie auf einem echten Webserver. Das klappt ohne Konto und ohne Internet.

Einen Projektordner anlegen

Gib jeder Website einen eigenen Ordner. Ein typisches kleines Projekt sieht so aus – index.html ist dabei der Einstieg, den Browser und Webhoster zuerst öffnen.

• index.html – Aufbau und Inhalt der Seite
• style.css – Farben, Schriften und Layout
• script.js – Verhalten, zum Beispiel die Reaktion auf Tipps
• images/ – ein Unterordner für Bilder, die du mit relativen Pfaden wie images/logo.png einbindest

Die Beispielseite: index.html

Hier ist ein kleiner Tipp-Zähler. Das viewport-Meta-Tag ist auf Handys wichtig: Ohne es stellen mobile Browser die Seite in Desktop-Breite dar und zoomen heraus. Das script-Tag steht am Ende des body, damit der Button schon existiert, wenn das Skript startet. Die Texte auf der Seite kannst du natürlich auf Deutsch ändern.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tap counter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Tap counter</h1>
  <button id="tap">Tap me</button>
  <p id="count">0 taps</p>
  <script src="script.js"></script>
</body>
</html>

Das Stylesheet: style.css

Das CSS zentriert alles, gibt dem Button eine angenehme Größe zum Antippen und wechselt zu dunklen Farben, wenn das Gerät im Dunkelmodus ist.

body {
  font-family: system-ui, sans-serif;
  text-align: center;
  padding: 2rem;
}

button {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  background: #2563eb;
  color: white;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

Das Skript: script.js

Das JavaScript findet den Button und den Absatz über ihre id, zählt jeden Tipp und schreibt das Ergebnis zurück in die Seite. Die Zeile mit console.log ist für dich, nicht für Besucher: Sie zeigt jeden Tipp in der Konsole, sodass du siehst, dass der Code läuft.

const button = document.getElementById("tap");
const label = document.getElementById("count");
let taps = 0;

button.addEventListener("click", () => {
  taps += 1;
  label.textContent = taps === 1 ? "1 tap" : `${taps} taps`;
  console.log("Taps:", taps);
});

Arbeiten mit Live-Vorschau

Auf dem Touchscreen programmierst du am besten in kleinen Schritten: eine Sache ändern, in die Vorschau schauen, weitermachen. In Code Editor aktualisiert sich die Vorschau beim Tippen, und ein Stylesheet zeigt die Seite, auf der es wirkt – du änderst also eine Farbe in style.css und siehst sofort, wie sich der Button verändert. Mit einem Tipp öffnest du die Vorschau im Vollbild.

Wenn etwas nicht klappt, schau zuerst in die Konsole, bevor du weiteren Code änderst. Code Editor zeigt Ausgaben von console.log, Warnungen und Fehler mit Zeilennummer direkt unter der Vorschau; ein Tipp auf einen Fehler springt zur passenden Zeile.

• Schreib zuerst die HTML-Struktur und prüfe, ob jedes Element erscheint.
• Ergänze CSS Regel für Regel und beobachte die Vorschau.
• Füge JavaScript zuletzt hinzu und gib Werte beim Bauen mit console.log aus.
• Entferne die Debug-Ausgaben, sobald alles funktioniert.

Code auf der Bildschirmtastatur tippen

Die Bildschirmtastatur versteckt viele Zeichen, die du beim Programmieren brauchst: spitze und geschweifte Klammern oder die Tab-Taste. Eine zusätzliche Tastenleiste spart viel Umschalten. Code Editor hat eine Leiste über der Tastatur mit Tab, Sonderzeichen und Bausteinen, macht Vorschläge beim Tippen für HTML, CSS und JavaScript und schließt Klammern, Anführungszeichen und HTML-Tags selbst. Mit einer Hardware-Tastatur am iPad funktionieren auch Tastaturkurzbefehle.

Die Seite auf dem Handy testen

Weil du auf einem Mobilgerät baust, testest du automatisch auf einem. Ein paar Dinge solltest du vor dem Veröffentlichen trotzdem gezielt prüfen.

• Dreh iPad oder iPhone und prüfe, ob das Layout ohne seitliches Scrollen passt.
• Mach Buttons und Links groß genug zum Antippen – etwa 44 Punkte sind ein gutes Minimum.
• Schalte das System in den Dunkelmodus, wenn dein CSS ihn unterstützt.
• Nutze relative Pfade (style.css, images/logo.png), damit die Seite nach dem Hochladen genauso funktioniert.
• Ist die Seite online, öffne sie in Safari und auch auf den Geräten anderer Leute.