Programmier-Übungen Praktische Übungen für Anfänger

Wer kennt das nicht, du hast großen Hunger, gehst online und bestellst dir eine leckere Pizza mit deinem Handy. In deiner Auswahl deiner Lieblingspizzeria, die eine große Auswahl hat an leckeren Pizzen, wählst du anhand eines Optionsfeldes innerhalb von Sekunden aus, welche Pizza du dir an die Haustüre liefern möchtest. Klassisch gesehen nichts besonderes dabei und geschieht tausendfach täglich. Bist du allerdings Coder, oder du bist völlig neu und hast noch nie eine Code-Zeile geschrieben, dann ist es natürlich spannend zu wissen, wie man eigentlich z. B. so ein Optionsfeld baut, den Anfangs-Code entwickelt und auf was man so achten muss. Versuche mal, als erste Übung, das ganze so nachzubauen, schau dir dazu die ganzen Videos an und leg los-:)

Wie programmiert man eigentlich so ein Optionsfeld, für so eine Pizza-Karte?

Wann solltest du diese Übung machen?

Frontendentwicklung ( HTML – CSS – JAVA-SCRIPT)

Diese Übung solltest du machen, wenn dich der gesamte Bereich der Frontenend-Entwicklung ( HTML, CSS und Java-Script) interessiert. Das heißt, wenn du irgendwann mal Webseiten entwickeln möchtest, Apps bauen möchtest etc. Das heißt, alles was du hier im Code ( Video) veränderst wird dir auch sofort angezeigt als Ergebnis. Im Beispiel nutze ich die Klassiker dazu: Nämlich ich arbeite mit der Markup-Sprache HTML – CSS ( Styling) und Java-Script. Auch erkläre ich dir, wie der genaue Code aufgebaut ist, wie du automatisiert, ein HTML-Grundgerüst aufrufen kannst in Visual-Studio-Code ohne dieses mühsam einzugeben und was du sonst noch alles brauchst, damit du das ganze nachprogrammieren kannst, um erste Schritte zu machen.

Video 1 Was brauche ich dazu?

Visual Studio Code kannst du dir einfach und schnell und kostenlos hier downloaden mehr

Was muss ich beim Download beachten von Visual-Studio-Code ? Video

Video 2 - Das kleine Pizza-Video

In diesem Video zeige ich dir, wie du den Code aufbaust in Visual-Studio-Code und wie du durch einfache Veränderung des Codes, unterschiedliche Ergebnisse erzielst. Wie du den Live-Server in visual-Studio bekommst, findest du unten im Video 3 Hier gehts zum Pizza Video ( Erste Schritte in die Frontend-Programmierung)

Video 3

In diesem Video zeige ich dir, wie du den Live Server dazu einfach installierst, damit du gleich sehen kannst, was du codest. Video

Fundstücke auf youtube zum Thema Visual-Studio-Code

Video 4

Was ist Visual-Studio Code Video

Ich kann kein HTML, weiß nicht genau was CSS ist und ich kann auch kein JAVA-SCRIPT

Grundlagen dazu findest du hier erklärt von diesem Entwickler. ( youtube)

Was ist HTML Video

Was ist CSS? Video

Was ist Java-Script Video

Der derzeitige Klassiker im Bereich HTMl-CSS und JAVA-SCRIPT also sich in die klassische Frontendentwicklung einzuarbeiten ist sicherlich der Bau einer kleinen Eieruhr-App. Mit fast über 100 000 Aufrufe eines Programmierers auf youtube unbedingt sehenswert, wenn du Anfänger bist und dich in die Frontendentwicklung einarbeiten möchtest. Spannend auch, der Schluss des Videos, wie du die App dann veröffentlichst, ohne die klassischen Stores zu nutzen, die ja Geld kosten. Das heißt, die App dann als sogenannte PWA (progressive-web-APP) auf dein Handy zu ziehen. Video: Eitwickeln einer Eieruhr mit HTMl-CSS und Java-Script Video

Ein spannendes Video, das es auf youtube gibt, zum Thema Frontendentwicklung ist das Video in dem du lernst eine komplette Webseite nur mit HTML – CSS und JAVA-Script zu entwickeln. Du findest das Video hier