CSS on CoderDojo Linz

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.

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

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.

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.

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.

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.