programmieren lernen- johnny und jenny – code-Entwickeln- kannst du ihnen weiterhelfen?

Jenny ist Programmier-Anfängerin und möchte in die Programmierung einsteigen. Johnny hat sie in einer Online-Programmier-Gruppe kennengelernt und hin und wieder treffen sich die beiden bei ihm zuhause. Jenny möchte gerne in die Frontend-Entwicklung einsteigen. Also HTML, CSS, Java-Script lernen. ( Später React.js / Vue.js / oder Angular). So ihr Plan. Beide finden sich sehr sympathisch und lernen oft zusammen, aber sie sind kein Paar. Jenny wäre schon an ihm interessiert, aber sie ist sich unsicher, ob Johnny wirklich interessiert wäre. Am meisten stört es sie, dass er gefühlt 24 Stunden am PC verbringt und sein gesamtes Leben online eingerichtet hat. Wenn er nicht gerade programmieren lernt, ist er am „Zocken oder seine Freunde sind da, die gerne kommen, da Johnny eben auch sehr viel Platz hat. Die riesigen coolen Räume gehören alle ihm. Siehe Bilder.

Johnny ist zwar auch noch Anfänger, aber kennt sich etwas besser aus als Jenny, weil er sich schon früher mit Code beschäftigt hat. Er hat sich vorgenommen, auch in die Frontend-Entwicklung einzusteigen und später dann natürlich auch Backend-Entwicklung zu lernen Beide stehen noch komplett am Anfang ihrer Programmier-Reise. Johnny wohnt in einem riesigen alten Keller. Der Keller ist fast 200 m2 groß. Johnny hat dort mehrere PC´s, Spielkonsolen, Bildschirme und Tische und Tastaturen und das ganze sieht aus wie in einem Großraum-Büro mit vielen Arbeitsplätzen. Auch hat er viel Geld und Zeit in eine coole Beleuchtung gesteckt von dem Raum. Der gesamte Keller ist in blauer Neon-Farben ausgeleuchtet und es erinnert an einen „virtuellen Space“ den man betritt, wenn man den riesigen Raum betritt. Johnny hat eine Menge Freunde, die oft bei ihm sind, weil er so riesig viel Platz hat und man einfach „cool chillen “ kann in dem Raum und Party machen kann. Es gibt auch einen eigenen Party-Raum mit Tanzfläche. Er hat auch eine fette Stereo-Anlage, und 4 riesige Bass-Boxen hängen an jeder Ecke des riesigen 4 Meter hohen Keller-Raumes. Gegenüber Frauen ist Johnny eher schüchtern. Eigentlich wäre auch er interessiert an Jenny, aber seine Schüchternheit bremst ihn aus, so dass er bisher noch nicht den ersten Schritt gewagt hat…

Im Programmier-Baum kannst du immer alles kurz nachschlagen, wenn dir irgend eine Technik unklar ist, oder du noch nie davon etwas gehört hast.

Hier sind die beiden und treffen sich oft, um Code-Probleme zu lösen und du sollst ihnen dabei helfen. Die gesamte Story ist so aufgebaut, so dass du einsteigen kannst, ohne Programmierkenntnisse. Alles ist auch mit Lösungen, so dass du, wenn du neu bist, alles genau nachschauen kannst. Schau also immer mal wieder hier in das Hauptbüro ( head-office), der beiden und versuche die Probleme der beiden mitzulösen. Du kannst hier sehr einfach und schnell sehr viel lernen. Schau dir auch den riesigen Computer-Raum und die anderen Räume an, die die beiden zur Verfügung haben. Viel Spaß und es wird auf jeden Fall spannend hier…

Antwort: Ja, es gibt zu jeder Aufgabe, die die beiden Lösen oder diskutieren auch immer eine programmiertechnische Lösung, dies kann ein kurzes Video sein, oder eine technische Anleitung. Um deinen Lerngrad möglichst hoch zu halten, solltest du alles erst mal selber ausprobieren und die Lösung erst anschauen, wenn du wirklich nicht weiterkommst.

6 Minuten-Erklär-Video Youtube: Jenny und Johnny Video

Erny ist von Johnny und Jenny angeheuert worden, dass dieser ihnen möglichst schnell hilft programmieren zu lernen, damit sie später mal den Traum von ihrer eigenen Programmierschule verwirklichen können. Sie wussten natürlich im Vorfeld, dass es nicht einfach wird, mit „Erny, dieser harten Socke“ als Coach, programmieren zu lernen, aber sie haben es dann doch gewagt…

Ernys Büro erkennt man sofort – Warum eigentlich?

Antwort: Er hat einen lachenden Totenkopf an seiner Eingangstüre und deshalb ist sein Spitzname auch „Erny the Monster“

Das Problem und was Jenny und Johnny vorher nicht wußten

Was sie im Vorfeld nicht wussten, dass es ständige Programmier-Tests mit Noten gibt bei ihm und weil er auch „Drill-Master“ genannnt wird, sind seine Tests oftmals nicht ganz einfach und man muss sich sehr gut vorbereiten, was für die beiden oftmals nicht einfach ist, da sie natürlich auch gerne auf Techno-Partys gehen und einfach nur mit Freunden abhängen möchten.

Jeder Test wird auch benotet, das heißt, die beiden sind ganz schön gefordert, hier in die Frontend-Entwicklung einzusteigen. ( HTML, CSS, Java-Script – React.js). Erny ist Informatiker und seine Leidenschaft ist es Code zu schreiben, deshalb arbeitet er seit Jahren bei einer großen Firma als Entwickler. Computer sind seine Welt

Wenn du einsteigen willst…

Auf was haben sich die beiden hier nur eingelassen?… Lies die Geschichte und versuche zeitgleich die Aufgaben zu lösen. Zu allen Aufgaben findest du immer Lösungen…. Es wird hier noch einige spannende Überraschungen geben… Bleib dran…

Das 1. Treffen der beiden

Erny bittet Jenny, dass sie eine Grundstruktur eines HTML-Gerüstes aufbaut. Leider haut Jenny hier schon gleich einige Fehler rein. Findest du diese?

Jenny hat angefangen eine einfache HTML-Struktur aufzubauen für eine kleine Webseite, dabei haben sich bereits 3 üble Fehler eingeschlichen. Findest du diese? Die Lösung findest du unterhalb des Bildes, aber versuch es erst mal selber. Es ist wichtig, dass du weißt, wie man eine HTML- Struktur aufbaut.

Versuch es erst mal selber zu lösen. Es ist wichtig, dass du weißt, wie man eine HTML-Struktur aufbaut. Die Lösung findest du hier

Erny ( the Monster – der Progrrammierlehrer ), ist unzufrieden mit Jenny und Johnny. Sie wollen beide vorwärts kommen, aber haben mehr Party und chillen im Kopf, als Lernen, deshalb stellt er den beiden einen Multiple-Choice-Fragebogen zur Verfügung, den die beiden in 2 verschiedenen Räumen erledigen müssen. Du hast 60 Minuten Zeit und für jede Frage, die du richtig hast, bekommst du einen Punkt. Wieviel Punkte schaffst du? Unten findest du auch einen einfachen Notenschlüssel dazu. Welche Note hast du geschafft? Die Lösungen findest du ganz unten. Bitte klick dort erst auf den Link, wenn du die Fragen für dich beantwortet hast. Kriegst du das hin?

Pro Frage gibt es einen Punkt. Du kannst also fette 22 Punkte abräumen.

Lösungen gibt es die nächsten Tage… Schau einfach immer mal wieder hier rein. Versuche alle Fragen erst mal selber zu lösen.

60 Minuten Zeit- Stell dir einfach den Wecker und versuche alle Fragen zuegig zu beantworten.

Frage 1: Ist HTML eine Programmier-Sprache – Ja oder nein?

Frage 2: Flutter ist eine Programmiersprache, stimmt das?

Frage 3: Mit CSS kann man den Style einer Webseite bestimmen und das Layout machen im Code

Frage 4: Erkläre in einfachen Worten, was ist der Unterschied zwischen Frontend und Backend.

Frage 5: Mit java-script kann ich Funktionen schreiben – Stimmt das?

Frage 6: Um eine IOS-App zu entwickeln benötige ich die Programmmiersprache „Swift“. Stimmt das?

Frage 7: Eine Webseite kann ich nur mit HTML machen, ich brauche sonst keinerlei andere Techniken. Stimmt das?

Frage 8: Angular ist eine Programmiersprache, stimmt das? – ja oder nein

Frage 9: Kotlin und HTML ist dasselbe – Stimmt das? Ja- Nein- Begründe

Frage 10 : Wo kann man hier genau java-script einbinden in dem Code?

Frage 11: Beschreibe, wie man eine Internet-Adresse ( Domain) kaufen kann und wie der Ablauf ist. Erkläre auch, was die Denic ist.

Frage 12: Welche Technik könntest du bei einer Webseite einsetzen, um die Webseite responsive zu machen, damit diese auch auf deinem Handy cool aussieht, oder auf deinem Tablet? Erny das Monster verrät den beiden den ersten Buchstaben … „M“…. Weißt du es?

Frage 13: Welche 3 Techniken werden oft im Frontend genutzt? ( Frontend ist das was du siehst auf einer Webseite)

Frage 14: Nenne 3 Backend-Techniken ( Backend ist das was du nicht siehst auf einer Webseite „data-base / Serversite).

Frage 15: Kann man auf Github eigentlich auch eine statische Webseite veröffentlichen, oder geht das nicht?

Frage 16: Stimmt es, dass Webseiten, Apps, Online-Shops ab 28.06.2025 barrierefrei sein müssen? Ja ( ) Nö ( )

Frage 17: Sabine hat auf ihrem Online-Shop einen grünen Button. Sie möchte ihn aber in roter Farbe. Welche Technik ist hier in der Regel zuständig?

Frage 18: Was kann man mit „Manifest – firebase“ genau machen?

Frage 19 : Gibt es eine Programmiersprache, die mit dem Buchstaben R beginnt?

Frage 20: Nenne 4 Möglichkeiten, wie man ein einfaches Spiel coden könnte.

Frage 21: Nenne 2 Frameworks und 1 Bibliothek, die häufig im Frontend genutzt wird.

Frage 22: Erny-the-Monster – Die fiese Frage – Was ist hier los?

Viel Erfolg

Punkte:

Also insgesamt kannst du von Frage 1 – 22 = 22 Punkte abräumen

Hast du die Fiese- Erny-Frage- richtig, ( das ist Frage 22), so ist das natürlich ein extra Plus für dich, dass du diese Frage geknackt hast, weil diese Fragen in der Regel etwas schwieriger sind. Es wird solche kleine Tests öfters geben. Also bleib immer dran und lass dich nicht entmutigen, wenn du nur wenig Punkte hast. Das ist am Anfang ganz normal. Du kannst alles beim Programmier-Baum auch nochmals nachschlagen, da dort viele Techniken einfach erklärt werden. Die Lösungen gibt es die Tage. Also leg los….

Du willst dich gerne austauschen, oder hast gerade neu begonnen, Code zu schreiben, dann komm einfach in die neue Facebook-Gruppe und lerne andere Leute kennen, die vielleicht auch gerade erst angefangen haben. Facebook-Group

Entscheide selber, ob du dir eine Note geben möchtest, oder nicht.

Du kannst das ganze mit oder ohne Note machen. Höchst erreichbare Punktzahl : 22 Punkte.

Viel Spaß!

Der Notenschlüssel ( zum Vergrößern klick auf das Bild)

Wo sind die Lösungen vom Erny – The Monster-Test?

Um eine hohen Lerneffekt zu erreichen ist es natürlich ratsam es erst mal selber zu versuchen alle Fragen zu beantworten. Hast du alles erledigt, findest du hier sie spannenden Lösungen Erny-Monster-Test – Lösungen als Text

Als Video auf Youtube – Alle Fragen mit ausführlichen Lösungen zum 1. Erny-the Monster-Programmier-Test

60 Minuten Lösungs-Video ( Alle Fragen und Lösungen von diesem Programmier-Test)

Jenny ist verzweifelt, irgendwie kriegt sie es nicht hin, wie ein Bild in Visual-Studio-Code angezeigt werden kann. Check das Video, wenn du hier Schwierigkeiten hast. Video

Erny der Programmierlehrer und Jenny und Johnny treffen sich erneut. Diskutiert wird natürlich auch, ob man die Webseite klassisch coden sollte in HTML, CSS und Java-Script und Visual-Studio-Code, oder ob man einfach das CMS-System WordPress nutzt. Auch benötigen die beiden eine Internet-Adresse für ihre neue Programmierschule. Nur wie und wo kauft man so was eigentlich und was kostet so was, also eine Domain? ( Wie kauft man eine Internet-Adresse) Video

Erny der Programmierlehrer der beiden, macht die beiden darauf aufmerksam, dass egal für welches Webseiten-System sie sich entscheiden, die Webseite barrierefrei sein sollte, da es ab 28.06.2025, ein neues Gesetz gibt, das sich Barrierefreiheitsgesetz nennt. Das heißt, die beiden müssen sich also auch damit auseinandersetzen, wie man barrierefreien Code schreibt, denn ab diesem Zeitpunkt, müssen Webseiten, Online-Shops, Apps barrierefrei sein und es gibt nur wenige Ausnahmen. Schulhof-Programmierung hat hier eine riesige Link-Liste zusammengestellt für die beiden.

Barrierefreien – Code schreiben nur wie? große Übersicht, du findest den Link auch über die Hauptnavigation.

– barrierefreien-Code schreiben

Erny hat 2 kurze Videos, beide dauern ca. 2 Minuten nur. Er möchte aus diesen beiden mp4 Videos aber ein Video machen. Er bittet Jenny darum, sich darum zu kümmern. Diese ist darüber gar nicht begeistert und meint: Boah, ich hab keine Ahnung davon. Wie soll das gehen?

Wie würdest du das Problem lösen?

Lösungs-Video

Jenny ist genervt…

Jenny weiß nicht, wie man anfangen soll eine komplette Webseite zu coden. Erny, gibt ihr den Tipp sich mal die Katzen-Webseite hier anzuschauen, hier wird dir Schritt für Schritt gezeigt, wie du Code aufbaust in Visual-Studio-Code und erste Schritte machen kannst.

Das solltest du im Schlaf können, die Grundstruktur – Code-Aufbau einer einfachen Webseite mit HTML, CSS, Java-Script

Das solltest du unbdingt im Schlaf wissen, wenn du eine Webseite aufbaust und Zeile für Zeile coden möchtest… Die Grundstruktur, Aufbau in Visual-Studio-Code und wie man ein Bild im Code einfügt. im Beispiel eine Mini-Katzen-Webseite. Mini-Katzen-Webseite

Vielen Dank auch an Nadine, die freundlicherweise ihre Katze für das Bild zur Verfügung gestellt hat. -.)

Johnny ist draußen, es ist Sommer er sitzt in einem Eis-Cafe allein und scrollt mit seinem Handy durch eine Handy App, die ihm anzeigt, wo demnächst die nächste Techno-Party geht. Plötzlich liest er, dass diese heute Nacht steigt und dazu noch in seinem Lieblings-Club. Das Problem, morgen früh um 8:00 hat Erny, einen Programmier-Test angesagt. Das heißt, um vorher noch ein paar Stunden Schlaf zu bekommen, sollte er spätestens so gegen 4 oder 5 zuhause sein. Das wird alles knapp. Trotz alledem verwirft er den Gedanken bestellt sich ein Ticket und geht die ganze Nacht fett feiern. Johnny lernt dort Sandra kennen, mit der er auch hin und wieder knutschend neben einer fetten Bassbox gesehen wird. Die Boxen dröhnen, die Party ist im vollen Gange und als Johnny auf die Uhr schaut ist es plötzlich 7:30 morgens und er hatte völlig die Zeit vergessen mit Sandra zusammen. Eigentlich sollte er jetzt bei Erny sitzen und den Programmier-Test machen…. Oh je….

Zwischenzeitlich im Head-Office – Jenny allein im Head-Office

Jenny hat schlecht geschlafen, die Programmier-Tests mit Erny stressen sie immer, aber dennoch fühlt sie sich gut vorbereitet. Verwundert schaut sie auf die Uhr und denkt sich: “ Wo zur Hölle bleibt Johnny?“ Er weiß doch, dass heute Programmiertest ist…. Erny der Coach betritt den Raum und fragt auch sofort nach, wo Johnny denn ist? Jenny antwortet nur: „Kein Plan, wo der sich schon wieder rumtreibt“.

Plötzlich….

Erny´s Gesicht verfinstert sich und meint: „Ich hoffe für ihn, dass er eine gute Ausrede parat hat, nicht zum Programmier-Test zu erscheinen“…. Nicht teilgenommen ohne Entschuldigung bedeutet die Note 6,0 !. Plötzlich knallt die Türe und Johnny platzt herein, im Techno-Party-Outfit und meint : „Sorry, habe verschlafen…. “ Er setzt sich neben Jenny und Jenny flüstert ihm zu : “ Sorry, du stinkst, nach Bier und Zigaretten und überhaupt, wie zum Teufel, wie siehst du aus?“ Hat dich ein Bus gestreift? Johnny erwiedert“ „Zick nicht rum, bin halt spät dran heute“. Jenny: “ Erzähl mir keine Story vom Pferd, so wie du aussiehst, warst du auf einer Techno-Party stimmts? Und was zum Teufel hast du da an deinem Hals? Sieht aus wie ein riesiger Knutschfleck….

Erny verteilt den Programmier-Test 2 ist aber sauer

Erny der Coach geht nicht weiter auf die Situation ein, aber ermahnt Johnny, das nächste mal unbedingt pünktlich zu sein und dass er so ein Verhalten nicht dulden werde. Er verteilt den Kurz-Programmier-Test.

Der Test 2 mit Lösungen

Test vom 18.07.2024 – Programmier-Test 2

Frage 1

Beschreiben Sie, was man mit der Programmiersprache Python alles machen kann. Nennen Sie 4 konkrete Beispiele und nennen Sie 2 Möglichkeiten Python-Code auszuführen. Erklären Sie außerdem in einfachen Worten was ist Pyscript und wie kann man es ausführen?

Frage 2

Beschreiben Sie technisch, wie man Code von Visual-Studio-Code auf Github bekommt. Sie können dazu auch bis morgen ein kurzes Video an mich senden, um den Vorgang zu beschreiben.

Frage 3

Was ist eine GUI ?

Frage 4

Erklären Sie folgende Code-Zeile – Was passiert hier und was bedeutet “ Alt“ in der Code-Zeile?

  <img src=“sven.jpg“ alt=“sven der skater“ width=“1200″ height=“800″>

Frage 5

Was ist HTML- Erkläre

Frage 6

Notenschlüssel für Programmier-Prüfung Nr. 2

Wieviel Punkte hättest du geschafft in dem Test? – Versuche alle Aufgaben erst immer selber zu lösen und schau dir danach die Lösungen an, um einen möglichst hohen Lerneffekt zu haben. 6 Fragen pro Frage 1 Punkt. Wieviele Punkte hast du abgeräumt?

Lösungen des Programmier-Tests 2 Jenny und Johnny findest du hier

Jenny und Johnny streiten sich. Jenny möchte den Hintergrund der Webseite klassisch weiß gestalten. Johnny aber möchte den Hintergrund in schwarz mit weißer Schrift machen. Jenny regt sich sehr auf über Johnny, weil sie der Meinung ist, dass er immer seinen Kopf durchsetzt. Plötzlich schaltet sich Erny der Programmier-Coach ein und sagt: Wer mir am schnellsten im Code aufzeigen kann, wie man die Hintergrund – Farbe einer Webseite wechselt, der soll gewinnen und diese Farbe soll dann auch genommen werden.

Die beiden Streithähne lassen sich auf den Deal ein:

Doch wie zum Teufel verändert man den Code überhaupt einer Webseite im Hintergrund. Wie kriegt man eine Webseite schwarz mit weißer Schrift? Oder Jenny möchte den Hintergrund klassisch weiß haben.?

In unserem Falle gibt Erny der Programmierlehrer jetzt das Zeichen zum Start…. Beide beginnen zu Coden. Doch dieses mal schafft Jenny das Rennen und ist ein paar Sekunden schneller fertig und jubelt. Die Webseite soll also nicht schwarz sondern im Hintergrund klassisch weiß bleiben. Johnny ist enttäuscht. Er meint: Jenny, du hast einfach keinen Geschmack und ist sauer….

Das Problem: Wie macht man das eigentlich die Hintergrundfarbe einer Webseite zu verändern? Versuche es erst mal selber und wenn du es nicht hinkriegst, ein Beispiel zu coden, dann schau dir das Video dazu an.

Lösungs-Video-Hintergrundfarbe