joe der klugscheisser beim Programmieren- Stimmt oder stimmt nicht-Programmier-Übungen und Fragen für Anfänger

Einfach erklärt. Das Frontend, ist alles, was du z. B. sehen kannst auf einer Webseite. Rufst du z. B. Schulhof-Programmierung auf, dann siehst du Bilder, Texte, etc. All das ist das sogenannte Frontend. Ein Frontend-Entwickler arbeitet mit folgenden Techniken, die hier auch vorgestellt und in kleine lustige Aufgaben verpackt sind.

HTML und CSS

Du brauchst zunächst einen Code-Editor. Für die Aufgaben nutzen wir Visual-Studio-Code. Es gibt auch andere. Dann arbeitest du mit HTML, das ist eine sogenanne Markup-Sprache ( HTML ist keine Programmiersprache! ). Und mit CSS, Cascading-Stylesheet. Damit stylst du z. B. die Webseite. Du bestimmst, wo sollen die Bilder hin, die Texte hin, welche Schriftfarbe soll das ganze haben. Eine gute Möglichkeit erste Schritte mit CSS auszuprobieren, ohne dass du etwas installieren musst, ist sicherlich der sogenannte Css-Generator. Den solltest du kennen. Du findest auch Anleitungen über youtube darüber. Er geniert dir automatisiert CSS-Code, falls du mal nicht weiter weißt. Wie dieser funktioniert, findest du auch in den Lösungs-Videos erklärt.

Java-Script:

Mit java-Script schreibst du Funktionen. Java-Script ist eine sehr wichtige Programmier-Sprache im Bereich Web-Programmierung. Schaust du dir die kleine Marathon-Webseite an, auch hier wurde in einem kleinen Beispiel Java-Script genutzt.

Ein Frontennd-Entwickler muss sich aber auch noch mit anderen Techniken auskennen. Das heißt, mit Bibliotheken und Frameworks.

Bibliotheken und Frameworks

Wichtige Bibliothek: REACT oder wichtig ist auch das Framework Vue.js oder du kannst auch mit Angular arbeiten. Schulhof-Programmierung hat mal eine Seite für dich zusammengestellt mit vielen Videos, die du dir dazu anschauen kannst, wenn dich das Thema interessiert. Bitte beachte, wenn du Neueinsteiger bist, lerne erst mal HTML; CSS und Java-Script. Gib dazu bei Youtube einfach „HTML für Anfänger“ ein oder CSS für Anfänger und schon kannst du dir die Basics anschauen .

Was sind responsive-Techniken eigentlich?

Außerdem muss sich ein Frontend-Entwickler auch mit responsiven Techniken auskennen. Das heißt, sicherlich hast du ja ein Handy in der Hosentasche. Das heißt, dein Code, den du schreibst, kann z. B. auf deinem Laptop ganz cool aussehen, aber auf deinem Handy oder Tablet nicht, wenn du nicht darauf achtest im Code, dass der Code „responsive“ ist, das heißt, du musst auch Techniken beherrschen, dass deine Webseite, die du z. B. codest auch auf dem Handy deiner Freundin oder dem Tablet cool aussieht, da ja fast alle Leute nur noch mit Handy unterwegs sind.

Responsive-Techniken:

Hier ist es wichtig, dass du dich mit Techniken wie: CSS-Grid – CSS- Flexbox – Media-Query, oder auch bootstrap oder Tailwind beschäftigst. Du siehst, hier gibt es natürlich auch jede Menge zu lernen. Falls dir all diese Techniken nichts sagen, gib die Techniken einfach in die youtube-Suche ein und schau dir dazu entsprechende Videos an. Du wirst dort alles finden auf youtube, was ich hier genannt habe und du kannst dir alles näher anschauen.

Wo kann ich noch weitere Übungen machen? Klassenarbeiten und Prüfungen mit Lösungen

Du hast auf Schulhof-Programmierung die Möglichkeit Klassenarbeiten mit Lösungen zu machen und auch Prüfungen zu schreiben, die ebenfalls mit Lösungen sind zum üben. Man stellt sich einfach einen Wecker und versucht innerhalb einer bestimmten Zeit, die Code-Aufgaben zu lösen. mehr

Wichtige Anmerkung:

Wenn du dir Visual-Studio – Code runtergeladen hast, dann musst du den Live-Server installieren. Wie geht das? Video

Programmier Sprachen gibt es sehr sehr viele. Möchtest du vielleicht lieber Python lernen, oder dich auf die App-Programmierung als Schwerpunkt konzentrieren, so kannst du das natürlich auch machen. Schulhof-Programmierung hat in einem 100 min- Video einmal vieles zusammengefasst, wie du cool starten kannst. Vielleicht hilft dir das Video etwas. Allerdings wenn du einen Tipp möchtest, so würde ich dir raten mit Frontend-Entwicklung einzusteigen. Vorteil: Hier siehst du sehr schnell Erfolge und HTMTL, CSS, Java-Script Kenntnisse sind überall in der gesamten Web-Entwicklung gefragt.

Hier noch ein Video, falls du mit Python einsteigen willst und was du damit eigentlich alles machen kannst.

Alle anderen Sprachen und Einstiegsmöglichkeiten findest du hier eine coole Übersicht mehr

Es ist schon Abend gerade hat Joe sein Fußball-Training erledigt, als plötzlich sein Handy klingelt und der Fußball-Trainer ihn anruft. Da sie das letzte Spiel verloren haben, hatte Joe schon Befürchtungen, dass es nun großen Ärger gibt. Seltsamerweise ruft der Trainer aber nicht wegen des verlorenen Spiels an, sondern, er hat ein Problem mit seinem Code. Der letzte Programmierer hat ihn einfach sitzen gelassen und in der Ausgabe seines Codes wird anstatt eines grünen Fußball-Feldes ein lila-Fußball-Feld angezeigt.

Deine Aufgabe: Verändere den Code so, dass aus dem lila-Fußball-Feld natürlich ein grünes werden soll. Bau den Code entsprechend auf. Wird Joe das hinkriegen?

Diese Aufgabe eignet sich besonders gut, wenn du noch nie im Leben eine Zeile Code geschrieben hast.

Zur Lösung mehr

Joe arbeitet in einer kleinen Pizzeria. Es gibt auf der homepage auch ein kleines Formular, wo man online Pizzen bestellen kann. Leider hat der vorherige Programmierer vergessen, ein Optionsfeld einzubauen, in welchem die Kunden z. B. Pizza Salami auswählen können. Der Chef hat von Joe erfahren, dass er sich hier wohl auskennt.

Wird Joe das hinbekommen? Und wie codet man eigentlich ein kleines Optionsfeld, wo der User z. B. Pizza-Salami, oder Pizza-Schinken im Code anklicken kann?

Wird Joe es schaffen, den Chef auch von seinen Programmier-Kenntnissen zu überzeugen?

Deine Aufgabe ist es, in Visual-Studio-code mal ein kleines Optionsfeld zu bauen, wo man 2-3 Pizzen als Option auswählen kann. Versuch es mal selber. Wenn du es nicht hinbekommst, schau dir die Lösung an und versuch mal so ein kleines Problem im Code zu lösen.

Joe ist sehr gelangweilt. Er sitzt im Klassenzimmer und ist gelangweilt vom EDV-Unterricht. Die Lehrerin erklärt, wie man Diagramme aufbaut und fast wäre er dabei eingeschlafen. Plötzlich meldet er sich und hebt die Hand und meint: „Frau Meyer, die Sache mit den Diagrammen und Statistiken, das was Sie da machen, das geht viel einfacher und schneller, wenn Sie einen Programm-Code aufbauen. Innerhalb von Sekunden können Sie Daten abrufen, verändern, verschiedene Datenmodelle anzeigen oder auch Diagramme entwickeln.

Die Lehrerin antwortet:

„Das ist ja toll, dass du das kannst, kannst du es uns mal zeigen, wie das geht? Natascha, seine Nebensitzerin kaut gemütlich auf ihrem Kaugummi und meint nur ganz trocken: “ Ach, Joe, der will sich nur mal wieder richtig wichtig machen“.

Nun zu deiner Aufgabe:

Versuche eine kleine Einwohner-Statistik aufzubauen und zeige auf, wie man so etwas auch im Code darstellen kann und ob dies überhaupt möglich ist. Wer hat denn nun Recht? Die Lehrerin? Joe? Oder ist der Einwand von Natascha gerechtfertigt, er würde sich nur wichtig machen wollen?

Es gibt mal wieder sehr viel Zoff im Klassenraum. Joe behauptet, dass er am Wochenende ein kleines Programm geschrieben hat wo er 7 verschiedene Smileys mit einem Klick anzeigen lassen kann, und auch mit einem Klick die Größe aller Smileys verändern kann. Auch prahlt er damit, dass er auch den Hintergrund in Sekundenschnelle verändern und steuern kann. Er meinte, den Code hätte er einfach nur mit HTML und CSS geschrieben.

Ist das möglich oder nicht?

Zeige im Code auf, ob es möglich ist, er also die Wahrheit sagt, oder hat er das alles nur erfunden und das ganze geht so überhaupt nicht?