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

Übung & Training für totale Anfänger

Übungen: Frontendentwickler ( HTML, CSS, Java-Script)

Wie kann ich anfangen zu programmieren? Was brauche ich? Was sind tolle Einsteiger-Übungen für totale Anfänger? Welche Videos sind cool, damit ich einen einfachen Einstieg in die Programmierung bekomme?

Erste – Schritte – Leg los…

Programmieren für Anfänger
Screenshot Oberfläche visual-studio-code

Programmierung für Anfänger – Praktische Übungen für zwischendurch, um einen coolen Einstieg in die Programmierung zu bekommen, auch wenn du noch nie im Leben eine Code-Zeile geschrieben hast.

Schwerpunkt: Frontendentwicklung: HTML – CSS – JAVA-SCRIPT

programmierung für anfänger

Programmieren für Anfänger

Praktische Übungen mit Video-Lösungen für Anfänger

Programmieren für Anfänger
schulhof-Programmierung

Erste Schritte in die Programmierung mit Visual-Studio-Code

Nachfolgend habe ich einige Übungen hier zusammengestellt, die einen sehr guten Einstieg in die klassische Frontendentwicklung ( HTML, CSS, java-Script) ermöglichen und verweise hier auch auf externe interessante Programmier- Video – Kanäle für Anfänger, die sich ebenfalls mit der Thematik beschäftigen. Um langsam und Schritt für Schritt zu starten, wird empfohlen, zunächst die Pizza-Karte zu coden und danach zu den weiteren Aufgaben durchzuarbeiten.

Gibt es eine Facebook-Gruppe für Programmier-Anfänger wenn ich Fragen habe?

Ja, neu eingerichtet. Come in FB-group

Übung 1

Die Pizza-Übung

Pizza-Auswahl-Optionskarte programmieren
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.

Was brauche ich, um das ganze zu üben?

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

Übung 2

App programmieren in HTML-CSS- JAVA-SCRIPT

Eine einfache Eier-Uhr-App entwickeln

Eier-Uhr-App-entwickeln
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

Übung 3

Übung 3 - Komplette Webseite in HTML- CSS und JAVA-Script
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

Der Fehlerteufel hilft dir, Anfänger-Fehler beim Coden zu vermeiden.

Welche Fehler solltest du am Anfang vermeiden? Der Fehlerteufel ( Tipps für totale Anfänger)

Ich habe bald Abi, will vielleicht Informatik studieren, oder vielleicht eine Ausbildung machen. Wie kann ich cool durchstarten? mehr

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen