LEKTION 1

Als Erstes benötigen wir ein Programm, welches uns beim Schreiben des Quelltextes unterstützt. Bestimmt hast du schon mal etwas von Visual Studio Code gehört.
Wie das Messer des Metzgers, ist VSCode das Werkzeug des Programmierers, VSCode konnte sich gegenüber anderen Entwicklerumgebungen durchsetzen: Es ist kostenlos, beinhaltet so etwas wie einen App-Store für Erweiterungen, ist leichtgewichtig und besticht durch eine große Verbreitung.
Visual Studio Code ist für alle Plattformen verfügbar, das heißt, du kannst es auf Linux, MS Windows oder Mac installieren.

Die Installation ist sehr einfach, respektive, so wie du es von allen anderen Programmen auch gewohnt bist. Solltest du dennoch Probleme haben, empfehle ich dir, auf YouTube mit dem Suchbegriff Visual Studio Code Installation zu suchen. Ich fand bei meinem Suchversuch sehr viele Videos, es sollte also kein Problem sein, auf YT Hilfe zu finden.
Downloade und installiere nun VSCode:
Download Visual Studio Code

Nachdem du VSCode installiert hast, kannst du in den Einstellungen settings (unten links) deine Sprache einstellen und wenn du lustig bist kannst du ein Design wählen, welches dir gefällt. Ich werde dir in den späteren Lektionen gezielt zeigen, welche Erweiterungen du wofür benötigst und wie sie gesucht und eingebunden werden, aber auch das ist very simple. Vorerst kannst du ganz entspannt VSCode beiseite lassen, wir machen mit dem nächsten Punkt weiter. 

Nun geht es weiter mit dem Anlegen eines neuen Projekts. Dazu musst du nichts Weiteres tun, als auf deinem lokalen Rechner einen neuen Ordner zu erstellen und ihm einen geeigneten Namen geben.
Wie wäre es mit dem Namen: folderHomepage.  Es spielt keine Rolle, ob du den Ordner unter Dokumente oder auf dem Desktop oder sonst wo anlegen willst. Das war’s auch schon.  

Und schon kommen wir zum letzten Teil dieser wichtigen Lektion. Wir haben den Werkzeugkasten VSCode und wir haben den Projektordner, den wir Homepage benannt haben. Nun kommen wir zum Herzstück einer jeden Website, die sogenannte "index.html" Datei. Immer wenn du im Browser eine Internet Adresse eingibst wie z.B. www.beispiel.com, dann verweist die Domainadresse auf eine IP auf dessen Server die Website liegt, die index.html Datei wird dabei immer als erstes geöffnet, deshalb ist es verständlicherweise auch wichtig, dass wir als nächstes diese Datei erstellen.  

Dazu öffnen wir nun Visual Studio Code. Jetzt werden wir als Erstes unseren Projektordner in VSCode öffnen, dazu gehst du oben links auf "Datei" und wählst "Ordner öffnen" aus. Selbstverständlich suchst du jetzt deinen Homepage-Ordner und wählst ihn aus. Nun kannst du in der zweiten Kolonne nach den Icons dein Projekt Homepage erkennen. Da klickst du drauf und erstellst ein neues File mit dem Namen index.html
(WICHTIG: Das muss genauso heißen und es muss alles kleingeschrieben sein) .
Das ganz große Fenster ist unser Arbeitsbereich. Hier schreiben wir unseren Code in die index.html Datei rein. Wenn du mehrere Files offen hast, dann kannst du oben mit den Reitern zwischen den Dateien springen, so wie es bei Excel oder den Browsertabs auch funktioniert. 

Eigentlich wäre nun die erste Lektion abgeschlossen, aber wir machen noch schnell das Grundgerüst einer jeden HTML Datei. Auf die Einzelheiten gehen wir in der nächsten Lektion noch ausführlich ein, doch jetzt platzieren wir in der Index-Datei einfach mal ein Ausrufezeichen "!", da VSCode sofort erkennt, dass wir nun ein HTML-Grundgerüst schreiben wollen, drücken wir sofort ENTER und Simsalabim erstellt VSCode das beschriebene Grundgerüst, ohne dass du dir die Finger wund schreiben musst. Cool oder? 

Als Praktiker und visueller Mensch, habe ich für dich ein kurzes Video erstellt. so siehst du ganz genau was ich beschrieben habe und kannst es easy nachmachen. Es kann sein, dass es bei dir ein wenig anders aussieht da ich mit dem Betriebssystem Linux Mint arbeite.

( i ) Mit dem Rechteck neben dem Lautsprecher solltest du das Video in den Vollbildmodus setzten.

LEKTION 2

In der zweiten Lektion widmen wir uns voll und ganz dem HTML. Wie versprochen belästige ich dich noch nicht damit, was HTML abgekürzt heißt, aber man kann sagen: Seit es das WWW gibt, gibt es auch HTML.

HTML ist quasi das Skelett deiner Website. Dieses Skelett ist bereits so mächtig, dass du, wenn du das ganze HTML-Potenzial ausnutzen würdest, bereits eine ordentliche Homepage kreieren könntest.

In der Regel ist es aber so, dass man mit HTML wirklich nur das Grundgerüst baut. Mit CSS stylst du danach die HTML-Elemente, das heisst du gibst ihnen Farbe, abgerundete Ecken, eine schöne Schrift und so weiter. Die letzte Programmiersprache im Bunde ist Javascript (js). Javascript ist im Übrigen die einzige Sprache, von der man wirklich behaupten kann, dass sie eine Programmiersprache ist, mit der man programmieren kann. Die anderen Sprachen sind eigentlich nur Quelltext, den man schreibt, aber nicht programmiert. Sei’s drumm, das war nur Glugscheißerei. HTML ist die Quellsprache des Internets. 

Javascript gibt deiner Seite Bewegung, klar, modernes CSS kann das zwar auch, aber ursprünglich wurde JS für Dynamik und Logik entwickelt. Heute ist JS überall anzutreffen und eine der bedeutendsten Programmiersprachen, sowohl clientseitig als auch serverseitig, aber auch darum kümmern wir uns später, viel später! In dieser Lektion kümmern wir uns ausschließlich um HMTL, also ab geht die Post.

Ich kann dir jetzt schon sagen, diese Lektion geht ein wenig länger, denn HTML ist einfach die absolute Basis. Wenn du HTML verstanden hast, dann werden die nächsten Lektionen CSS und JS ein Kinderspiel, denn wir benutzen in CSS und JS immer Elemente aus dem HTML-Quelltext und verändern oder bewegen eines dieser Elemente.  Du weißt also dann bereits, was du nun stylst oder veränderst oder bewegst.
So,... aber jetzt müssen wir wirklich mit dem HTML-Zeug beginnen. Es tut mir leid, um ein wenig Theorie kommen wir jetzt nicht drum rum.

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title> Meine Homepage :-) </title>
        </head>

        <body>
                
        </body>
    </html>                    
                

Schauen wir uns nochmals an (oben), wie das Grundgerüst aussieht und was es dort für grundsätzliche Elemente gibt. Ist dir eigentlich schon aufgefallen, dass alle Elemente immer mit einer öffnenden eckigen Klammer beginnen und mit einer schließenden Klammer enden?

<> </>

Diese Klammern nennt man Tags, von denen gibt es verschiedene. Hier sehen wir das eigentliche HTML Tag.

<!Doktype html> ... </html>

Sie macht klar, dass alles, was innerhalb dieses Tag's steht, eben prinzipiell nach den Regeln von HTML verarbeitet wird. Sollte dies innerhalb des HTML-Tag's nicht der Fall sein, dann wird es nochmals mit einem HTML-Tag angekündigt, z. B. ein Script:

<script> </script>

Alles, was hinter dem schließenden HTML-Tag steht, wird nicht mehr als HTML behandelt.

</html>

Wir gehen jetzt einmal das Grundgerüst von oben bis unten durch, danach wirst du verstehen, wie der Hase bei HTML läuft: 

• <html lang="de">
  Gibt an in welcher Landesprache du deine Homepage betreibst, das war früher nicht so wichtig, aber heute ist es sehr wichtig, anhand von dem Tag indiziert Google, Bing und Co deine Seite und weiss zu welchem Sprachraum deine Seite gehört. Dieses Tag muss übrigens nicht geschlossen werden, du siehst es hat auch keine Klammer mit einem "/", es gibt noch andere Tags welche nicht geschlossen werden müssen.
• <head>
  Alles was im Kopf steht dient dem Browser als auch den Suchmaschienen und gibt ihnen technische Informationen zurück, nichts davon bekommt dein Besucher zu sehen ausser vielleicht der Titel deiner Seite welcher später den Tab bezeichnet.
• <meta charset="UTF-8">
  Ebenfalls sehr wichtig. Wenn du willst, dass deine Seite alle Ö,Ü,Ä und andere Umlaute richtig darstellen soll.
• <meta name="viewport">
  In der modernen Welt gibt es unzählige verschiedene Geräte, welche internettauglich sind: PC, Tablets, Smartphones usw. Viewport hilft, dass deine Seite ein wenig besser skaliert wird und der Zoom auf die Gerätebreite eingestellt wird.
• <title>
  Der Titel, das sagt doch schon alles. Gib deiner Seite einen Titel und schreibe ihn zwischen die Tags. Die Tabs werden im Chrome, Edge usw. mit dem Titel beschriftet.
• <body>
  Alles was im Body steht, wird dein Besucher sehen können, hier kommt all dein Inhalt rein der die Seite darstellen soll.

Legen wir los, machen wir endlich mal etwas, das ein sichtbares Ergebnis bringt. Öffne nun dein VSCode, wir schreiben nun in unseren Body eine Überschrift. Genau genommen schreiben wir mehrere Überschriften.
Überschriften schreiben wir mit dem h Tag, die größte und Hauptüberschrift ist h1. Es gibt insgesamt sechs Überschriftebenen, h1 bis h6 und genau das machen wir jetzt mal.  Im Bereich des Body schreiben wir <h1>Meine Hauptüberschrift</h1> und das machen wir untereinander mit allen anderen Überschriftsebenen h2, h3, h4, h5, h6. Wie der Code am Ende aussieht zeige ich dir unten, im Video kannst du sehen wie wir das machen:  

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title> Meine Homepage :-) </title>
        </head>

        <body>
                <h1>Meine Hauptüberschrift</h1>
                <h2>Meine Unterüberschrift</h2>
                <h3>Meine Unterüberschrift</h3>
                <h4>Meine Unterüberschrift</h4>
                <h5>Meine Unterüberschrift</h5>
                <h6>Meine Unterüberschrift</h6>
        </body>
    </html>                    
                

Ergebnis:

Hauptüberschrift

Unterüberschrift

Unterüberschrift

Unterüberschrift

Unterüberschrift

Unterüberschrift

LEKTION 3

So, wir haben uns aufgewärmt, die ersten Gehversuche waren erfolgreich, nun geben wir richtig Gas und starten in der Webentwicklung richtig durch. 

Wir werden jetzt viele verschiedene Tag's erkunden und zumindest die wichtigsten anwenden, wie immer am Ende ein Video, wo du die Theorie in Bild und Ton überprüfen kannst, ob du alles richtig verstanden hast. 

Quick & dirty, wir machen einfach mal drauflos. Es ist mir durchaus bewusst, dass ich dir zu wenig Hintergrundwissen mitgebe und du später auf viele Probleme stoßen wirst, aber das macht nichts, beim Problemlösen lernen wir später Stück für Stück das fehlende Hintergrundwissen und kommen weiter. Am meisten hilft dir Copilot oder Chat-GPT, Youtube Tutorial Videos oder unzählige weitere Websiten die dir kostenlos weiterhelfen und dich auch weiterbringen werden.

<p>

Schauen wir uns einmal das p-Tag an, p steht hier für Paragraph. Obschon eigentlich alles im Body angezeigt wird, empfiehlt es sich, einen Absatz immer in einem p-Tag zu schreiben. Alleine schon die Tatsache, dass ein Paragraph einen standardisierten Abstand einhält, ist schon Gold wert.

    <!DOCTYPE html>
    <html lang="de">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title> Meine Homepage :-) </title>
        </head>

        <body>
                <p>
                    Hier können wir unseren Text reinschreiben, am Besten ganz ganz viel bla bla 
                    oder Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit in hic architecto, 
                    nesciunt atque error assumenda placeat quo fugit repellendus reprehenderit 
                    voluptates aperiam modi incidunt adipisci ut id dicta ipsum?
                </p>
        </body>
    </html>                    
                

Ergebnis:

Hier können wir unseren Text reinschreiben, am Besten ganz ganz viel bla bla oder Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit in hic architecto, nesciunt atque error assumenda placeat quo fugit repellendus reprehenderit voluptates aperiam modi incidunt adipisci ut id dicta ipsum?

<a>

Wie wäre es mit einem Link? Eine Website ohne Link ist keine Website, denn wir sind ja im Internet mit allen und allem verbunden.

Ein link erstellt man mit einem a-Tag, a steht für Anchor (Anker). Wir schauen es uns ein wenig genauer an,

<a href="https://bitterlin.info">bitterlin.info</a>

Hinter href= schreiben wir unsere Zieldomeinadresse in Gänsefüßchen rein. Damit der Besucher sehen kann, wo der Link hinführt, müssen wir ihm das Ziel sichtbar angeben. Das machen wir wie immer zwischen dem öffnenden und dem schließenden Tag. Hier zeige ich dir gleich nochmals ein Beispiel. Der Einfacheit halber hier nur noch der Body.  

        <body>
                <a href="https://bitterlin.info">bitterlin.info</a>
        </body>
            

Ergebnis:

bitterlin.info

<br>

Der br-Tag ist ein äußerst praktischer Tag. Mit <br> kannst du einen Zeilenumbruch bewirken. Das br steht für break und kann überall eingesetzt werden. Unkonventionell kann man es auch als horizontaler Abstand vergewaltigen, wobei das doch eher verpönt ist, macht man nämlich zwei <br><br> hintereinander, dann ergibt sich eine Zeile Freiraum.  

Das br-Tag braucht nicht viel erklärung, hier einfach mal ein Beispiel:

        <body>
                <p>
                    Hier kommt ein Umbruch<br>oder hier<br> 
                    und hier 2<br><br>siehst du den Abstand?
                </p>
        </body>
            

Ergebnis:

Hier kommt ein Umbruch
oder hier
und hier 2

siehst du den Abstand?

<hr>

Das hr-Tag ist ein altes Tag, das man heute nicht mehr allzu oft benötigt. Es macht eine durchgehende Trennlinie und wird heute eher mit CSS erstellt.
Ich darf sagen, dass ich so altmodisch bin, dass ich es immer noch oft benutze und dann aber mit CSS individualisiere. So ist z. B. der kleine Strich oben ebenfalls ein hr-Tag, welcher mit CSS auf eine Breite von 20% reduziert wurde.

        <body>
                <h3>schau den Stich unten ↓</h3>
                <hr>
        </body>
            

Ergebnis:

      schau den Stich unten ↓

<img>

Was ist eine Website ohne Bilder? Mit dem img-Tag kannst du Bilder einfügen und mit den Bildern kommen wir bereits fließend zu CSS, denn ein Bild muss schon fast ein wenig gezielt positioniert werden, es muss eine Größe zugeteilt werden, es braucht einen vordefinierten Abstand und am besten noch abgerundete Ecken. Wir kommen also um ein bisschen Style nicht herum.

Wir setzen jetzt hier nur mal ganz lieblos ein Bild ein. Damit schließen wir diese Lektion ab, wir nehmen dann aber das Bild in der nächsten Lektion als Beispiel, um es zu stylen und somit eine Einführung in CSS zu erhalten. Viel Spaß.

        <body>
                <img src="https://bitterlin.info/logo.jpg" alt="Portrait Patrick">
        </body>
            

Wenn du den img-Tag anschaust, dann erkennst du, dass mindestens zwei Parameter angegeben werden müssen. Zum einen der Pfad, also der Ort, wo das Bild abgelegt ist. In meinem Fall liegt es auf meinem Server (sonst könntest du es jetzt nicht sehen), aber du kannst ein Bild in deinen Projektordner ablegen und dann bei src= einfach den Namen des Bildes angeben (z.B src="NameDeinesBildes.jpg").

Dann haben wir noch den alt= Parameter, auch er ist sehr wichtig. Zwei Gründe sprechen für den alt-Parameter, zum einen: Sollte dein Bild am beschriebenen Ort nicht mehr vorhanden sein,  gibt der alt-Parameter, alternativ dem Besucher den Text zurück, der dort drin steht, so weiß der Besucher wenigstens, was hier hätte kommen sollen. Zum anderen ist der alt-Parameter für Sehbehinderte wichtig: Sie können eine Website vorlesen lassen und dann wird der sehbehinderte Besucher so etwas wie: "Bild Portrait Patrick" zu hören bekommen.

Weiter weiss niemand so genau, wie Google mit dem alt-Parameter umgeht, man sagt, dass Google Seiten mit gut definierten alt-Parametern besser indexiert und somit in der Suche weiter nach oben bringt, aber so wirklich wissen tut das niemand.

Ergebnis:

LEKTION 4

Nehmen wir mal den digitalen Mahlkasten hervor und verwirklichen uns am Beispiel unserer neu erstellten Homepage.

CSS ist nichts anderes als eine Sprache, die deinem Browser erklärt, wie ein HTML-Element dargestellt werden soll. Z. B. wollen wir jetzt unsere Hintergrundfarbe verändern, dann haben wir drei Möglichkeiten:

1.) Wir können direkt in den body-Tag < body style="background-color: #fafafa;"> schreiben und schon wird dein Hintergund ein helles cremiges Grau haben. Allerdings ist es verpönt, direkt in die Tags Style reinzuschreiben. Kommen wir zur zweiten Variante.

2.) Wir können Style in den Head schreiben, dafür müssen wir nur im Head ein Style-Tag reinschreiben und können dort unsere Elemente ansprechen (zeige ich später im Video).

3.) Wir können Style in ein externes File schreiben, welches wir im Head in die Seite laden (auch das werde ich im Video behandeln).

Wir behandeln jetzt nur mal den Punkt 1.) theoretisch. Es gibt Dinge, die sind in einem Video in der Praxis einfach besser zu erklären.

Nun schauen wir uns mal die Variante 1.) am Code an. Es geht immer noch darum, den Hintergrund deiner Website von einem langweiligen Weiß in ein modernes Grau zu wechseln. Bei dieser Gelegenheit ändern wir gleich noch die Farbe der Schrift in ein neckisches Rebeccapurple:

    <body style="background-color: #fafafa; color: rebeccapurple;">
        <h1>Helo World</h1>
    </body>
                

Hier sind auch wieder zwei Dinge wichtig: Die Style-Anweisungen, müssen in die öffnende Body-Tag Klammer hineingeschrieben werden, jede Anweisung beginnt mit dem "(WAS)Color:" gefolgt vom "(WIE)Yellowgreen;". Du siehst, das, was wir ansprechen wollen, beenden wir mit einem Doppelpunkt[ : ] Wie wir es haben wollen, beenden wir mit einem Semikolon[ ; ] "immer".

Ergebnis:

<!-- einfach ein text -->, <div>

Auch wenn es nichts mit CSS oder Style zu tun hat, aber wir lernen in der Lektion 4 noch zwei weitere HTML-Tags kennen. Wir lernen was ein Notiz-Tag ist und weiter lernen wir noch was ein div-Tag ist.
Da dieser Kurs für Praktiker ist, schauen wir auch diese zwei Tags direkt im Video bei der praktischen Arbeit an.

Ebenfalls neu ab Lektion 4 kannst du den Quellcode immer am Ende nach dem Video downloaden, so kannst du komfortabel dein Erlerntes kopieren und in deinem eigenen Quelcode einsetzen oder nachlesen. Den Quelltext werde ich immer als .txt Datei zur Verfügung stellen, das gibt weniger Konflikte beim öffnen.

Ich gebe es zu, ich dränge auf das Video und bin mir sicher, du willst auch lieber direkt sehen, was passiert, als hier zu lesen. ...Film ab  -->

Quellcode Lektion 4 zum Download: Lektion_4.txt

LEKTION 5

In der fünften Lektion halte ich mich ein wenig kürzer. Ich denke, die letzte Lektion mit einem Video, welches 45 Minuten dauerte, ist zu lange. Ich will euch nicht vergraulen.

Stell dir vor, du bist der Regisseur eines Films und du hast eine Menge Schauspieler (HTML-Elemente), die du anweisen musst, wie sie sich kleiden und verhalten sollen. CSS (Cascading Style Sheets) ist dein Kostüm- und Regieplan.

CSS-Klasse

Eine CSS-Klasse ist wie eine Gruppe von Schauspielern, die alle das gleiche Kostüm tragen sollen. Du kannst eine Klasse erstellen und sie mehreren HTML-Elementen zuweisen, damit sie alle gleich aussehen. Zum Beispiel, wenn du möchtest, dass alle deine Schauspieler rote Hüte tragen, erstellst du eine Klasse namens .roter-hut und weist sie den entsprechenden Elementen zu.

     
    <head>
        <style> 
            .roter-hut { 
                color: red; 
            } 
        </style> 
    </head>

    <body> 
        <p class="roter-hut">Ich trage einen roten Hut!</p> 
        <p class="roter-hut">Ich auch!</p> 
    </body>
                

CSS-ID

Eine CSS-ID ist wie ein spezielles Kostüm für einen Hauptdarsteller. Jede ID ist einzigartig und kann nur einem einzigen HTML-Element zugewiesen werden. Wenn du möchtest, dass dein Hauptdarsteller einen goldenen Umhang trägt, erstellst du eine ID namens #goldener-umhang und weist sie dem entsprechenden Element zu.

    <head> 
        <style> 
            #goldener-umhang { 
                color: gold; 
            } 
        </style> 
        </head> 

        <body> 
            <p id="goldener-umhang">Ich trage einen goldenen Umhang!</p> 
        </body>
                

Zusammenfassung

Klasse (.roter-hut): Wird für mehrere Elemente verwendet, die gleich aussehen sollen.

ID (#goldener-umhang): Wird für ein einzelnes, einzigartiges Element verwendet.

Keine Angst, wir schauen uns die Sache wie immer im Video praktisch an und dann macht es sofort klick.

Quellcode Lektion 5 zum Download: Lektion_5.txt

LEKTION 6

In der Lektion 6 wollen wir unser bisher angeeignetes Wissen anwenden dabei will ich euch eine Methode zeigen, wie ihr recht schnell in eurem Fortschritt weiterkommt. 

Mit Lesen und Videoschauen kommst du nämlich nicht weiter, du musst selber etwas tun, du musst auf Probleme stoßen und diese selbst lösen können, denn genau um das geht es im Programmieren.  

Aus dem oben benannten Grund, machen wir nun die Reihenfolge genau umgekehrt: Zuerst schauen wir das Video. Im Video werde ich eine x-beliebige Seite kopieren. Wir werden sie nicht mittels "copy & paste" kopieren, wir werden versuchen, eine Seite deiner Wahl anzuschauen und danach werden wir sie möglichst eins zu eins nachmachen und zwar von null. 

Sollte es etwas geben, was ich bisher noch nicht behandelt habe, dann werde ich es anschliessend zum Video schriftlich erklären (also eben umgekehrt).
...und ja, dieses Video muss nun etwas länger gehen.  

Das Video hast du nun geschaut, wir haben mindestens drei einfache Probleme mit Copilot gelöst. Nun bist du dran, suche dir eine einfache Seite im Netz und kopiere sie, lege einfach los und versuche Probleme selbst mit Copilot, Google und Co. zu lösen. 

Mache es nicht wie ich im Video: Wenn du Copilot etwas fragst, dann lese die Antwort vollständig durch und wenn etwas noch nicht ganz klar ist, dann stelle weitere Anschlussfragen. Ich selbst kenne ja die Antwort bereits und wollte dir nur den Weg zeigen. Außerdem sollte das Video möglichst nicht künstlich in die Länge gezogen werden. 

Was wir im Video neu gelernt haben:

Stell dir das & als eine Art "Parkplatzordner" vor, der dir hilft, den Code zu organisieren und zu strukturieren.
Hier ist ein einfaches Beispiel:

<style>
    .button { 
        color: white; 
        background-color: blue; 
        
        &:hover { 
            background-color: darkblue; 
        }
    }     
</style>               
                

In diesem Beispiel:
&:hover bedeutet, dass der Hover-Effekt für das .button-Element gilt.

Vorteile:
* Bessere Lesbarkeit: Dein CSS bleibt übersichtlich und leicht verständlich.
* Weniger Wiederholungen: Du musst den Hauptselektor nicht immer wiederholen.
* Einfachere Wartung: Änderungen am Hauptselektor wirken sich automatisch auf alle verschachtelten Selektoren aus.

Das & ist also wie ein magischer Helfer, der deinen CSS-Code sauber und effizient hält. 🪄✨
Hoffe, das macht es klarer! 😊

Stell dir vor, du bist auf einer Party und du willst unbedingt, dass der DJ immer an der gleichen Stelle bleibt, egal wie wild die Party wird. Das ist genau das, was position: fixed; in CSS macht. Es sorgt dafür, dass ein Element immer an der gleichen Stelle im Browserfenster bleibt, egal wie viel du scrollst.
Hier ist ein einfaches Beispiel:

<style>
    .fixed-element { 
        position: fixed; 
        top: 10px; 
        left: 10px;
    }
</style>
            

<body> 
    <div class="fixed-element">Ich bleibe hier!</div> 
    <p>Scroll mal runter, ich bewege mich nicht.</p> 
    <p>Scroll mal runter, ich bewege mich nicht.</p> 
    <p>Scroll mal runter, ich bewege mich nicht.</p> 
    <p>Scroll mal runter, ich bewege mich nicht.</p> 
    <p>Scroll mal runter, ich bewege mich nicht.</p> 
</body>
            

In diesem Beispiel bleibt das Element mit der Klasse fixed-element immer an der Position 10 Pixel von oben und 10 Pixel von links, egal wie viel du scrollst. Es ist wie ein VIP-Gast auf der Party, der immer im Rampenlicht steht! 🌟 Vorteile von position: fixed;:

* Immer sichtbar: Perfekt für Navigationselemente oder wichtige Hinweise, die immer im Blickfeld bleiben sollen.
* Einfach zu verwenden: Du musst nur die Position angeben, und das Element bleibt dort.
* Unabhängig vom Rest der Seite: Das Element bewegt sich nicht mit dem Rest der Seite, was es ideal für feste Header oder Footer macht.

Stell dir vor, du bist ein Zauberer und möchtest, dass ein Element auf deiner Webseite magisch reagiert, wenn jemand mit der Maus darüber fährt. Das ist genau das, was der :hover-Selektor in CSS macht. Er sorgt dafür, dass ein Element seine Erscheinung ändert, wenn der Benutzer mit der Maus darüber schwebt. Hier ist ein einfaches Beispiel:

<style>
    .magic-button { 
        background-color: lightblue; 
        color: white; 
        padding: 10px 20px; 
        border: none; 
        cursor: pointer; 
    } 
    .magic-button:hover { 
        background-color: darkblue; 
    }
</style>

<body>
    <button class="magic-button">Zauber mich!</button>
</body>
                

In diesem Beispiel:
* Das HTML enthält eine Schaltfläche mit der Klasse magic-button.
* Das CSS definiert den normalen Zustand der Schaltfläche und den Zustand, wenn die Maus darüber schwebt (:hover).

Was passiert hier?
* Im normalen Zustand ist die Schaltfläche hellblau.
* Wenn du mit der Maus darüber fährst, wird sie dunkelblau. 🪄✨

Vorteile des :hover-Selektors:
* Interaktivität: Deine Webseite wird lebendiger und benutzerfreundlicher.
* Visuelles Feedback: Benutzer sehen sofort, dass ein Element interaktiv ist.
* Einfache Implementierung: Du musst nur den :hover-Selektor hinzufügen, um den Effekt zu erzielen.

Der :hover-Selektor ist wie ein kleiner Zaubertrick, der deine Webseite interaktiver und ansprechender macht. 🧙‍♂️✨

Position Flex werde ich später erklären, dazu muss es ein Video separat geben.

Quellcode Lektion 6 zum Download: Lektion_6.txt

LEKTION 7

In der Lektion 7 beschäftigen wir uns damit, wie wir unsere Seite responsiv machen können. Das ist in der heutigen Zeit besonders wichtig, denn die meisten User besuchen deine Seite mit dem Handy und nicht mehr wie früher mit dem PC, weiter sind auch immer  mehr Tablets und Convertibles unterwegs, das macht’s nicht einfacher. 

Responsiv bedeutet, dass eine Webseite so gestaltet ist, dass sie auf verschiedenen Geräten und Bildschirmgrößen gut aussieht und funktioniert. Egal, ob du die Seite auf einem großen Desktop-Monitor, einem Tablet oder einem kleinen Smartphone ansiehst, sie passt sich automatisch an die jeweilige Bildschirmgröße an. Das Ziel ist es, dem Benutzer eine optimale Erfahrung zu bieten, unabhängig davon, welches Gerät er verwendet.
Stell dir vor, du besuchst eine Webseite auf deinem Computer und alles sieht perfekt aus. Wenn du dieselbe Seite auf deinem Handy öffnest, könnte der Text zu klein sein oder die Bilder könnten nicht richtig angezeigt werden. Eine responsive Webseite löst dieses Problem, indem sie das Layout und die Inhalte dynamisch anpasst. Ein Beispiel:
Auf einem großen Bildschirm könnten mehrere Spalten nebeneinander angezeigt werden, während auf einem kleinen Bildschirm diese Spalten untereinander angeordnet werden, damit alles gut lesbar bleibt.

Responsiv kann man sehr passgenau gestalten. Teure Webseiten werden auf alle erdenklichen Displaygrössen einzeln angepasst. Ich will dich noch nicht überfordern, wir beginnen nur mal mit dem Unterschied: Landscape oder Portrait Mode (Quer- oder Hochformat).  Das ist sehr einfach und du wirst es sofort verstehen können und in 90 % aller Fälle kann das bereits reichen.

Ich glaube, es hat sich ganz gut eingependelt.
Wir beginnen gleich wieder mit dem Video als Erstes.

@media(orientation: portrait)

Würdest du Mister Spock vom Raumschiff Enterprise fragen, was @media(orientation:portrait) ist, dann würde in ungefähr eine solche Antwort kommen:

Logisch betrachtet ist @media(orientation: portrait) ein CSS-Befehl, der spezifische Styles nur dann anwendet, wenn der Bildschirm im Hochformat ist. Dies bedeutet, dass der Code nur dann aktiviert wird, wenn das Gerät aufrecht gehalten wird.
Ein Beispiel:

<style>
    @media (orientation: portrait) { 
        body { 
            background-color: pink; 
        } 
    }
</style>
                

Dies stellt sicher, dass der Hintergrund rosa wird, wenn der Bildschirm im Hochformat ist. Es ist ein effizienter und präziser Weg, um sicherzustellen, dass deine Webseite auf verschiedenen Geräten optimal aussieht. Faszinierend.

display:flex;

Was meint unser Mister Spock zu display flex?

"Die CSS-Eigenschaft display: flex ist eine logische Methode zur Anordnung von Elementen in einem Container. Sie ermöglicht eine flexible und effiziente Verteilung des verfügbaren Raums zwischen den Elementen, unabhängig von ihrer Größe. Dies wird durch die Verwendung von flexiblen Boxen erreicht, die sich an die Größe des Containers anpassen. Die Flexbox-Technik ist besonders nützlich, um responsive Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen können. Logisch und effizient, wie es die Vulkanier bevorzugen würden."
🖖

Was noch wichtig ist: Ich bin im Video selbst wieder mal darauf hereingefallen: display:flex muss natürlich immer im darüberliegenden div angegeben werden und nicht bei den Elementen, wleche flex angeordnet werden sollen. 

Quellcode Lektion 7 zum Download: Lektion_7.txt

LEKTION 8

In der Lektion 8 werden wir erkunden, wie man CSS auslagern kann und somit mehr Ordnung erhält.

Externe CSS-Dateien sind eine großartige Möglichkeit, das Styling deiner Webseite zu organisieren und zu optimieren. Hier sind einige Vorteile:

* Trennung von Inhalt und Design: Durch die Verwendung externer CSS-Dateien kannst du den HTML-Code (Inhalt) von den CSS-Regeln (Design) trennen. Das macht den Code übersichtlicher und leichter zu warten.

* Wiederverwendbarkeit: Du kannst eine einzige CSS-Datei für mehrere HTML-Seiten verwenden. Das bedeutet, dass du Änderungen am Design nur einmal in der CSS-Datei vornehmen musst, und diese Änderungen werden auf alle verknüpften Seiten angewendet.

* Schnellere Ladezeiten: Wenn du eine externe CSS-Datei verwendest, wird sie einmal vom Browser heruntergeladen und dann im Cache gespeichert. Bei nachfolgenden Seitenaufrufen muss die Datei nicht erneut geladen werden, was die Ladezeiten verkürzt.

* Einfachere Wartung: Änderungen am Design können zentral in der CSS-Datei vorgenommen werden, ohne dass du jede HTML-Seite einzeln bearbeiten musst. Das spart Zeit und reduziert die Fehleranfälligkeit.

* Konsistenz: Durch die Verwendung einer einzigen CSS-Datei für mehrere Seiten kannst du sicherstellen, dass das Design auf allen Seiten deiner Webseite einheitlich ist.

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

Mit diesem Code im head-Tag (Achtung: kein style-tag) ... wird das File mit dem Namen "style.css" in deine Webside importiert.

Nachtrag zum Video

Priorität:
1) Inline-CSS hat die höchste Priorität, da es direkt im HTML-Element definiert ist.
2) Internal-CSS hat die mittlere Priorität und überschreibt externe Styles, aber nicht Inline-Styles.
3) External-CSS hat die niedrigste Priorität, wird aber als Basis für die meisten Styles verwendet.

Google-Fonts vor dem External-css:
Google Fonts sollten vor dem externen Stylesheet importiert werden, um sicherzustellen, dass die Schriftarten geladen und verfügbar sind, bevor die restlichen Styles angewendet werden.

Quellcode Lektion 8 (html) zum Download: Lektion_8-html.txt

Quellcode Lektion 8 (css) zum Download: Lektion_8-css.txt

Quellcode Lektion 8 (css_mobile) zum Download: Lektion_8-css-mobile.txt

LEKTION 9

Kostenloses Webhosting.

Als Erstes will ich dir zeigen, wie du deine Seite kostenlos der Öffentlichkeit bereitstellen kannst. Ich will aber klarstellen, dass ich nicht wirklich ein Fan von kostenlosen Lösungen bin. Kostenlos bedeutet immer und in jedem Fall irgendeine Einschränkung oder Fremdwerbung. Wir spielen jetzt mal eine kostenlose Variante durch. In der zweiten Lektion zum Thema Veröffentlichen nehmen wir dann eine kostenpflichtige, welche ich dir ans Herz legen würde.  Kostenpflichtiges Webhosting ist in der Regel nicht so weltbewegend teuer, aber wir gehen jetzt erst mal "for free" weiter.

1. Wähle einen kostenlosen Hosting-Anbieter: Es gibt viele Anbieter, die kostenloses Hosting anbieten, wie z.B. GitHub Pages, Netlify oder InfinityFree. Für diese Anleitung verwenden wir GitHub Pages.

2. Erstelle ein GitHub-Konto: Wenn du noch kein Konto hast, gehe zu GitHub https://github.com und registriere dich.

Achtung: Dein Username wird später automatisch zu deiner Internetadresse, z.B. https://username.github.io/home, wähle also mit Bedacht deinen Benutzernamen, wenn du dich registrierst.

3. Erstelle ein neues Repository:
- Klicke auf das Pluszeichen (+) in der oberen rechten Ecke und wähle "New repository".
- Gib deinem Repository einen Namen (In meinem Fall z.B. "Patricks-Homepage") und stelle sicher, dass es öffentlich ist.
- Klicke auf "Create repository".

4. Füge deine HTML-Dateien hinzu:
- Klicke auf "Upload files" und ziehe deine HTML-Dateien in das Upload-Fenster.
- Klicke auf "Commit changes", um die Dateien zu speichern.

5. Aktiviere GitHub Pages:
- Gehe zu den Einstellungen deines Repositorys.
- Scrolle nach unten zu "GitHub Pages".
- Wähle unter "Source" den Branch "main" und den Ordner "root".
- Klicke auf "Save".

6. Zugriff auf deine Website:
- Nach einigen Minuten sollte deine Website unter:
"https://[dein-github-benutzername].github.io/[repository-name]" erreichbar sein.

Das war's! Deine HTML-Seite ist jetzt kostenlos gehostet.

Kostenloser Nickname.

Ich sage es euch gleich zu Beginn, von kostenlosen Nicknames rate ich definitiv ab.
Tatsächlich gibt es sie nämlich gar nicht mehr. Früher konnte man kostenlose Nicknames wie z.B. ".to" beziehen, aber in der Zwischenzeit hat Meta den Anbieter für solche kostenlosen .to Domainadressen verklagt (aus welchen Gründen auch immer). Du kannst aber immer noch sogenannte Subdomains kostenlos und absolut legal registrieren, z. B. "[deinName].mooo.to" und ähnlich lustige Endungen. 

Allerdings haben sie viele Nachteile
Zum einen ist für jeden Besucher deiner Seite klar, dass die Webadresse minderwertig ist, zum anderen hast du selbst keine Rechte darauf und musst damit rechnen, dass nach drei Monaten deine Adresse plötzlich ins Leere geht. Alleine schon diese zwei Gründe sind für mich selbst ein "no go".

Ich habe euch einen Link angehängt, wo ihr eine solche kostenlose Subdomain registrieren könnt, aber sei gewiss, es ist eine Frimelei und zu GitHub geht das nicht wirklich. Aus diesem Grunde habe ich das Tutorial-Video abgebrochen. Ich kann euch das nicht mit gutem Gewissen empfehlen, darum lass ich es.

Link zum Anbieter: freedns.afraid.org

Alternativ würde ich euch empfehlen, schon bei der Github-Registration darauf zu achten, dass du einen prägnanten, kurzen Username wählst und danach das Repository ebenfalls kurz und knapp „home" nennst.

So kannst du dein Nickname optimieren. Als Beispiel finde ich:

praxis-meier.github.io/home

...nicht so unakzeptabel.

LEKTION 10

Kostenpflichtiges Webhosting.

Okey, nun vergiss gleich wieder diesen Gratisquatsch, wenn du eine seriöse Seite haben willst, welche eine anständige Internetadresse haben soll, z. B. www.deine-firma.com und du das Ganze werbefrei in anständiger Geschwindigkeit haben willst, dann führt kein Weg an einem kostenpflichtigen Webhosting vorbei.
…Es sei denn, du willst dir die Mühe machen, einen Server selbst zu betreiben, aber das glaube ich nicht. Bevor du dir Gedanken über eine korrekte & sichere Serverkonfiguration machen willst, lernst du lieber erst mal mit mir, wie man eine professionelle Website programmiert. Wir sind immer noch ganz am Anfang und Server zu konfigurieren ist High Level, glaube mir.

Webhostinganbieter gibt es wie Sand am Meer, Es gibt teure, billige, spezialisierte auf WordPress, Python oder sonst was. Du hast also mit Sicherheit die Qual der Wahl. Ich selbst bin seit vielen Jahrzehnten Metanet-Kunde. Für euch habe ich mal Copilot gefragt, was denn die Vorteile von Metanet als Hosting-Anbieter seien und zumindest aus meiner Sicht kann ich mich mit der vorwiegend positiven Antwort identifizieren resp. die Fakten als wahr attestieren.

Doch schauen wir uns doch mal die Antwort an:
Metanet bietet eine Vielzahl von Vorteilen für Ihr Hosting:
- Schneller und zuverlässiger Support: Sie können sich auf einen engagierten Kundenservice verlassen.
- Pfeilschnelle Website-Performance: Dank optimierter Server und Technologien.
- 99,9 % Netzwerkverfügbarkeit: Ihre Website ist nahezu immer erreichbar.
- Schweizer Rechenzentren: Ihre Daten werden sicher in der Schweiz gehostet.
- Umfangreiche Tools und Features: Von automatischen Backups bis hin zu Sicherheitsupdates.
- Einfache Bedienung: Ideal für Anfänger und Fortgeschrittene.
- Attraktive Preise: Hosting-Pakete ab CHF 9.90 pro Monat.

Bitte bedenke, dass es im World Wide Web keinen Patriotismus gibt. Du kannst auch einen anderen Hostinganbieter nehmen z.B. einer aus Deutschland wenn du in D lebst, aber auch bei Metanet kannst du eine .de .at oder .com Adressen schützen lassen, dies währe kein Hinderungsgrund.
Es gibt aus meiner Sicht generell keinen Grund, einen Hostinganbieter aus dem Heimatland zu wählen.
Weiter darf ich sagen, dass ich keinerlei Vorteile habe, wenn du bei Metanet ein Hosting wählst. Fühle dich also frei, zu nehmen, was du willst. Ich empfehle dir Metanet, weil ich seit Jahrzenten dort Kunde bin und die Qualität als auch das Plesk-Desk sehr zu schätzen weis, weiter sind aus meiner Sicht die Preise für ein Qualitätsprodukt und Support absolut fair.

Link zu Metanet: metanet.ch

Im Video gebe ich dir einen kleinen Rundumblick, so kannst du selbst entscheiden, ob es dir gefällt.

LEKTION 11

Was ist Javascript?

JavaScript ist eine Programmiersprache, die hauptsächlich verwendet wird, um Webseiten interaktiv zu gestalten. Stell dir vor, du hast eine einfache Webseite mit HTML (das ist wie das Skelett einer Webseite, das ihre Struktur definiert) und CSS (das ist wie die Kleidung und das Make-up, das die Webseite hübsch und attraktiv macht).

Aber jetzt willst du, dass die Webseite auch Dinge tun kann, wie z.B. auf Knöpfe klicken, Informationen ausfüllen oder dynamisch Inhalte ändern. Hier kommt JavaScript ins Spiel! JavaScript gibt deiner Webseite "Leben" und ermöglicht es, auf Aktionen des Nutzers zu reagieren.

Ein paar Beispiele, was du mit JavaScript machen kannst:
- Pop-up-Nachrichten anzeigen
- Inhalte dynamisch ändern, ohne die Seite neu zu laden
- Formulare validieren, bevor sie gesendet werden
- Animationen erstellen
- Daten von Servern laden und anzeigen
- Berechnungen

Genau gleich wie beim CSS kannst du JavaScript entweder inline in die Seite einfügen oder mittels einer externen Datei. Wie beim CSS beginnen wir erst mal mit der Inline-Methode. Du kannst JavaScript direkt in deinem HTML-Dokument innerhalb eines <script>-Tags einfügen. Wir machen das zuerst mal innerhalb des Body's aber als letzter Tag.

Beispiel:
In diesem Beispiel hast du einen Button welcher bei Click eine Pop-Up Nachricht einblendet.

    <body>
        <button type="button" id="buttonOne">Click mich</button>

        <script>
            document.getElementById("buttonOne").addEventListener("click", function() {
            alert("Hallo, das ist eine JavaScript-Nachricht!");
            });
        </script>
    </body>                    
                

Mit diesem einfachen Beispiel werden wir im Video beginnen.

Quellcode Lektion 11 (html) zum Download: Lektion_11-html.txt

Quellcode Lektion 11 (css) zum Download: Lektion_11-css.txt

Quellcode Lektion 11 (css_mobile) zum Download: Lektion_11-css-mobile.txt

LEKTION 12

Variablen

Nun wird alles ein wenig theoretisch, aber keine Sorge, im Video erkläre ich alles an praktischen Beispielen. Dennoch rate ich dir, die schriftliche Erklärung zu lesen. Variablen sind eines der wichtigsten, wenn nicht das wichtigste Prinzip, das du beim Programmieren verstehen musst.

Was sind Variablen?
Eine Variable ist wie eine Box mit einem Namen, in die du Daten legen kannst. Wenn du den Namen der Box benutzt, kannst du den Inhalt der Box ansehen oder ändern.

Es gibt verschiedene Typen von Variablen:
In JavaScript gibt es drei Hauptwege, um Variablen zu deklarieren: var, let, und const. Jeder hat seine eigenen Besonderheiten:

Typ: var:
Existiert seit den Anfängen von JavaScript.
Hat funktionale oder globale Reichweite.
Kann neu deklariert und neu zugewiesen werden.
Beispiel:

    var variable1 = "Hallo";
    alert(variable1); 

    variable1 = "Welt";
    alert(variable1); 
                

Ausgabe: Beim ersten Pop-up wird "Hallo" im Fenster stehen, beim zweiten Mal wird "Welt" im Fenster stehen, obwohl es in beiden Fällen die gleiche Variable ist.

Typ: let:
Eingeführt in ES6 (ECMAScript 2015).
Hat Block-Reichweite, d.h., es ist nur innerhalb des Blockes (z.B. Schleifen, Bedingungen) zugänglich, in dem es definiert wurde.
Kann neu zugewiesen, aber nicht neu deklariert werden. Beispiel:

    function halloWelt(){
        let variable2 = "Hallo";
        alert(variable2); 
        variable2 = "Welt";
        alert(variable2);
    }
    

Ausgabe: let variable2 ist nun in der Funktion gefangen und kann nur innerhalb dieser Funktion aufgerufen werden. Ausserhalb der Funktion halloWelt existiert dieses let mit dem Namen variable2 nicht. Die Variable variable1 ist aber vom Typ var und somit global von überall her aufrufbar.

Typ: const:
Ebenfalls eingeführt in ES6.
Hat Block-Reichweite wie let.
Der Wert kann nicht neu zugewiesen werden (konstant).
Muss bei der Deklaration initialisiert werden.
Beispiel:

    const variable3 = "Hallo";
    console.log(variable3); // Ausgabe: Hallo
    // variable3 = "Welt"; // Das wird einen Fehler erzeugen
        

Quellcode Lektion 12 (html) zum Download: Lektion_11-html.txt

Quellcode Lektion 12 (css) zum Download: Lektion_11-css.txt

Quellcode Lektion 12 (css_mobile) zum Download: Lektion_11-css-mobile.txt

LEKTION 13

Funktionen

Lass mich die Grundlagen der Funktionen in JavaScript erklären, wie es Mister Spock tun würde: objektiv und präzise.
Eine Funktion in JavaScript ist wie ein Werkzeug, das eine spezifische Aufgabe ausführt. Stell dir vor, du bist auf einer Sternenflotte-Mission und musst wiederholt Berechnungen durchführen. Statt jede Berechnung einzeln von Hand auszuführen, könntest du eine Funktion programmieren, die diese Berechnung automatisch für dich erledigt.
Das spart Energie und Zeit—beides ist essentiell.

Beispiel einer Funktion:

            function gruessen(name) {
                return "Logik und Ordnung, " + name + ".";
            }
            

Diese Funktion nimmt einen Namen entgegen und gibt einen personalisierten Gruß zurück. Du kannst sie nutzen, indem du:

                console.log(gruessen("Patrick")); // Ausgabe: Logik und Ordnung, Patrick.
                

Wann sollte man Funktionen verwenden?

Hier sind einige der logischsten Szenarien:

1) Wiederholende Aufgaben: Wenn dieselbe Aufgabe mehrfach erledigt werden muss. Funktionen verhindern redundanten Code.

2) Struktur und Organisation: Teile komplexe Programme in kleine, verständliche Abschnitte, die separat getestet und gewartet werden können.

3) Flexibilität: Funktionen können Parameter akzeptieren, wodurch sie vielseitig einsetzbar sind.

Abschließend sei gesagt, dass Funktionen das Herzstück von sauberem und effizientem Code sind. Ihre Beherrschung wird dich auf deiner Reise durch das Universum der Programmierung vorwärtsbringen. Logisch, nicht wahr? 🚀

Quellcode Lektion 13 (html) zum Download: Lektion_13-html.txt

Quellcode Lektion 13 (css) zum Download: Lektion_13-css.txt

LEKTION 14

Was sind if-Verzweigungen?

In der Logik von JavaScript ist eine if-Verzweigung vergleichbar mit einer Entscheidung basierend auf einer Bedingung. Betrachte es als die Implementierung einer logischen Konsequenz, die durch eine vorgeschaltete Prüfung gesteuert wird. Wenn die Bedingung wahr ist, wird ein spezifischer Codeblock ausgeführt. Andernfalls bleibt die Bedingung unerfüllt, und ein alternativer Kurs kann gewählt werden – wie in einem else-Statement.

Oder einfach erklärt:
Stelle dir vor, du stehst vor einer Entscheidung, wie zum Beispiel: Soll ich heute einen Regenschirm mitnehmen? Du prüfst dazu eine Bedingung: Regnet es? Wenn ja, nehme ich den Regenschirm mit. Wenn nicht, lasse ich ihn zuhause. In der Welt des Programmierens funktioniert eine if-Verzweigung genauso. Wir geben dem Computer eine Bedingung, zum Beispiel: ‚Ist die Temperatur über 20 Grad?‘ Wenn das wahr ist, tut der Computer etwas Bestimmtes. Wenn nicht, dann etwas anderes. So wie du deinen Regenschirm je nach Wetterlage mitnimmst oder nicht, trifft der Computer Entscheidungen basierend auf den Regeln, die wir ihm geben.

Beispiel einer if-Verzweigung:

	var temperatur = 25;

	if (temperatur > 20) {
        	console.log("Die Temperatur ist angenehm warm.");
	} else {
        	console.log("Es ist eher kühl.");
	}
            

Abschließend würde ich anmerken: Die Programmierung benötigt disziplinierte Entscheidungsstrukturen. Die Kunst liegt darin, komplexe Entscheidungen in ihre grundlegendsten logischen Bausteine zu zerlegen. 🖖

Keine Sorge, im Video wird alles an Beispielen erklärt. IF-Verzweigungen sind neben den Funktionen so ziemlich eines der wichtigsten Elemente in der Programmierung.

Quellcode Lektion 14 (html) zum Download: Lektion_14-html.txt

Quellcode Lektion 14 (css) zum Download: Lektion_14-style.txt

LEKTION 15

Was sind Operatoren?

Wir werden in dieser Lektion hauptsächlich die Sache mit den Operatoren wiederholen und ein wenig damit spielen.

ACHTUNG: Am Ende dieser Lektion wird es keinen Beispielcode zum Download geben, da wir in dieser Lektion fortlaufend alles was wir antesten gleich wieder löschen und einfach alles mal durchspielen, somit würde es auch keinen Sinn ergeben.

Alle Operatoren:

1. Arithmetische Operatoren
Diese helfen dir, mathematische Berechnungen durchzuführen:

+ (Addition): 5 + 3 = 8

- (Subtraktion): 5 - 3 = 2

* (Multiplikation): 5 * 3 = 15

/ (Division): 6 / 2 = 3

% (Modulo): Restwert einer Division: 5 % 2 = 1

***

2. Zuweisungsoperatoren Damit weist du Variablen Werte zu:

= (einfach): x = 10

+= (Addition mit Zuweisung): x += 5 ist dasselbe wie x = x + 5

***

3. Vergleichsoperatoren Vergleiche zwei Werte:

== (gleich): Vergleicht Werte, ignoriert den Typ (5 == "5" ist wahr).

=== (streng gleich): Vergleicht Werte und Typen (5 === "5" ist falsch).

!= (ungleich): Überprüft, ob Werte unterschiedlich sind.

<, >, <=, >=: Größer/Kleiner-Vergleiche.

***

4. Logische Operatoren Verknüpfe mehrere Bedingungen:

&& (und): Alle Bedingungen müssen wahr sein (true && false ergibt false).

|| (oder): Eine der Bedingungen muss wahr sein (true || false ergibt true).

! (nicht): Kehrt den Wahrheitswert um (!true ergibt false).

5. String-Operatoren Mit + kannst du Strings verknüpfen (Konkatenation):

        javascript
        let text = "Hallo, " + "Welt!";
        console.log(text); // "Hallo, Welt!"
        

Zu dieser Lektion gibt es keinen Beispielcode zum Download.