Alle Sidepanels auf-/zuklappen

Meine erste Website in HTML&CSS

Anforderungen an Inspirer

Du hast HTML & CSS konzeptionell verstanden und kannst ihr Zusammenspiel anschaulich erklären. -> Bedeutet, du musst nicht super flüssig schreiben können, aber auf Google sehr schnell finden, was du suchst (weil du weißt, dass es dieses Konstrukt irgendwie so ähnlich gibt).
Du weißt, wie Repl mit mehreren Dateien funktioniert, und kannst eine verständliche und hilfreiche Einführung dazu halten.
Du kannst mit 7.-9.-Klässlern so kommunizieren, dass sie sich ernst genommen fühlen.
Du kannst auch erfahreneren Teilnehmenden Aufgaben geben, die sie nicht unterfordern – das könnte bedeuten, dass du sie schon früher mit den Inhalten im Endprojekt eigenständig herumspielen lässt. Oder du zeigst, wie man Websites für verschiedene Endgeräte gestaltet, eine Website-Struktur mit verschiedenen Unterseiten anlegt oder sogar fortgeschrittene CSS-Techniken für die absoluten Profis. Dir fällt da bestimmt was ein.

Genereller Ablauf

Der Kurs beginnt mit der Begrüßung im Plenum. Ein erfahrener Inspirer übernimmt die Einführung in das Thema und versucht sicherzustellen, dass die Technik bei den Meisten funktioniert. Danach werden die Teilnehmenden in kleine Teams eingeteilt. Jeder Inspirer ist während dem Kurs für etwa 4 bis 6 Teilnehmende verantwortlich.
Die eingeteilten Teams werden in Breakout-Rooms (bei Zoom) eingeteilt. Wenn ihr in den Breakout Rooms Fragen habt, ruft gerne über Zoom um Hilfe. Der Haupt-Inspirer wird dann zu euch in den Breakout-Room kommen.
Vorstellungsrunde in den Gruppen. Stellt euch einmal vor und erklärt gerne, wie ihr zu der IT gekommen seid. Lasst die Teilnehmenden sich vorstellen, inklusive Programmiererfahrung, Erwartungen und Motivation.
Jetzt geht es ans Eingemachte: Programmieren! Mehr Informationen zu den Einheiten findet ihr unten.
Versucht nach etwa der Halbzeit eine Pause von 30 Minuten einzulegen.
Der Abschluss findet wieder im Plenum mit der gesamten Klasse statt. Hier stellt sich jeder Inspirer einmal kurz vor und erklärt, warum er*sie für IT brennt.

P.S.: Vergesst nicht, eure Pausen zu machen 🙂

Hinweise zum Konzept

Lernziele

Es geht darum, die Teilnehmenden zu begeistern. Unser Ziel ist es, dass sie nach den 3 Stunden Kurs Interesse haben, noch weiter zu recherchieren und zu programmieren. Wie das bei euch konkret aussieht, ist euch überlassen. Ihr merkt, die Teilnehmenden haben voll Lust mit euch eine halbe Stunde über Roboter zu reden? Macht das gerne.
Versucht eher, den Teilnehmenden grundlegende Konzepte beizubringen (“Wie debugge ich ein Programm?”), als Ihnen diese eine Eigenheit von Python lang und breit zu erklären. Zeigt/erklärt ihnen auch gerne, wo das, was sie gerade lernen, im echten Leben zum Einsatz kommt.
Lasst die Teilnehmenden so viele Schritte wie möglich selbst gehen. Sie werden so am meisten lernen, und sind hoffentlich auch in der Lage, an das Gelernte nach Ende des Kurses anknüpfen zu können.
Lasst sie dabei auch scheitern. Im Optimalfall versucht ihr dann mit ihnen gemeinsam zu ergründen, wieso ihr Ansatz nicht funktioniert hat – dadurch müssen sie ihre Gedanken kommunizieren und lernen so mehr.
Dieses Konzept ist unser Vorschlag, wie man Kinder und Jugendliche begeistern könnte. Seht es also mehr als groben Leitfaden und weniger als festen Lehrplan.

Feedback und Fragen an kurskonzepte@hacker-school.de.

Technologie

Wir arbeiten während dem Kurs mit dem Online-Editor Repl.it -> https://repl.it
Wie genau die Kids sich einloggen und mit welchen Accounts sie arbeiten, erklärt der Team-Inspirer am Anfang im Plenum. Das ist also nicht eure Aufgabe, darum kümmern wir uns.

Konzept

Begrüßung und generelle Motivation

Wer sind wir und was wünschen wir uns? (an die Kinder gerichtet)

Hacker School: Wir wollen, dass ihr alle etwas mitnehmen könnt. Uns ist es lieber, dass ihr Zusammenhänge verstanden habt, aber dafür insgesamt weniger Stoff. (Wird trotzdem vorkommen, dass euch Dinge überfordern, aber das ist normal. Behaltet das trotzdem im Hinterkopf)
Vordergründig bringen wir euch heute Programmieren bei, aber eigentlich geht es uns auch darum, euch mit Menschen zusammenzubringen, die das richtige Mindset haben. Damit ihr von Ihnen lernen könnt. Wenn ihr inhaltlich überhaupt nichts verstehen solltet, aber dafür die Fehlerkultur mitnehmt, sind wir happy.
A propos Fehlerkultur: Wenn ihr etwas nicht versteht – fragt nach. Das hier soll alles werden, bloß kein Frontalunterricht, in dem ihr Dinge schlucken, verdauen und nachher wieder auskotzen sollt. Uns geht es darum, dass ihr Spaß habt, und vor allem: etwas für euch lernt und mitnehmt. Und gerade dem stehen so ein paar Dinge im Weg, wie: Schon beim ersten kleinen Fitzelchen Syntax zu scheitern. Also: Wenn ihr jetzt gleich bei euren Inspirern seid und euer Programm nicht funktioniert, was macht ihr dann? Richtig. Fragt nach.

grober inhaltlicher Überblick
zeitlicher Überblick
Einmal kurz die Technologie durchgehen

Vorstellungsrunde

Stellt euch selber vor. (2-3 Sätze)

Was habt ihr gemacht, als ihr so alt wart wie die Teilnehmenden?

Lasst die Teilnehmenden sich vorstellen.

Wie heißt du?
Hast du schonmal programmiert?
Was erhoffst du dir von diesem Kurs?

Wichtig: achtet darauf, dass die Kinder sich nur mit Vornamen vorstellen – Datenschutz.

Was passiert heute?

Heute erstellen wir uns eine Website mit möglichst einfachen Mitteln. Ergebnisse, die aus diesem Kurs entstehen können, könnt ihr euch hier anschauen:
https://tyler-3.schoolhacker.repl.co/

Programmieren

Zeit: ~ 3h + 30 min Pause
Ort: Kleingruppe
Verantwortlich: Inspirer

Hallo Welt!

Teilt euren Bildschirm und erstellt den Grundaufbau eures HTML-Dokumentes.
Geht auf jeden Fall auf die absoluten Basics ein:
- Was machen die Tags? -> Haben die Teilnehmenden Ideen, kommen sie vielleicht sogar von selbst drauf?
- Wieso wird das so komisch eingerückt?
Lasst die Teilnehmenden gerne auch mit anderen Texten herumspielen. Lasst sie es vor allem selbst einmal schreiben, auch wenn das vielleicht ein bisschen dauern wird.

Lernziele

Grundverständnis von Tags
Was <head>, <body> und <title> machen

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Oh, schön hier.</p>
    </body>
</html>

tags, tags, tags

Wie ja schon die Überschrift andeutet, werden wir hier versuchen, sie mit Tags vertraut zu machen. Erweitert euer Beispiel durch eine (zweite) Überschrift und lasst sie das bei sich reproduzieren. Macht danach das Gleiche für Absätze, Links, und Listen. Achtet darauf, das Tempo an die Gruppe anzupassen.

<h1></h1>..<h6></h6>
<p>
<a href="https://mozilla.org">Hier!<a/>
<ol>, <ul>, und <li>

Lernziel(e)

Mit eben diesen Elementen sinnvoll umgehen können

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <p>Ein Echo?</p>
        <h1>Hallo</h1>
        <h2>Hallo</h2>
        <h3>Hallo</h3>
        <h4>Hallo</h4>
        <h1>Welt!</h1>
        <h2>Welt!</h2>
        <h3>Welt!</h3>
        <h4>Welt!</h4>
        <p>Anscheinend. Und was ist mit dieser Seite? <a href="https://de.wikipedia.org/wiki/Website">hier</a>?</p>
        <ol>
            <li>Hm.</li>
            <li>Die</li>
            <li>Nicht.</li>
        </ol>
    </body>
</html>

Der Inspektor

Der Inspektor ist das Tool, das man in der Website-Entwicklung sehr oft benutzt. Mit ihm kann man sich bestehende Website ansehen und temporär ihren Code verändern.

Jetzt wird es spannend. Schnappt euch eine (bekannte) Website, und verändert ihren Inhalt.

Mit Rechtsklick -> Untersuchen oder F12 kommt ihr zum Inspektor. In Safari braucht ihr ein bisschen mehr, siehe hier.

Artikel im Internet bieten sich zum Beispiel sehr gut an (witzige Headlines), aber auch Seiten, auf denen man Dinge kaufen kann (kostenlose Einkäufe? - oder sehr teure?).
Ganz besonders wichtig bleibt natürlich, dass die Teilnehmenden verstehen, was da passiert - nicht die Website selbst wird geändert, sondern nur ihre lokale Kopie davon.
Ideen:

Aber zurück zum Code.

oder schon in eine erste Pause? - schaut auf die Stimmung, es könnte sich lohnen.

Style, Teil 1

Soo, bis jetzt wurde am Inhalt einer Website herumgespielt - nun wenden wir uns dem Style der Website zu.
Das machen wir (zunächst) über Attribute im HTML. Ein Attribut haben die Teilnehmenden gerade schon gesehen, und zwar das hypertext reference-Attribut von <a>. Hier führen wir nun das style-Attribut ein, das man an HTML-Elemente anfügen kann.
Das geht so:

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1 style="color: blue;">Hallo Welt!</h1>
        <p style="font-size: 10px">Oh, schön hier. Aber winzig.</p>
    </body>
</html>

Wahrscheinlich geht ihr am besten Schritt für Schritt, und mit folgenden (einfachen) CSS-Eigenschaften, vor:

font-size, color, font-weight
background-color
width, height

Und, wie immer: Weicht gerne von unserem Konzept ab, und lasst die Teilnehmenden damit ein bisschen herumspielen :)

Style, Teil 2 - Stylesheets

Jetzt werden wir professionell - zeigt den Kids, wie sie die Style-Attribute auslagern können, und was das bringt.

Lernziele

verstehen, was die Idee hinter einem Stylesheet ist (Auslagerung aller Styles + Abstraktion)
verstehen, wie ein style.css funktioniert - und wie es eingebunden wird.
ids (#) und Klassen (.) verstehen

Damit all das funktioniert, müsst ihr zunächst ein Stylesheet im <head> einbinden. Das geht so:

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p>Oh, schön hier.</p>
    </body>
</html>

Und jetzt kommt auch die style.css. Wenn der Link so aussieht, sollte sie in den gleichen Ordner kommen - ihr erstellt also in repl auf gleicher Ebene eine style.css mit folgendem (oder ähnlichem) Inhalt und lasst die Teilnehmenden raten, was passiert/passieren könnte.

p {
    background: lightblue;
}
.myClass {
    background: darkred;
}
#ganzSpeziell {
    background: limegreen;
}

Dann allerdings passiert erst einmal noch wenig. Denn ihr habt ja ganz vergessen, die ID und die Klasse auch im HTML hinzuzufügen. Macht gerne auch "absichtlich" diesen Fehler (oder macht auf eine andere Art und Weise deutlich, dass das wichtig ist), denn so können die Teilnehmenden das besser wiedererkennen, und es schneller selbstständig hinbekommen.
So könnte es nach einer Zuordnung von HTML-Tags zu CSS-Eigenschaften aussehen:

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="myClass">Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p class="myClass">Oh, schön hier.</p>
        <p id="ganzSpeziell">Oder?</p>
    </body>
</html>

Bilder & Videos

Und jetzt noch das, womit unsere Websites so richtig zum Leben erwachen können: Bilder (und gleich auch noch Videos).
Die können so eingebunden werden:

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p>Oh, schön hier.</p>
    </body>
</html>

Damit das auch klappt, müsst ihr natürlich das Bild mit genau diesem Namen in der gleichen Ebene des Dateisystems (in repl.it) ablegen.
Hier wichtig zu beachten: <img> ist einer der wenigen tags, der "sich selbst schließt", also bei dem alles innnerhalb der spitzen Klammern abspielt.

(Youtube-)Videos funktionieren folgendermaßen:
Ihr geht bei Youtube auf Rechtsklick auf das Video > Einbettungscode kopieren und dann fügt ihr ihn an der gewollten Stelle ein :)

Die erste eigene Website

Und jetzt kommt ...(Trommelwirbel)... das Endprojekt. Versucht, ab hier die Teilnehmenden so frei wie möglich atbeiten zu lassen, und seid mehr ein Coach, der ihre Fragen beantwortet, sie aber nicht allzu sehr beeinflusst. Normalerweise kommen nämlich so die coolsten Ideen zum Vorschein. Eine gute Referenz für HTML und CSS sind die W3Schools-HowTos - ebenso gibt es fertige Templates.
Ebenso gibt es auch einige frei zugängliche Cheat Sheets, so wie das hier. Dort findet ihr ebenso ein Template.

Hier ist vor allem wichtig, dass die Teilnehmenden merken, dass sie kreativ werden können (und dürfen) - dann kommen oft richtig gute Sachen dabei raus.

Haben eure Teilnehmenden wirklich gar keine Ideen? Oder hat ein*e Teilnehmer*in schon mehr Erfahrung? Dann können sie sehr gerne hiermit herumspielen, und vielleicht die Hintergrundbilder, die Geschichte, oder sogar die Animationen verändern:

Das Projekt hinter der Website könnt ihr euch als Zip herunterladen oder auf euren eigenen Repl.it-Account kopieren.

Hier ist es sinnvoll (auch, um die Website zu verstehen), einmal auf die sehr gute Dokumentation von Mozilla zu verweisen.

Da findet man für gewöhnlich alles, was man so braucht.

Inklusive Guides und weiteren Ressourcen auf anderen Seiten, auf denen man sehr viel lernen kann :)

Und das wars! :)

Abschluss

In eurer Gruppe:

~5 min

Wenn ihr eurer Gruppe am Ende noch Feedback geben wollt, dann nehmt euch gerne jetzt Zeit dafür.
Fragt nach, ob jemand (in der Abschlussrunde im großen Plenum) vorstellen möchte, was ihr so gemacht habt.

Im Plenum:

~20 min

Die Teilnehmenden stellen ihre Projekte vor (eine*r pro Gruppe), und erzählen ein bisschen, was sie so gemacht haben.
Die Inspirer reden über sich, wie sie zur IT gekommen sind, was ihnen daran Spaß macht, wieso sie es weiterhin machen wollen, und was sie den Jugendlichen gerne mitgeben möchten.
(Wenn erwünscht, bekommt der*die Lehrer*in kurz das Wort)
Feedbacklink geht raus

← Grundlagen des Programmierens in Python

Spieleprogrammierung: Pong in Scratch →