Alle Sidepanels auf-/zuklappen

HTML&CSS: Meine erste eigene Website

Genereller Kursablauf

Unsere Kurse laufen nach dem Schema ab, das auf den folgenden Bildern dargestellt ist. Da wir mit Schulen arbeiten
und es in Schulen trotz guter Absprachen im Vorfeld am Kurstag zu unvorhergesehenen Schwierigkeiten kommen kann,
kann es in den Kursen immer mal Abweichungen vom Ablauf geben. Dies hängt meistens von den folgenden Faktoren ab:

Anzahl der Pausen: Das hängt von der Schule ab, dies teilt die Team Inspiress oder der Team Inspirer am Anfang des Kurses mit.
Technik der Schule: Leider haben wir immer wieder technische Probleme auf Seiten der Schulen. Daher wird häufig der Ablaufplan "durchgerüttelt".
Vorwissen der Schüler*innen: Dies versuchen wir über das Kahoot und das "Alle, die"-Spiel zu diagnostizieren, um grob einzuschätzen, wie viel Erfahrungen die Schüler*innen haben.
Engagement und Rolle der Lehrkraft: Je engagierter die Lehrkraft im Klassenraum, desto erfolgreicher der Kurs.

Programmieren 1 "WE INSPIRE"
Hier geht es darum, dass ihr als Inspiress oder Inspirer in das Programmieren einführt und die Basics erklärt.

Programmieren 2 "INSPIRE ME"
Im zweiten Programmierteil sind die Rollen sozusagen vertauscht. Denn jetzt kommt der proaktive Teil aus Sicht der Schülerinnen und Schüler. Nun sind diese an der Reihe und inspirieren sozusagen dich als Inspir*ess! Du hilfst, begeisterst und inspirierst aber natürlich entsprechen auf deine Art und Weise weiter.

Kursziele und Hinweise

Kursziele

Verständnis schaffen: Wo spielt Programmieren im Alltag eine Rolle? Welches Mindset verkörpern Programmier*innen?
Selbst probieren: Einblicke ins praktische Programmieren durch Programmieren eines Spiels oder einer Webseite geben
Fragen stellen: Berufsorientierung mit euch als Expert*innen aus der IT-Branche

Drei letzte Tipps

Denkt immer daran: Uns geht es um die Haltung "WE INSPIRE". Wie das bei euch konkret aussieht, ist euch überlassen. Haben die Teilnehmenden Lust, mit euch etwas länger über Roboter zu reden? Macht das gerne.
Lasst die Teilnehmenden auch bewusst Fehler machen und helft dabei herauszufinden, wieso ihr Ansatz nicht funktioniert.
Dieses Konzept ist unser Vorschlag, wie man Kinder und Jugendliche begeistern könnte. Seht es also als groben Leitfaden und weniger als festen Lehrplan, der von oben nach unten durchgearbeitet werden muss.

Feedback und Fragen immer an kurskonzepte@hacker-school.de oder einfach hier links neben den Text klicken.

Entwicklungsumgebung

Wir arbeiten während dem Kurs mit dem Online-Editor Repl.it:

https://repl.it
Wir loggen uns im Kurs gemeinsam mit den Schüler*innen in Repl.it ein und erstellt dort die Projekte.

Kennenlernen

~5 Minuten

Das Kennenlernen machen wir in Yourschool PLUS Kursen meist durch ein kurzes Aufwärmspiel mit den Schüler*innen. Zudem wird der Team Inspirer oder die Team Inspiress euch am Anfang des Kurses bitten, euch kurz vorzustellen.

Programmieren Teil 1: WE INSPIRE - HTML

~75 Minuten

1. Replit und Tastatur

~5 Minuten

Wie funktioniert die Entwicklungsumgebung (IDE)?

Nach dem Erstellen des eigenen Projekts sieht die Index.html-Datei in repl.it sehr voll aus. Daher löschen wir den Inhalt erst einmal, um von Null aus zu starten. Gehe dann kurz auf "RUN" ein, mehr braucht ihr zur Entwicklungsumgebung nicht zu sagen (falls es später Fragen dazu gibt, gerne). Wir wollen schnell ins Machen und Programmieren kommen und die Schüler*innen nicht animieren durch weitere Replit-Funktionen abgelenkt zu werden ;).

Bevor es nun losgeht, stellt den Schüler*innen zwei Websiten vor, die andere schon vor ihnen in einem Hacker School Kurs erstellt haben, zum Beispiel diese beiden hier:

2. Grundverstädnis von Tags

~10 Minuten

Teilt euren Bildschirm und erstellt den Grundaufbau eures HTML-Dokumentes.
Fangt einfach und mit den absoluten Basics an, zum Beispiel so:

Schachteln mit Deckel
Eine Schachtel kann geöffnet werden und weitere kleinere Schachteln (Tags) können reingetan werden. Am Ende ist es nur wichtig, dass alle Tags/Schachteln, die geöffnet wurden, auch irgendwann wieder mit einem Deckel verschlossen werden.
Das Öffnen kann hier mit dem Starttag und das Schließen mit dem Endtag verglichen werden.

Code

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

Geht noch nicht detailliert auf den <h1> und <p> tag ein. Das kommt dann im nächsten Schritt ;)

Wie erkläre ich die allgemeinen Tags am besten? (!Klick mich an!)

<!DOCTYPE html>-Tag

"Geht hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen - Erklärung dann ungefähr so: Dies gibt dem Webbrowser an, was für dein Dokumenttyp die Seite ist --> hier HTML5-Seite. Es hilft dem Browser, die Webseite korrekt zu verstehen (interpretieren)."

<html>-Tag?

"Geht hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen - Erklärung dann ungefähr so: Dieser Tag ist sozusagen der Startpunkt, an dem die Beschreibung der Webseite beginnt. Der Browser liest den HTML-Code von oben nach unten und versteht (interpretiert) die darin enthaltenen Tags, bis zum Endtag </html>. Dadurch erstellt der Browser die Website."

Wieso wird das so komisch eingerückt?

"Das ist kein Muss, allerdings ist die Einrückung in HTML-Code sehr wichtig. Warum? Da sie die Lesbarkeit und die Wartbarkeit des Codes verbessert. Wenn der Code ordentlich und einheitlich eingerückt ist, wird es für mich als Entwickler*in und andere Personen, die den Code lesen, viel einfacher, die Struktur der Webseite zu verstehen."

Was ist der <body>-Tag?

Hier kommt der eigentlich sichtbare Teil einer Webseite hin.

Es ist wahrscheinlich, dass ihr jetzt festgestellt habt, dass viele Schüler*innen nicht so fit im Umgang mit der Tastatur sind. Daher teilt ihnen gerne folgende Bilder, je nach Situation:

3. erste eigene Überschrift

~5 Minuten

Tags sind notwendig, damit Sachen auf unserer Website auf eine bestimmte Art und Weise angezeigt werden können. Damit ihr das einfach versteht, fangen wir mit einer Überschrift an.

Gibt den Schülern*innen 5 min Zeit, um sich ein Thema und eine Überschrift zu überlegen. Anregung: Hobbys, Lieblingsfilme, etc.

Den Schüler*innen fällt kein Thema ein? (!Klick mich an!)

Denkt an das Kennenlernen am Anfang (beim Spiel "Alle,die" oder ähnlichem) und sprecht sie dann proaktiv auf Themen und Hobbies an. So baut ihr Nähe und Vertrauen zu ihnen auf.

Vergiss dabei nie: Eine gute und positive Beziehung zu den Schüler*innen zu haben ist das Wichtigste für einen erfolgreichen Kurs (Die Erfahrung zeigt: Sogar noch wichtiger als tiefgründiges Fachwissen!) Das heißt, nimm dir unbedingt die Zeit auch persönliche Sachen von dir zu teilen, um nahbarer zu werden. Dann läuft das Programmieren und Inspirieren wie von alleine.
Das Ziel eines Hacker School Kurses ist es nicht, das Konzept stur von Anfang bis Ende durchzuarbeiten und unbedingt alles fertig zu bekommen.

Wie stelle ich eine Frage im Chat bzw. wenn das Mikrofon nicht funktioniert?

Nutze dazu den Chat. Viele Schüler*innen kennen das aus dem Gamingbereich.

Zum Beispiel folgendermaßen:

“Habt ihr das verstanden? Tippt in den Chat: 1 = Zustimmung , 2 = Ablehnung”
“Wie läuft Replit bei euch gerade? Tippt in den Chat: 1 = gut, 2 = schlecht”
“Tippe in den Chat: 1 = fertig, 2 = ich brauche noch Zeit”

Wenn du den Chat nicht nutzen möchtest, kannst du auch die Reaktionen in Zoom verwenden (z.B. Daumen).

Nun könnt ihr ihnen mit Hilfe des <h1> - Tags zeigen, wie man eine Überschrift setzt:

<h1> Das ist eine Überschrift </h1>
<h2> Das ist eine Überschrift </h2>
<h3> Das ist eine Überschrift </h3>

4. erster eigener Paragraph

~5 Minuten

Nun sollen die Schüler*innen ja nicht nur eine Überschrift auf der Webseite haben, sondern passend zum Thema auch einen kleinen Infotext. Lasst Sie hier einen kleinen Text schreiben.
Hier kann beispielsweise ein Wikipedia Text eingefügt werden, um zu zeigen, dass alles hintereinander weggeschrieben wird.

Damit der Text besser formatiert angezeigt wird, könnt ihr mit Hilfe des <p> - Tags Ihnen zeigen wie man einen Paragraphen setzt:

<p> Die Kleinen Pandas, auch Rote Pandas oder
Katzenbären genannt sind eine Säugetiergattung,
die im östlichen Himalaya und im Südwesten Chinas
beheimatet ist und sich vorwiegend von Bambus
ernährt. </p>

Hier findet Ihr Möglichkeiten zur Vertiefung.

Wie mache ich einen Zeilenumbruch (<br>)?

Der HTML-Tag <br> wird verwendet, um einen Zeilenumbruch innerhalb eines Textes oder Absatzes zu erzeugen, ohne einen neuen Absatz zu beginnen.

Wie mache ich eine Horizontale Linie (<hr>)?

Der HTML-Tag <hr> wird verwendet, um eine horizontale Linie zu erzeugen, die dazu dient, visuell Elemente zu trennen oder einen Abschnitt abzuschließen.

5. Tags, Tags, Tags

~10 Minuten

Zeigt den Teilnehmenden ein paar weitere Tags, um den Text zu formatieren.
h Tag(headline), b Tag(fett), i Tag(kursiv), mark(markieren) Tag oder Ähnliches können hier gezeigt werden.

<html>
    <p>Mein erster Text!</p>
    <h1>Das ist eine Überschrift!</h1>
    <b>Das ist fett!</b>
    <i>Das ist kursiv!</i>
    <mark>Das ist markiert!</mark>
</html>

Wichtig ist immer wieder auf das Prinzip wie die Tags funktionieren hinzuweisen (Tag öffnen, Inhalt einfügen, Tag schließen). Lasst den Schüler*innen auch genug Zeit, um Ihre Webseite zu vervollständigen!

Wie stelle ich sicher, dass das Prinzip von allen verstanden wurde? (!Klick mich an!)

Sprich die Schüler*innen proaktiv mit Vornamen an und ermutige sie Fragen zu stellen, wenn es ihnen nicht klar ist.

Gehe durch die einzelnen HTML-Dokumente der Schüler*innen. Am besten, indem ihr sie dir in einzelnen Tabs öffnet.
Nimmt euch Zeit, wir haben keine Eile. Auch wenn ihr so nicht durch das ganze Konzept kommt - nicht schlimm ;)

Wie stelle ich eine Frage im Chat bzw. wenn das Mikrofon nicht funktioniert?

Nutze dazu den Chat. Viele Schüler*innen kennen das aus dem Gamingbereich.

Zum Beispiel folgendermaßen:

“Habt ihr das verstanden? Tippt in den Chat: 1 = Zustimmung , 2 = Ablehnung”
“Wie läuft Replit bei euch gerade? Tippt in den Chat: 1 = gut, 2 = schlecht”
“Tippe in den Chat: 1 = fertig, 2 = ich brauche noch Zeit”

Wenn du den Chat nicht nutzen möchtest, kannst du auch die Reaktionen in Zoom verwenden (z.B. Daumen).

Noch besteht die Webseite nur aus Überschriften und Text, dies sollen die Schüler*innen mit Hilfe unterschiedlicher Tags ändern. Hierbei soll das Verständnis der Tags gefestigt werden.

Nun könnt ihr mit Hilfe des Listen - Tags Ihnen zeigen wie man eine Liste setzt:

geordnete Liste - ordered list (ol)

<ol>
    <li>Pizza</li>
    <li>Döner</li>
    <li>Kaiserschmarn</li>
</ol>

ungeordnete Liste - unordered list (ul)

<ul>
   <li>Pizza</li>
   <li>Döner</li>
   <li>Kaiserschmarn</li>
</ul>

Lasst sie unbedingt ihre eigene Liste passend zu ihrer persönlichen Website erstellen.

Hier ist ein guter Moment durch die Replits der Teilnehmenden zu gucken um Hilfe zu leisten.

Hier findet Ihr Möglichkeiten zur Vertiefung.

VERSCHACHTELUNG
Nun gibt es auch die Möglichkeiten, unterschiedliche Tags zu verschachteln, das heißt mehrere Tags für einen Satz/Wort zu benutzen.
Kein Muss dies zu zeigen.

<h1><ins>Überschrift 1</ins></h1>
<h2><b>Überschrift 1</b></h2>
<h3><i>Überschrift 1</i></h3>

6. Der Inspektor

~10 Minuten

Jetzt geht es in die konkrete noch "echtere" Anwendung und ihr zeigt den Schüler*innen den Inspektor.
Das könnt ihr nun super als Auflockerung und neue Motivation für sie nutzen!
Der Inspektor ist das Tool, das man in der Website-Entwicklung sehr oft benutzt. Mit ihm kann man sich bestehende Websiten 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 ;)

7. Entscheidung

Nun seid Ihr als Inspirer*ess gefragt:

Wenn ihr merkt, dass die Schüler*innen es schon super verstanden haben, dann gehe sofort in den "INSPIRE ME"-Teil über und teile mit den Schüler*innen das Cheatsheet.

Wenn ihr merkt, dass die Schülerinnen und Schüler noch etwas mehr Anleitung und Inspiration von dir brauchen, dann zeige ihnen noch, wie man Videos und Bilder einfügt (!Klick mich an!)

YOUTUBE Videos einfügen

Geht auf ein beliebiges Youtube-Video.
Dann geht unten auf Teilen.

Weiter auf Einbetten.

Dann weiter auf kopieren

Anschließend mit Hilfe der Tasten Strg & V wieder auf deiner Webseite eingefügen.

Beispielcodeschnipsel

<iframe width="560" height="315" src="
https://www.youtube.com/embed/E7EefIh-q1U"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture;
web-share" allowfullscreen></iframe>

Bilder einfügen

Um Bilder in den Code einzubinden, müsst ihr diese vorher noch von eurem Rechner in Repl.it hochladen.

Als erstes lasst ihr die Schüler*innen ein Bild in Google suchen (passend zu ihrem Thema).
Wenn Sie das passende Bild gefunden haben, müssen Sie rechtsklick darauf machen und die Option “Bild speichern unter” auszuwählen.
Aufzeigen, wie ein Bild in repl.it über die „Upload File“-Funktion hochgeladen werden kann.

Vorführen, wie das Bild umbenannt werden kann. Das ist wichtig für die vereinfachte Einbindung des Bildes im HTML-Dokument.
Einbindung des Bilds auf der Website mit <img>-Tag:

<img src="Bild1.jpg" />

Was sind Attribute?

In HTML sind Attribute wie besondere Anweisungen, die wir den verschiedenen Teilen einer Webseite geben, um ihnen zu sagen, wie sie sich verhalten sollen. Sie helfen uns, Dinge wie Farben, Größen oder Positionen von Texten, Bildern und anderen Elementen auf der Webseite anzupassen. Attribute sind wie kleine Zusatzinfos, die uns helfen, unsere Webseite so zu gestalten, wie wir es möchten.

An dieser Stelle kann man auch gerne schon mal zeigen, wie man das Bild mit Hilfe von Attributen anpassen kann.
Zum Beispiel

width & height: Diese Attribute legen die Breite und Höhe des Bildes in Pixeln fest.
style: Mit diesem Attribute könnt ihr direkt im HTML-Code Stile für das Bild festlegen, wie z.B. Farben, Ränder oder Abstände.
title: Dieses Attribute zeigt einen Text an, wenn jemand mit der Maus über das Bild geht.
alt: Dieses Attribute gibt eine alternative Beschreibung des Bildes an, die angezeigt wird, wenn das Bild nicht geladen werden kann.

8. INSPIRE ME - HTML

~30 Minuten

Jetzt kommt der proaktive "INSPIRE ME"-Teil aus Sicht der Schülerinnen und Schüler. Nun sind diese an der Reihe und inspirieren sozusagen dich als Inspir*ess!
Gib den Schüler*innen dazu folgendes Cheatsheet und lasse sie ihre eigene Website gestalten:
Cheatsheet

Ab hier habt ihr Zeit, die Schüler*innen frei arbeiten zu lassen. Lasst eure Teilnehmenden wissen, dass sie nun alle Grundfunktionen von HTML kennen und sich ihrer eigenen Webseite widmen können.

Steht nun für alle Fragen zur Verfügung.
Passt euch hier an die Dynamik der Gruppe an. Wenn die Schüler*innen eher zurückhaltend sind, geht durch die Dateien euer Teilnehmenden durch und sprecht die Schüler*innen direkt an.

Die Schüler*innen scheinen nicht so motiviert zu sein? (!Klick mich an!)

Versuche ein persönliches Gespräch zu starten.

Denke an das Kennenlernen am Anfang (beim Spiel "Alle,die" oder ähnlichem) und spreche sie proaktiv auf Themen an. So baust du Nähe und Vertrauen zu ihnen auf.
Vergiss dabei nie: Eine gute und positive Beziehung zu den Schüler*innen zu haben ist das Wichtigste für einen erfolgreichen Kurs (Die Erfahrung zeigt: Sogar noch wichtiger als tiefgründiges Fachwissen!) Das heißt, nimm dir unbedingt die Zeit auch persönliche Sachen von dir zu teilen, um nahbarer zu werden. Dann läuft das Programmieren und Inspirieren wie von alleine.
Das Ziel eines Hacker School Kurses ist es nicht, das Konzept stur von Anfang bis Ende durchzuarbeiten und unbedingt alles fertig zu bekommen.

Wie stelle ich eine Frage im Chat bzw. wenn das Mikrofon nicht funktioniert?

Nutze dazu den Chat. Viele Schüler*innen kennen das aus dem Gamingbereich.

Zum Beispiel folgendermaßen:

“Habt ihr das verstanden? Tippt in den Chat: 1 = Zustimmung , 2 = Ablehnung”
“Wie läuft Replit bei euch gerade? Tippt in den Chat: 1 = gut, 2 = schlecht”
“Tippe in den Chat: 1 = fertig, 2 = ich brauche noch Zeit”

Wenn du den Chat nicht nutzen möchtest, kannst du auch die Reaktionen in Zoom verwenden (z.B. Daumen).

Beim Klicken durch die einzelnen Replit-Projekte sehe ich eine Fehlermeldung im Code!

Stellt die Schülerin oder den Schüler nicht vor der Klasse bloß. Sondern sagt besser soetwas in die Richtung: “Eine allgemeine Sache, die mir gerade aufgefallen ist: Achtet darauf die Tags zu schließen“

Wenn die Gruppe ohnehin schon viel mit euch kommuniziert, helft ihnen dabei, ihre Probleme zu lösen und Ideen umzusetzen.

ChatGPT und KI

Das Thema wird sicher an den einen oder anderen Stelle aufkommen.

Wenn ja: Gehe proaktiv darauf ein und versuche ChatGPT als Chance und Möglichkeit zu nutzen HTML schneller zu verstehen. Ähnlich wie das im Programmieren mit Stake Overflow oder Google auch ist. Denke auch hier an unser Hacker School Mindset WE INSPIRE.
Wenn nein: Sprich es gerne an, zeige ChatGPT und nutze es als Motivationsschub. Gehe dabei gerne auf deine Erfahrungen ein und sensibilisere dafür, dass die Antworten hinterfragt werden sollten, da es keine Quellenangaben gibt und die Antworten auf Wahrscheinlichkeiten basieren.
Doch was ist überhaupt eine KI am Beispiel von ChatGPT? Fragt die Schüler*innen, was sie denken und geht dann darauf ein.

Zum Beispiel auf folgende Art und Weise: "KI steht für Künstliche Intelligenz. Eine KI ist zu allererst ein sehr langer Programmcode (Algorithmus), mit dem eine Anwendung oder App (wie ChatGPT) entwickelt wird. Dabei kann diese Anwendung, Aufgaben erledigen, die normalerweise menschliche Intelligenz erfordern würden. Gleichzeitig ist ChatGPT aber natürlich kein Mensch, sondern eine computerbasierte Anwendung.

ChatGPT ist mit einer riesigen Datenmenge aus dem Internet "gefüttert" worden und hat daraus gelernt (genauso, wie unser Gehirn auch). Heißt ChatGPT hat sozusagen ganz genau die Texte im Internet analysiert und angeschaut. Wenn du z. B. fragst, was die Antwort auf die Frage: "Was ist die Hauptstadt von Deutschland?" ist, wird die Antwort mit hoher Wahrscheinlichkeit "Berlin" sein. Das liegt daran, dass ChatGPT durch die Textanalyse gelernt hat, dass die Hauptstadt von Deutschland in den allermeisten Fällen "Berlin" ist. Die Antwort wird dann in "menschlicher Art und Weise" gegeben.

Die Intelligenz von ChatGPT besteht also darin, dass es aus den gesammelten Informationen und Mustern eine logische Antwort ableitet, auch wenn es nicht wirklich "versteht" oder denkt wie ein Mensch. ChatGPT weiß dann mit höchster Wahrscheinlichkeit, dass die Antwort "Berlin" lauten muss.

Zu guter Letzt. Wenn dich jetzt die SuS zurückfragen, was genau ein Algorithmus, ein Programm oder eine Anwendung (App oder Anwendungsprogramm) ist, frage einfach ChatGPT. Oder lese diesen oder diesen Artikel durch.

Kommentiere gerne direkt hier, welche Erfahrungen du im Kurs damit gemacht hast, indem du links neben diesen Text klickst oder schreibe es ins Feedback am Ende des Kurses.

Jetzt ist spätestens Zeit für eine Pause.

Programmieren Teil 2: INSPIRE ME - CSS

~75 Minuten

Nach der Pause geht es weiter mit dem Styles-Teil.

1. Einführung Styles

~10 Minuten

Fangt dabei im Plenum an und führt dieses Thema kurz ein.

Schreibt am Besten einen neuen p-Tag und erklärt nun, dass ihr diesen anders aussehen lassen möchtet als die anderen p-Tags. Fangt damit an, etwas Einfaches zu verändern, wie die Schriftfarbe oder die Schriftgröße.

<p style="font-size: 40px">Großer Text</p>

Macht einen weiteren P-Tag und ändert einen weiteren Style.

<p style="color:red">Dieser Text ist rot</p>

Zeigt nun in einem dritten P-Tag, dass auch mehrere Styles für einen Tag festgelegt werden können, wie z.B. Schriftfarbe und Hintergrundfarbe.

<p style="background-color:blue">Der Hintergrund ist blau</p>
<p style="font-size:5px; font-weight: bold;">Der Text ist klein
und fett </p>

Erklärt, dass es sehr viele verschiedene Styles gibt und diese auch je nach Tag unterschiedlich sein können.

Lassst die Schüler*innen nun beliebig die Website erweitern und schön machen.

Was sind Attribute? (!Klick mich an!)

An dieser Stelle kann man auch gerne schon mal zeigen, wie man das Bild mit Hilfe von Attributen anpassen kann.
Zum Beispiel

width & height: Diese Attribute legen die Breite und Höhe des Bildes in Pixeln fest.
style: Mit diesem Attribute könnt ihr direkt im HTML-Code Stile für das Bild festlegen, wie z.B. Farben, Ränder oder Abstände.
title: Dieses Attribute zeigt einen Text an, wenn jemand mit der Maus über das Bild geht.
alt: Dieses Attribute gibt eine alternative Beschreibung des Bildes an, die angezeigt wird, wenn das Bild nicht geladen werden kann.

<head>-Tag?

Dieser Bereich enthält Informationen über die Webseite, die nicht sichtbar sind, aber wichtig für das Funktionieren und das Aussehen der Seite sind ("Meta-Daten"). Zum Beispiel den Titel der Seite, der im Browser-Tab angezeigt wird oder Verknüpfungen zu externen Dateien.

Geht auch hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen.

Wo finde ich Styles im Cheatsheet?

Cheatsheet

Klicke im Menü auf "CSS":

2. INSPIRE ME

~verbleibende Zeit

Lasst die Schüler*innen nun die restliche Zeit programmieren und geht auf individuelle Fragen ein.
Wichtig dabei: Habt immer die einzelnen Dokumente und Projekte im Blick, in dem ihr diese in einem neuen Tab geöffnet habt.

Soll ich Styles weiter vertiefen?

Wenn eure Gruppe Interesse an Styles zeigt, kann es sich lohnen, noch tiefer auf das "stylesheet" (style.css) einzugehen.

Dies wird genutzt, um Styles zu verwalten, sodass man einen einmal festgelegten Style für ganz viele Tags benutzen kann.
Vergesst nicht, das Stylesheet in die index.html - Datei einzubinden
und den head Tag zu erklären.

<head>
    <link rel="stylesheet" href="style.css">
</head>

<head>-Tag?

Geht auch hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen.

Die Schüler*innen scheinen nicht so motiviert zu sein? (!Klick mich an!)

Versuche ein persönliches Gespräch zu starten.

Wie stelle ich eine Frage im Chat bzw. wenn das Mikrofon nicht funktioniert?

Nutze dazu den Chat. Viele Schüler*innen kennen das aus dem Gamingbereich.

Zum Beispiel folgendermaßen:

“Habt ihr das verstanden? Tippt in den Chat: 1 = Zustimmung , 2 = Ablehnung”
“Wie läuft Replit bei euch gerade? Tippt in den Chat: 1 = gut, 2 = schlecht”
“Tippe in den Chat: 1 = fertig, 2 = ich brauche noch Zeit”

Wenn du den Chat nicht nutzen möchtest, kannst du auch die Reaktionen in Zoom verwenden (z.B. Daumen).

Beim Klicken durch die einzelnen Replit-Projekte sehe ich eine Fehlermeldung im Code!

3. Häufige Fragen

~verbleibende Zeit

Wünscht ihr euch hier mehr zu häufigen Fragen. Wenn ja, dann kommentiert hier direkt oder schreibt es ins Feedback.

Berufsorientierung und Feedback

~30 Minuten

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:

~25 min

Auch die Berufsorientierung wird von der Team Inspiress oder dem Team Inspirer eingeleitet
In unserem Inspirer Handbuch findet ihr noch weitere Tipps für eine spannende Berufsorientierung
Hier erzählt ihr in einem Gespräch mit dem Team Inspirer oder der Team Inspiress davon, wie ihr in die IT gekommen seid und was euch daran Spaß macht.
Am Ende des Kurses wird den Schüler*innen die Möglichkeit gegeben, ihre Projekte vor der ganzen Klassen vorzustellen. Manchmal wollen das total viele, manchmal aber auch nicht so viel.
Nach der Projektvorstellung folgt noch das Live-Feedback der Schüler*innen, wo ihr dann auch direkt sehen könnt, wie der Kurs angekommen ist

Weitere Kurse buchen?

Ihr möchtet weitere Jugendliche für das Programmieren begeistern und euer Vorgehen beim Begeistern optimieren?

Hier meldet ihr euch für weitere Hacker School Kurse an.

← Programmieren ohne Computer

Python Gaming (Grundlagen): Code dein Spiel →