Front-End-Web-Lab: HTML, CSS und JavaScript mit Live-Vorschau im Browser

Dieses Lab gibt allen Lernenden eine kleine eigene Webseite, eine Mittagskarte, aus drei Dateien: index.html für das, was darauf steht, style.css für ihr Aussehen und app.js für das, was sie tut. Sie bearbeiten die Dateien im Dateieditor von JupyterLab und sehen die Seite über einen zweiten Link, die Preview, die aus demselben Ordner ausgeliefert wird. Kurze Python-Skripte lesen die Dateien und geben aus, was darin steht, sodass man eine Seite nicht nur schreiben, sondern auch prüfen kann.

Es ist kein Angriffs-Lab, und es gibt weder Node noch ein Framework: Eine Seite besteht aus einfachen Dateien, und der Browser ist die einzige Laufzeitumgebung. Jede Kopie hat keinen Weg ins Internet und keinen zu anderen Lernenden, es kann also nichts hineingeladen werden, und nichts darin kann jemand anderen erreichen.

Was die Lernenden lernen

Was HTML, CSS und JavaScript jeweils tun. HTML ist die Struktur: Elemente, die Gliederung der Überschriften und Links. CSS ist der Stil: Selektoren und Deklarationen, das Box-Modell aus Inhalt, Innenabstand, Rahmen und Außenabstand und die Kaskade, die entscheidet, welche Regel gewinnt, wenn zwei dasselbe Element treffen. JavaScript ist das Verhalten: Ereignisse wie ein Klick oder eine Eingabe und Funktionen, die das DOM ändern, hier um eine Liste zu filtern und ein dunkles Design umzuschalten, ganz ohne Bibliothek. Dann, wie man eine Seite prüft: ihre Tags zählen, ihre Gliederung lesen, Links finden, die ins Leere führen, und den Server nach der Seite fragen, wie es ein Browser tut. Es eignet sich für Einführungen in die Webentwicklung und das Front-End; prüfen Sie die genaue Formulierung in der Einheit Ihrer eigenen Prüfungsstelle, hier ist keine zitiert.

Im Browser ausführen

Das Lab startet einen Dienst, jupyter, der die Seite, ein Start-Notebook und die kurzen Skripte in seinen Arbeitsordner schreibt und einen einfachen Dateiserver auf dem Ordner site startet. Von der Seite des Labs aus öffnen sich zwei Links: JupyterLab, die Werkbank, und Preview, die Seite selbst. JupyterLab verlangt kein Token, weil die Tür der Plattform schon weiß, wer es öffnet. Die Preview zeigt die gespeicherten Dateien: Nach dem Bearbeiten einer Datei speichern die Lernenden sie und laden die Preview neu. Das Terminal neben dem Lab hat kein eigenes Python und erreicht das des Labs mit docker exec jupyter, gefolgt vom Befehl, der darin ausgeführt wird.

  1. Container-Seite öffnen. Öffnen Sie in der Leiste „Entwickeln“ und wählen Sie „Einen Container ausführen“. Die Seite kann jeder öffnen, und das Git-Lab und das SQL-Lab starten ohne Konto. Alle anderen Labs brauchen ein kostenloses Konto: Erstellen Sie eines, melden Sie sich an und klicken Sie dann auf „Starten“.
  2. Lab suchen. Die Karte „Beispiel-Labs“ listet alle Beispiele auf. Suchen Sie Front-End-Web: HTML, CSS und JavaScript.
  3. Auf „Starten“ klicken. „Starten“ führt das Lab unverändert mit einem einzigen Klick aus. „Zuerst die Datei bearbeiten“ öffnet die Compose-Datei, damit Sie sie vor dem Start ändern können.
  4. Öffnen. Auf der Seite des Labs hat die Lab-Leiste zwei Links. Klicken Sie auf JupyterLab, öffnen Sie den Ordner site und doppelklicken Sie auf index.html, klicken Sie dann auf Preview, um die Seite zu sehen. Klicken Sie danach auf „Terminal öffnen“ und tippen Sie docker exec jupyter python3 steps/tags.py, um die Tags der Seite zu zählen.

Was Sie abgeben lassen können

Ihre eigene Version der Seite: die drei Dateien aus dem Ordner site, aus JupyterLab mit File, Download heruntergeladen. Dazu ein, zwei Sätze in eigenen Worten zu einer Änderung, die sie gemacht haben, und was sie bewirkt hat, zum Beispiel ein neues Gericht, ein anderes Farbschema oder eine Schaltfläche, die etwas anderes tut. Nichts wird automatisch bewertet: Der Satz zeigt, ob es verstanden wurde. Für anspruchsvollere Arbeit lassen Sie steps/links.py und steps/outline.py auf ihrer Seite ausführen und sagen, was jedes zeigt, oder eine Regel hinzufügen und erklären, welche gewinnt und warum.

Eine Grundlektion zu diesem Lab

Front-End Web Basics ist eine kleine Lektion, die in diesem Lab abläuft. Darin listen die Lernenden die drei Dateien der Seite auf, zählen ihre Tags und lesen ihre Gliederung, zählen die Regeln und Deklarationen des Stylesheets, finden die Funktionen und Ereignisse im Skript und prüfen die Links und die Antwort des Servers der Preview. Sie ist bewusst klein: Sie zeigt Lehrkräften, was eine Lektion in einem Lab ist, und das Lab erledigt den Rest. Kopieren Sie sie in ein eigenes Modul, um sie zu ändern.

Der Code auf GitHub

Die Compose-Datei hat kein Dockerfile: Sie startet ein einziges öffentliches Image, das scipy-notebook der Jupyter Docker Stacks, auf ein datiertes Tag festgelegt, mit eigenem unprivilegiertem Konto und 512 MB Speicher. Das Image steht unter der Lizenz BSD-3-Clause und wird nicht von uns verbreitet. Die Datei schreibt die Seite und die Skripte beim Start aus festem Text, sodass jede Kopie gleich ist und nichts heruntergeladen wird. Die Grenzen sind ehrlich: Die Seite ist klein, es gibt weder Node noch ein Framework noch eine Möglichkeit, eine Bibliothek aus dem Internet zu holen. Die Lernenden arbeiten also in einfachem HTML, CSS und JavaScript, und genau darum geht es in der Lektion. Beim Stoppen des Labs wird nichts gespeichert, die Lernenden laden ihre Dateien vorher herunter.

Als Aufgabe stellen

Schreiben Sie in die Aufgabe, was abgegeben werden soll.

  1. Lab erstellen. Fügen Sie in Ihrem Modul eine Aufgabe hinzu und wählen Sie die Karte „Container-Lab“, dann „In einem GitHub-Repository“. Geben Sie https://github.com/mitsurutech/lab-frontend-web mit dem Branch main an. Die Compose-Datei ist standardmäßig compose.yaml. Forken Sie das Repository zuerst, wenn Sie es ändern möchten, zum Beispiel um mit einer anderen Seite zu beginnen.
  2. Veröffentlichen und ausprobieren. „Veröffentlichen“ legt den Commit fest, den Sie gesehen haben. Eine spätere Änderung im Repository verändert also kein Lab, das Sie bereits gestellt haben. Starten Sie zuerst Ihre eigene Kopie.
  3. Zuweisen. Weisen Sie es wie jede Aufgabe zu, auf Wunsch mit Fälligkeitsdatum, und schreiben Sie in die Aufgabe, was zu tun ist und was abgegeben werden soll.
  4. Abgaben bewerten. Öffnen Sie die Kopie einer lernenden Person und die abgegebene Arbeit, bewerten Sie sie und geben Sie sie mit einer Begründung zur Überarbeitung zurück, wenn mehr nötig ist.

Dieses Lab ausprobieren, und was es kostet

Mit einem kostenlosen persönlichen Konto können Sie die Grundlagenlektionen in diesem Lab durcharbeiten, mit genug kostenlosem Guthaben pro Monat für die meisten Lektionen und ohne Karte. Für eine Klasse sind die ersten 365 Tage für eine Schule kostenlos, für bis zu 50 Lernende; danach zahlt sie je lernender Person und Jahr, alle Labs inklusive und Lehrkräfte kostenlos.

Häufige Fragen

Warum gibt es zwei Links?
JupyterLab, der erste, ist der Ort, an dem die Lernenden die Dateien bearbeiten und das Terminal benutzen. Preview, der zweite, ist die Seite selbst, aus dem Ordner site ausgeliefert, so wie sie ein Besucher sähe. Dass die Seite in einem eigenen Tab liegt, bedeutet, dass sie nicht in einen Editor eingerahmt ist.
Ich habe eine Datei geändert, und die Preview hat sich nicht geändert. Warum?
Die Preview zeigt die gespeicherten Dateien. Speichern Sie die Datei im Editor und laden Sie dann die Preview neu. Sieht sie immer noch gleich aus, versuchen Sie ein erzwungenes Neuladen, denn ein Browser kann eine alte Kopie einer Datei behalten.
Können die Lernenden Node, React oder ein Paket aus dem Internet verwenden?
Nein. Eine Kopie erreicht das Internet nicht, und das Image hat kein Node, es gibt also nichts zu installieren. Das Lab vermittelt die drei einfachen Sprachen, auf denen jedes Framework aufbaut. Für andere Startseiten forken Sie das Repository, ändern die Dateien, die die Compose-Datei schreibt, und stellen den Fork als Lab ein.
Warum muss ich kein Token und kein Passwort eingeben?
Die Webseite eines Labs ist nur über die Tür der Plattform erreichbar, die schon weiß, wer Sie sind, und nur Sie und die Lehrkräfte Ihres Moduls hineinlässt. JupyterLab wird deshalb ohne Token gestartet. Betreiben Sie es nicht so auf einem Rechner, den andere erreichen können.