JavaScript TODO APP programmieren & hochladen

Veröffentlicht am: 11 Februar 2024
auf dem Kanal: Coding - kurz und knapp
3,814
124

🚀 Holt euch den Hostinger Business-Plan zum Hosten der Todo-App: https://www.hostinger.de/kurzundknapp
👌 Coupon code: KURZUNDKNAPP (10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr)

In diesem JavaScript Praxisprojekt für Anfänger programmieren wir eine Todo-Listen-Applikation (todo app) mit HTML, CSS und JavaScript (JS) und laden diese anschließend mit dem Webhosting-Dienst Hostinger hoch. Du lernst dabei wichtige und professionelle Konzepte wie CSS Variablen (custom properties), CSS Flexbox Layouts, Responsive Webdesign, weil wir die Webseite / Web app responsive für Desktop, Tablet und Smartphone (mobile Variante) machen. Du lernst in diesem deutschsprachigen Anfänger Praxisprojekt wichtige JavaScript Konzepte wie Event-Listener, DOM-Manipulation, LocalStorage, Elemente erstellen, löschen, speichern. In HTML und CSS benutzen wir moderne Icons mit SVG Elementen von Google Fonts Icons / Material Icons, erstellen unsere eigene custom checkbox (input checkbox stylen) und designen die responsive todo app mit media queries und Flexbox.

👉 Source Code auf unserer Webseite: https://coding-kurzundknapp.com

Ressourcen
✅ Beide Icons bekommt ihr bei https://fonts.google.com/icons
👉 Code-Editor Visual Studio Code: https://code.visualstudio.com
👉 Webhosting zum Hochladen der Todo-App: https://www.hostinger.de/kurzundknapp
🔥 Nutze den Code KURZUNDKNAPP für 10% Rabatt

⏱️ Timestamps:
00:00 Endprodukt Todo-Liste vorstellen
03:07 Vorbereitungen Google Icons herunterladen
04:01 HTML Code
08:52 CSS Code
20:47 Responsive Settings
22:10 JavaScript Logik implementieren
31:07 Todo-App Daten speichern mit LocalStorage
39:28 So geht Webhosting mit Hostinger | Todo App hochladen

👉 Lerne HTML5 und SEO in unserem englischen Udemy Kurs:
Link: https://www.udemy.com/course/coding2g...

👉 Verwandte Tutorials:
Portfolio Website erstellen und hochladen:    • Portfolio Webseite Erstellen und Hoch...  
Card Design:    • CSS Card Design mit hover effect Anim...  
Flexbox Tutorial:    • CSS Flexbox in 5 Minuten erklärt | CS...  
Grid Layouts Tutorial:    • CSS Grid Layouts in 7 Minuten erklärt...  
Kostenloser CSS Kurs:    • Lerne CSS in 40 Minuten (CSS Kurs für...  

#todo-app #praxisprojekt #javascript

Lizenzen für Hintergrund-Musik im Video

Track: "Little Things"
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/QmMj1I

Track: "Scared Of The Glizzy"
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/xPJ3rV

Track: "Luz Solar"
Música proporcionada por https://Slip.stream
Descarga gratuita/transmisión: https://get.slip.stream/V75Tso

Welche Themen werden behandelt?
Todo list, todo-list-application, todo app, praxisprojekt, javascript, html, css, JS, responsive, javascript projekt, web dev project, anfänger projekt, tutorial deutsch, localStorage, daten Speichern, Todos speichern, für anfänger, CSS Flexbox, CSS Variablen, CSS Custom properties, webseite hochladen, web hosting, hostinger, webseite online stellen, todo web app

👍 Abonnieren und Liken, wenn es euch gefallen hat 😉


Auf dieser Seite können Sie das Online-Video JavaScript TODO APP programmieren & hochladen mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Coding - kurz und knapp 11 Februar 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 3,814 Mal angesehen und es wurde von 124 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!