HTML on CoderDojo Linz

Meine erste Webseite

Mon, 01 Jan 0001 00:00:00 +0000

Meine erste Webseite

In dieser Übung lernst du die Hypertext Markup Language (kurz HTML) kennen. Unser Ziel ist es, Schritt für Schritt eine HTML-Seite zu erstellen und dabei die wichtigsten Grundbegriffe von HTML zu entdecken. Wenn du nach dieser Übung mehr über HTML lernen willst oder während der Übung Detailfragen hast, kannst du einen Blick auf die HTML Einführung auf w3schools.com werfen.

Das Grundgerüst einer HTML-Seite

Öffne einen beliebigen Texteditor. Empfehlenswert ist ein Editor, der speziell für Softwareentwicklung gedacht ist. Hier einige Links zu kostenlosen Editoren, mit denen du HTML gut schreiben kannst. Falls du nicht sicher bist, welchen du nehmen sollst, nimm gleich den ersten. Im Lauf der Zeit kannst du mit verschiedenen experimentieren und dich für den entscheiden, der dir am besten gefällt.

Erste Schritte mit CSS

Mon, 01 Jan 0001 00:00:00 +0000

Erste Schritte mit CSS

Ziel der Übung

In dieser Übung lernst du Cascading Style Sheets (kurz CSS) kennen. Unser Ziel ist es, eine HTML-Seite mit CSS zu formatieren und hübsch zu gestalten. Wenn du nach dieser Übung mehr über CSS lernen willst oder während der Übung Detailfragen hast, kannst du einen Blick auf die CSS Einführung auf w3schools.com werfen.

Falls du noch überhaupt keine Erfahrung mit HTML hast, wende dich an eine CoderDojo Mentorin oder einen Mentor. Sie werden dir die HTML-Basics erklären oder dir eine Übung für HTML-Grundlagen zeigen.

Verschlüsseln mit JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Verschlüsseln mit JavaScript

Ziel der Übung

In dieser Übung lernst du ein einfaches Verschlüsselungsverfahren kennen.

Technisch lernst du einige Dinge über JavaScript und Node.js:

Wie programmiert man ein Kommandozeilenprogramm mit JavaScript?
Was sind ASCII Codes?
Wie arbeitet man in JavaScript mit Zeichenketten?

Bitte beachte, dass dieses Beispiel keine Übung für Anfänger ist! Falls JavaScript, Node.js und Visual Studio Code für dich neu sind, mache dich erst mit diesen Technologien und Werkzeugen vertraut. Dazu sind folgende Übungsbeispiele zu empfehlen:

JavaScript Zahlen raten

Mon, 01 Jan 0001 00:00:00 +0000

Zahlen raten

Ziel der Übung

In dieser Übung programmierst du ein einfaches “Zahlen raten” Spiel und siehst, wie man mit JavaScript Ein- und Ausgaben machen kann.

Das Spiel soll folgendermaßen funktionieren: Der Computer denkt sich eine Zahl zwischen 0 und 100 aus und der Spieler muss versuchen, diese Zahl mit möglichst wenigen Versuchen zu erraten. Dazu kann er einen Tipp eingeben. Der Computer sagt dann Niedriger oder Höher, und der Spieler kann einen neuen Tipp eingeben, bis er die richtige Zahl erraten hat.

Advanced CSS Styles

Mon, 01 Jan 0001 00:00:00 +0000

Advanced CSS Styles

Für diese Übung starten wir mit einer existierenden Webseite, die nur HTML enthält, aber noch gar keine Styles.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scratch - Fang mich</title>
</head>

<body>
    <div class="content">
        <h1>Scratch Fang-Mich <span class="version">Scratch 3.0</span></h1>

        <div class="intro">
            <img src="images/endgame.png" alt="Endgame">
            <p>In diesem Spiel bist du ein Fisch, der dem großen Haifisch entkommen muss. Schaffst du es?</p>
        </div>
        ...

Ihr könnt das initiale Projekt mit allen Bildern aber ohne Styles hier herunterladen: Startprojekt

Erste Schritte mit Bootstrap

Mon, 01 Jan 0001 00:00:00 +0000

Erste Schritte mit Bootstrap

Für diese Übung starten wir mit einer existierenden Webseite, die nur HTML enthält, aber noch gar keine Styles.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scratch - Fang mich</title>
</head>

<body>
    <div class="content">
        <h1>Scratch Fang-Mich <span class="version">Scratch 3.0</span></h1>

        <div class="intro">
            <img src="images/endgame.png" alt="Endgame">
            <p>In diesem Spiel bist du ein Fisch, der dem großen Haifisch entkommen muss. Schaffst du es?</p>
        </div>
        ...

Ihr könnt das initiale Projekt mit allen Bildern aber ohne Styles hier herunterladen: Startprojekt

Erste Schritte mit Hugo

Mon, 01 Jan 0001 00:00:00 +0000

Erste Schritte mit Hugo

Was ist Hugo

Hugo ist ein statischer Webseitengenerator, der auf der Sprache Go basiert.

Was ist ein statischer Website Generator

Dynamische Webseiten werden erst beim Abruf vom Server generiert (z.B. PHP, ASP.NET). Statische Webseiten bestehen nur aus HTML, JavaScript, CSS und weiteren Resourcen wie Bildern oder Fonts.

Static Site Generators generieren statische Webseiten und ermöglichen damit die Trennung von Layout und Content. Mehr Infos dazu findest du unter https://www.projectival.de/blog/static-site-generator-statische-webseiten-dynamische-webseiten/.

Erste Schritte mit SVG

Mon, 01 Jan 0001 00:00:00 +0000

Erste Schritte mit SVG

Ziel der Übung

In dieser Übung lernst du Scalable Vector Graphics (kurz SVG) kennen. Unser Ziel sind:

Wir wollen verstehen, was SVG ist und wofür es eingesetzt wird.
Wir wollen Grafiken mit SVG in eine HTML-Seite einbauen.
Wir wollen SVG mit JavaScript programmgesteuert erzeugen.
Wir möchten SVG verwenden, um ein mathematisches Prinzip, die Cardanischen Kreise veranschaulichen.

Wenn du nach dieser Übung mehr über SVG lernen willst oder während der Übung Detailfragen hast, kannst du einen Blick auf die SVG Einführung auf w3schools.com werfen.

Feuerwerk-Simulator

Mon, 01 Jan 0001 00:00:00 +0000

Feuerwerksimulator (für AnfängerInnen)

Ziel der Übung

Heute wollen wir gemeinsam einen Feuerwerk-Simulator programmieren. Dabei kannst du das Tippen von Code auf der Tastatur üben und lernst Grundlagen der Programmierung wie Variablen, Schleifen und Funktionen kennen.

Du solltest für diese Übung schon ein wenig Programmiererfahrung mit einer Blockprogrammiersprache wie Scratch oder Snap! haben. Falls du noch nie Programmcode eingetippt hast, solltest du auch etwas Geduld mitbringen. Es ist am Anfang nicht immer leicht, die vielen Sonderzeichen im Code auf der Tastatur zu finden. Halte durch, Übung macht den Meister!

Fraktal Baum mit snap.svg

Mon, 01 Jan 0001 00:00:00 +0000

Zeichne einen Fraktal Baum mit snap.svg

Ziel der Übung

Zeichne einen Baum in SVG. Starte dazu mit einer vertikalen Linie als Stamm.

Am oberen Ende der Linie zeichne zwei weitere Linien - eine etwas nach links und eine etwas nach rechts geneigt. Die neuen beiden Linien sind etwas kürzer als die erste Linie für den Stamm. In dieser zweiten Ebene erhältst du so zwei Zweige.

Am jeweils oberen Ende der beiden neuen Linie zweichne wieder jeweils zwei neue nach links und rechts geneigte Linien die etwas kürzer als die vorige Linie sind. In dieser dritten Ebene erhältst du so jetzt vier Zweige.

Halloween - Catch the Treat

Mon, 01 Jan 0001 00:00:00 +0000

Halloween - Catch the Treats

Videoanleitung

Einleitung

Willkommen bei unserem Halloween-Spiel 🎃. Wir programmieren gemeinsam ein Spiel, bei dem freundliche Monster 👻 gruselige “Süßigkeiten” herumwerfen, die du erwischen musst. Wenn du sie nicht erwischst, verlierst du ein Leben. Wenn du alle Leben verloren hast, ist das Spiel vorbei. Wer schafft am meisten Punkte?

Interessante Info am Rande, die für diejenigen interessant sein könnte, die schon etwas mehr Erfahrung haben: Wir programmieren in dieser Übung mit der Programmiersprache TypeScript. Unsere Entwicklungsumgebung ist Stackblitz. Als Grafikbibliothek verwenden wir p5js.

Halloween Puzzle

Mon, 01 Jan 0001 00:00:00 +0000

Halloween Puzzle

Willkommen bei unserem Halloween-Puzzle 🎃. Wir programmieren gemeinsam ein Spiel, bei dem du verschiedene Halloween-Symbole in Gruppen zusammenfügen musst. Wie viele Punkte schaffst du?

Videoanleitung

Anleitung

In der Übungsanleitung findest du alle Schritte zur Programmierung des Spiels:

Zur Übungsanleitung

Den Startercode findest du unter https://stackblitz.com/edit/digiferien-2024-starter. Wenn du das fertige Spiel probieren möchtest, es ist unter https://stackblitz.com/edit/digiferien-2024 zu finden.

Hangman

Mon, 01 Jan 0001 00:00:00 +0000

Hangman

Ziel der Übung

Der erste Spieler gibt ein Wort ein, das vom zweiten Spieler erraten werden muss.

Zuerst sieht der zweite Spieler nur ein Sternchen für jeden Buchstaben. Jeder erratene Buchstabe wird aufgedeckt. Für jeden falsch geratenen Buchstaben wird der Galgen um eine Linie erweitert. Ziel ist es, das Wort zu erraten bevor der Galgen fertig ist.

Grundgerüst der HTML Seite

Erstelle als erstes eine neue HTML Seite mit dem Namen hangman.html.

HTML & CSS Hands On

Mon, 01 Jan 0001 00:00:00 +0000

HTML & CSS Hands On

Die folgenden Übungen kannst du direkt online in JSFiddle machen. Du brauchst dafür kein installiertes Tool. Für jede Übung wird das gewünschte Ergebnis dargestellt und du findest jeweils einen Link zur Ausgangsbasis für das Beispiel.

HTML

Basic Tags

Im ersten Beispiel werden die am häufigsten verwendeten HTML Element verwendet.

Startprojekt öffnen

Formatierung mit Tags

In diesem Beispiel geht es um die verschiedenen Optionen, um Text direkt durch HTML Elemente zu formatieren.

Labyrinth-Spiel mit Scratch und JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Labyrinth-Spiel mit Scratch und JavaScript

Ziel der Übung

In dieser Übung programmierst du ein Labyrinth-Spiel erst mit Scratch und danach mit JavaScript. So lernst du, das, was du in Scratch über Programmieren gelernt hast, in einer textbasierten Programmiersprache anzuwenden.

Es ist wichtig, dass du vor dieser Übung die Scratch-Variante dieses Spiels genau angesehen oder noch besser selbst programmiert hast.

Spielbeschreibung

Steuere mit den Cursortasten den Spieler (blaue Kugel). Dein Ziel ist es, das mit “X” markierte Ziel zu erreichen.

Mandala

Mon, 01 Jan 0001 00:00:00 +0000

Mandala mit Code malen

Was ist ein Mandala?

Stell dir vor, du zeichnest einen Kreis und füllst ihn mit vielen schönen Mustern, Formen und Farben. Es ist wie ein kompliziertes Malbuch, aber alles ist in einem Kreis angeordnet. Dieses Muster kann dir helfen, dich zu entspannen oder über das Leben und die Welt nachzudenken. In manchen Kulturen glauben die Menschen sogar, dass Mandalas ihnen helfen können, sich besser auf ihre Gedanken zu konzentrieren oder sich mit dem Universum zu verbinden.

Monster Run

Mon, 01 Jan 0001 00:00:00 +0000

Monster Run

Einleitung

Wisst ihr was ein Jump ’n’ Run-Spiel ist? Man steuert als Spielerin oder Spieler eine kleine Figur und läuft mir ihr durch ein Labyrinth. Meistens muss sich dabei gegen verschiedene Gegner behaupten. In diesem Workshop zeigt euch Rainer Grundlagen, die man zum Programmieren eines Jump ’n’ Run in p5js braucht. Er baut mich euch einen Monsterspaziergang.

Grafiken

In dieser Übung verwenden wir Grafiken der Plattform craftpix.net. Du findest dort viele Grafiken für Spiele aller Art. Einige der Grafik-Pakete gibt es auch kostenlos. In diesem Spiel verwenden wir die Bilder aus folgenden, kostenlosen Paketen:

Moorhuhn Jagd

Mon, 01 Jan 0001 00:00:00 +0000

Moorhuhn Jagd

Einleitung

In dieser Übung programmierst du das Spiel Moorhuhn Jagd erst mit Scratch und danach mit TypeScript und p5.js. In dieser Anleitung gehen wir davon aus, dass du schon etwas Erfahrung mit TypeScript und p5.js hast.

Das Scratch-Spiel

Damit du mit dem Spielprinzip vertraut wirst, baue das Spiel zuerst mit Scratch nach. Die Anleitung dazu findest du hier. Dieser Schritt ist wirklich wichtig, nicht auslassen!

Präsentationen mit HTML statt PowerPoint

Mon, 01 Jan 0001 00:00:00 +0000

Präsentationen mit HTML statt PowerPoint

Ziel der Übung

Egal ob in der Schule, auf der Uni oder später im Beruf - es kommt immer wieder vor, dass man Präsentationen erstellen muss. Die meisten greifen dabei zu Microsoft PowerPoint.

Das muss aber nicht sein. Als Coder mit HTML- und CSS-Kenntnissen kann man beeindruckende Präsentationen für den Browser erstellen. In dieser Übung lernst du Reveal.js kennen. Mit Grundkenntnissen in HTML und CSS kannst du mit Reveal deine nächste Präsentation ganz ohne PowerPoint erledigen.

Space Invaders

Mon, 01 Jan 0001 00:00:00 +0000

Space Invaders

We will follow another amazing Tutorial by Ania Kubów to build our very own Space Invaders game. If you didn’t do so yet head to her Youtube channel and subscribe or give her a like because her content is amazing.

Set up our files

As usual we will use codesandbox.io for our implementation. The entrypoint for our website is our index.html file. In this file we need to add a link to our styles.css and a reference to our app.js. In order to check that our linking works fine I will add some dummy code to show an alert in our JavaScript file alert("Hey Space Invaders") and a body { background-color: hotpink } to our CSS file. Now when we refresh or open our HTML file we should see a pink background a pop up greeting the Space Invaders.

Spaß mit Bezier-Kurven

Mon, 01 Jan 0001 00:00:00 +0000

Spaß mit Bezier-Kuven

Einleitung

Kaum jemand von euch wird schon einmal etwas von Bezier-Kurven gehört haben. Unsere Welt ist aber voll davon. Sie werden beim Design von physischen Dingen wie Autos genauso eingesetzt wie bei Computerspielen. Im folgenden Bild siehst du ein Beispiel. Wenn man sich die Form des Autos ansieht, entdeckt man eine Menge Kurven. Diese Kurven sind Bezier-Kurven.

Im Bild sind bei weitem nicht alle Bezier-Kurven hervorgehoben. Findest du noch weitere?

SVG Schreibtrainer

Mon, 01 Jan 0001 00:00:00 +0000

SVG Schreibtrainer

Ziel der Übung

Du baust ein Spiel das dir hilft, deine Tipp-Geschwindigkeit zu verbessern.

Am oberen Spielfeldrand erscheinen Kreise mit Buchstaben, die nach unten fallen. Tippe den Buchstaben, bevor er den unteren Rand des Spielfelds berührt.

Auf Wikipedia findest du eine Grafik zum Zehnfingersystem, die erklärt, welche Taste mit welchem Finger gedrückt werden soll.

Grundgerüst der HTML Seite

Erstelle als erstes eine neue HTML Seite mit dem Namen schreibtrainer.html.

Tetris

Mon, 01 Jan 0001 00:00:00 +0000

Tetris

In this session we will impelment a version of the TETRIS game based on a video by the amazin Ania Kubów. Check out her youtube channel –> here <– .

Project setup and file linking

We will need three files - a index.html that contains the markup of our website, an app.js file that contains our logic and a styles.css for styling.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="app.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <title>Tetris</title>
    </head>
    <body>

    </body>
</html>

In order to verify that our linking works out properly we put an alert('Hello Tetris') to the app.js file and a body { background: hotpink; } to the styles.css file. We should now see a popup containing the text “Hello Tetris” when we reload the page and the pages background should have a specified color.