Programmierung und Übungsaufgaben für Anfänger und Fortgeschrittene

Totale Anfänger-Übung, wenn du noch nie im Leben eine Zeile Code geschrieben hast.

Das lila Fußball-Feld

Mit Lösung zum ausprobieren.

Kleine Anfänger-Übung, wenn du noch nie im Leben eine Zeile Code geschrieben hast. Lerne hier den ersten Umgang mit Visual-Studio-Code und schreibe deine ersten Zeilen. Das coole. Das ganze ist mit Lösungs-Video, falls du überhaupt nicht klar kommst mit der kleinen Aufgabe. Das Lösungs-Video findest du unten.

Das lila Fußball-Feld Erste Schritte in die Frontenend-Entwicklung

Du hast noch nie im Leben eine Zeile Code geschrieben? Dann ist diese kleine Übung ideal für Einsteiger, weil du hier auch zusätzlich ein Lösungs-Video hast. Erste Schritte in die Frontend-Entwicklung (HTML, CSS, JAVA-SCRIPT)

Installiere dir dazu Visual Studio-Code. Eine technische Anleitung findest du unten.

Was lernst du bei dieser Übung?

Installieren von Visual-Studio-Code

Erste Schritte in Visual-Studio-Code

Automatisierte Erzeugung eines HTML-Gerüstes ( Trick mit dem Ausrufezeichen, Siehe Video)

Umgang mit dem Live-Server

Einstellungen von Visual-Studio-Code

Programmier-Übungen mit kompletter Video-Lösung für Anfänger

Wenn du noch nie eine Code-Zeile im Leben geschrieben hast… Leg los und versuche das ganze mal nachzubauen.

Programmierung- Frontend- HTML-CSS-JAVA-SCRIPT für Anfänger

Übungs-Aufgabe – Deine ersten Code-Zeilen – Übung

Deine Aufgabe: Das Problem:

Pascall hat letzte Nacht etwas zu viel gefeiert. Er war die halbe Nacht mit Freunden unterwegs. Am nächsten Tag ist er völlig verpennt, sitzt vor seinem Bildschirm und soll ein kleines grünes Fussballfeld programmieren, das in der Ausgabe in Visual-Studio-Code angezeigt werden soll. Leider kriegt er es nicht hin. Das Feld wird ihm nur lila angezeigt. Oh je. Auch der Titel wird nicht richtig angezeigt. Im Titel soll, das Wort „Fußball“ angezeigt werden.

Aufgabe: Schreibe den kurzen Code ab, ändere den Titel so, so dass das Wort „Fußball“ angezeigt wird und ändere natürlich die Farbe. Das lila-Fußball-Feld soll natürlich in grün erscheinen. Die Lösung dazu findest du unten im Video. Um den Lerneffekt zu erhöhen, ist es natürlich ratsam, das ganze erst mal selbst zu versuchen. Nimm dir 2 Stunden Zeit, installiere, Visual-Studio-Code, verändere den Code und schau was passiert und schau dir erst dann die Lösung unten an. Viel Spaß!

Oh je, ich habe gar kein Bock das ganze wie im Bild unten mühsam abzutippen

Hilfsmittel: Damit du nicht Ewigkeiten mühsam den Text von dem Screenshot ( Bild) abtippen musst, habe ich dir ein Video erstellt, wie du automatisiert, den Großteil des HTML-Grundgerüst mit einem Klick direkt in Visual-Studio aufrufen kannst. Das heißt, du musst dann nur noch den unteren Teil, ca. 4 Zeilen hinzufügen und schon kannst du mit der Aufgabe starten. Wie erzeuge ich nur mit einem Ausrufezeichen, ein komplettes HTML-Gerüst in Visual-Studio-Code? Video

Unten stehend findest du sämtliche technischen Video-Anleitungen, zum Thema Visual-Studio-Code, der Installation, um damit erste Code-Zeilen zu schreiben. Versuche das ganze mal selbständig nachzubauen. Notfalls, schau dir das Lösungs-Video an, wenn du nicht weiterkommst. Auf was du sonst, gerade am Anfang der Programmierung so achten solltest, habe ich dir im Fehlerteufel zusammengestellt. Wichtig ist, dass du dich gut mit anderen Leuten vernetzt. Hier findest du Facebook-Gruppen, Hilfsmittel, Plattformen, wenn du mal nicht weiterkommst beim Programmieren. Der Fehlerteufel

Das lila Fußball-Feld

Das lila Fußball-Feld – Ausgabe

Aufgabe 1 Downloade-Visual-Studio-Code und richte es ein

Downloade Visual-Studio-Code – Richte Visual-Studio Code ein und schreib oben genannten Code auf diese Seite. Lege dazu eine Datei an und nennen diese fussballfeld.html. Visual-Studio-Code ist kostenlos

Wie installiert man Visual-Studio-Code? Video homepage zum Download von VSC

Du kannst in Visual-Studio-Code auch sogenannte Extensions einstellen, das heißt Erweiterungen. In diesem Video wird es gut erklärt. Video

Aufgabe 2 Wie kannst du in Visual-Studio-Code, dein HTML-Gerüst automatisiert einblenden, so dass du den oben genannten Code nicht im gesamten mühsam abtippen musst und nur wenige manuelle Zeilen wie in der Grafik tippen musst?

Antwort: In Visual-Studio Code gibst du in der ersten Zeile einfach ein Ausrufezeichen ein, klickst auf die Entertaste und dann wird dir das gesamte HTML-Gerüst, das ja aus HEAD- Und Body-Bereich besteht, automatisiert angezeigt. Das heißt, weniger Tipp-Arbeit für dich-:) Video

Frage 3 Erkläre in eigenen Worten, wenn du dir den Code anschaust, was passiert hier genau?

Zeile 2 Du kannst hier die Sprache einstellen, derzeitig ist hier auf en = English eingestellt

Zeile 4 Ab Zeile 4 beginnt der sogenannte Head-Bereich. Es gibt einen Head und einen Body-Bereich. Der Head-Bereich dient zum Definieren von Merkmalen über die enthaltenen Daten. Dabei enthält jedoch der Head-Bereich nicht die eigentlichen Daten selbst, denn diese sind im Body-Bereich zu finden.

UTF8 Was ist UTF8?

Wo beginnt das CSS? MIt CSS kannst du Dinge stylen. In dem Code oben, beginnt es in Zeile 9 – 12 . Du kannst es erkennen, wann das CSS abgeschlossen ist und wann es beginnt. Beginn <style> </style> Wenn etwas abgeschlossen ist, siehst du das am Schrägstrich, wie hier </style> Wenn du dir den gesamten Code anschaust, kannst du auch sehen, wann der Head-Bereich beginnt und wann er abgeschlossen ist. Du siehst außerdem, wann der Body-Bereich beginnt und wann er abgeschlossen ist. Im Body-Bereich passiert in der Regel am meisten. Das ist der Bereich, wo du den Code schreibst. Der Titel, den kannst du beliebig nennen. (Zeile 8). In unserem Falle wäre es sicherlich interessant, den Titel eben, z. B. Fußball-Feld zu nennen.

Die Größe des Feldes wird oben im Code mit width und high definiert. Die Farbe lila habe ich in 3 RGB-Werte definiert, so dass mir ein lila Fußball-Feld ausgegeben wird, als Ausgangsbasis.

Frage 4 Warum ist der Code, den ich oben genannt programmiert habe, nicht ganz in Ordnung?

Beim Programmieren ist es wichtig, dass du unbedingt Struktur einhälst, das heißt, dass du z. B. auch HTML in einer extra Datei listest, dein CSS, wo du das ganze stylst, sowie dein Java-Script. Im oben genannten Falle habe ich dies nicht gemacht, da es sich hier ja nur um eine einfache Übung handelt, deshalb habe ich das CSS nicht in eine extra Datei ausgelagert. Beispielsweise hätte ich die Datei dann eben fussballfeld.css nennen müssen. Das ist ein wichtiger Grundgedanke, beim Programmieren, halte immer genaue Ordnung und Struktur, so kannst du selbst deinen Code auch immer wieder schnell und einfach nachverfolgen, oder falls du jemand anders um Hilfe bittest, ist es für eine dritte Person auch einfacher, deinen Code zu verstehen, wenn du nicht Kraut und Rüben zusammenwürfelst-:) Hier ist es aber nur eine kleine Übung, deshalb habe ich es nicht so gemacht. Vorteil für dich, du siehst alles auf einen Blick.

Wenn du eine extra Datei anlegst, dann musst du im folgenden HTML-Bereich folgende Zeile einfügen.

Frage 5 Deine Aufgabe: Verändere den Titel im Code so, so dass in der Ausgabe nicht mehr Titel steht, sondern, das Wort Fussball

Antwort

Frage 6 Verändere den Code so, dass du aus dem lila-Fussball-Feld ein grünes Fussball-Feld machst.

Das ganze müsste dann so aussehen

Ich habe Visual-Studio-Code runtergeladen, aber kann die Ausgabe nicht gleich sehen. Wie startet man den Live-Server dort?

Video – Live-Server bei Visual-Studio einrichten Video

IDas Lösungs-Video: Ich bin wirklich sehr neugierig, wie das funktioniert, gibt es ein Lösungs-Video zu dem ganzen?

Antwort: Ja, gibt es-:), aber du solltest es vorher natürlich selbst ausprobieren, nur so lernst du, in kleinsten Schritten, wie man Zeile für Zeile Code schreibt und sich in Visual-Studio-einarbeiten kann.

Lösungs-Video ( 10 min – 46 sec)

Hilfe, ich kriege es nicht hin

Falls du es alleine nicht hin bekommst, dann schau dir das Video an. Wenn es nicht klappt, es gibt auch eine Facebook-Gruppe. Hier kannst du auch deine Fragen loswerden. Viel Erfolg Facebook-Gruppe Schulhof-Programmierung