Web-App programmieren in 60 Minuten | Tutorial für Anfänger (deutsch)

Поділитися
Вставка
  • Опубліковано 17 чер 2024
  • Kostenloses Beratungsgespräch: weiterbildung.developerakadem...
    In diesem Video lernst du, wie du deine eigene Web-App entwickelst. Dieses Tutorial richtet sich dabei an Anfänger. Selbst, wenn du noch nie eine Zeile Code in deinem Leben geschrieben hast, wirst du diesem Tutorial hier folgen können.
    00:00 | Intro
    00:59 | Was brauchen wir?
    02:43 | Installation und Setup
    09:18 | HTML Elemente einfügen
    16:39 | CSS
    36:53 | Logik mit JavaScript
    43:04 | Web-App hosten
    ___ Links ___
    Download: www.jetbrains.com/de-de/webst...
    Bildungslizenzen: www.jetbrains.com/community/e...
    Gesamter Code: github.com/Developer-Akademie...
    Bilder: github.com/Developer-Akademie...
    ___ Social Media ___
    Instagram: / junus.ergin (Junus Ergin)
    Tiktok: / herr_programmierer (Herr Programmierer)
    Podcast: open.spotify.com/show/3sOOzOg...
    ____ Über diesen Kanal ___
    Die Developer Akademie bildet dich zum Programmierer weiter. Auch wenn du noch NIE eine Zeile Code geschrieben hast, ist es möglich in 3 - 9 Monaten einen bezahlten Job zu finden. Dafür musst du nicht nur programmieren lernen, sondern einen guten Lebenslauf mit vielen verschiedenen Projekten vorweisen. In unserem Programm hast du ständigen Kontakt zu unseren Coaches, Hausaufgaben, Abgabefristen und Projekte aus der Praxis.
    Am Ende erstellen wir mit dir deinen Lebenslauf und unterstützen dich bei deiner Bewerbung.
    Informiere dich auf weiterbildung.developerakadem...

КОМЕНТАРІ • 107

  • @costope
    @costope Рік тому +14

    Krass dass du das Tutorial nochmal machst 🎉 bin dir wirklich dankbar ❤

  • @imrs6spazzieren498
    @imrs6spazzieren498 Рік тому +3

    Junus du bist der King, du erklärst alles Top und Schlüssig.

  • @finnigamer7962
    @finnigamer7962 Рік тому +2

    Danke dir das du mir Wissen beibringst. Ich mache jetzt meine eigende Web-App. Und noch mal vielen Dank das du dein Wissen mit uns teilst. 😌😌😌

  • @Daniel-nc3yp
    @Daniel-nc3yp Рік тому +2

    Geiles Tutorial, bin selbst Anfänger und habe jetzt aus dem Währungs-Rechner, ein ein Gewinn-Rechner gemacht der den Umsatz minus die variablen Kosten und minus die fixe Kosten rechnet und am Ende den Gewinn raus spuckt.
    Geiles Erfolgserlebnis.

  • @LsCoTwitch
    @LsCoTwitch Рік тому +4

    Cooles viedeo, macht sehr spaß anzuschauen!

  • @vomgartenzumalbtraum8183
    @vomgartenzumalbtraum8183 8 місяців тому +1

    Vielen Dank Junus für Ihre Mühe und Ihre freundliche Information. Sehr fleißig 👌🍀
    Vielen Grüßen aus RLP

  • @benjaminfrank529
    @benjaminfrank529 Рік тому +2

    Super gemacht! Perfekte Geschwindigkeit, perfekt für Anfänger. Voll interessant!!

  • @erdbeerbus
    @erdbeerbus Рік тому +1

    von anfang bis ende alles dabei - hut ab!

  • @KlausEisert
    @KlausEisert 3 місяці тому

    sehr gutes Video, alles klar und deutlich erklärt. Die "Manifest" Datei habe ich nun auch bei meiner Web App eingebunden.😀

  • @D.O.P.E-Dog
    @D.O.P.E-Dog Рік тому +1

    Wie immer ein Klasse Video. 👍🥰
    Ein cooles Tutorial wäre noch die Entwicklung mit C# mit WPF und dem MVVM Pattern, da ich bald meinen Job in diesen Bereich wechseln werde. 😊

  • @e-normous
    @e-normous Рік тому +2

    Tolles Video, danke! Strukturiert aufgebaut, kompetent rübergebracht und auf das Wesentliche beschränkt (API calls für die dynamische Anpassung des Wechselkurses ist m.E. hier noch nicht zielführend). Vielen Dank nochmals und bin gespannt auf weitere Projekte.

  • @baran5908
    @baran5908 Рік тому

    super tutorial! danke!

  • @palymacom
    @palymacom Рік тому +1

    Vielen Dank schön für alles

  • @Skurriversum
    @Skurriversum Рік тому +1

    Du bist echt toll! Danke für deine Mühe. Grüsse aus Feldkirchen bei München.

    • @Programmierenlernen
      @Programmierenlernen  Рік тому +1

      Grüße zurück aus München!

    • @zwiebel5909
      @zwiebel5909 Рік тому +1

      @@Programmierenlernen bitte helf mir bei mir kommt ne fehlermeldung calc is not defined wenn ich auf den butten clicke passiert nichts
      plssss

    • @zwiebel5909
      @zwiebel5909 Рік тому +1

      @@Programmierenlernen Uncaught ReferenceError ReferenceError: calc is not defined
      at onclick (c:\Users\jonat\OneDrive\Dokumente\Wondershare\Wondershare Filmora\Projects\UA-cam\index.html:115:32)
      was bedeuted das wie kann ich es beheben

  • @htfilms1045
    @htfilms1045 Рік тому +4

    Hi Junus, erstmal danke für das sehr gute Video! Durch deinen Kanal frische ich meine Kenntnisse wieder auf :)
    Jetzt hätte ich aber noch eine brennende Frage, was ich unbedingt wissen möchte:
    Wie lädt man die App, die in VSC geschrieben wurde, eigentlich auf das Handy? Also nicht als PWA über einen Webserver, sondern tatsächlich die "direkte" Übertragung, sodass man die App jederzeit auch Offline nutzen kann. In Android Studio z.B. geht das ja ziemlich leicht über USB-Übertragung. Aber möchte Apps zukünftig auch in VSC schreiben. Geht das überhaupt? Oder sollte man für die App-Entwicklung eine andere IDE verwenden?
    Danke schonmal für die Antwort!

  • @bobbobson7039
    @bobbobson7039 4 місяці тому

    Tutorial ist super :)

  • @erdbeerbus
    @erdbeerbus Рік тому

    excellent!

  • @lopt3ln12
    @lopt3ln12 Рік тому

    Danke im voraus.

  • @bennerx5066
    @bennerx5066 9 місяців тому

    Solche Projekte will ich noch mehr

  • @nuveon8125
    @nuveon8125 Рік тому +2

    Lieber Junus, wie immer, ein tolles Coding Video! Vielen Dank! Was ist denn nun mit den arrwos? Fehlt da nicht noch eine entsprechende Funktion, die Währungen zu tauschen?

  • @Manuel-dz1iq
    @Manuel-dz1iq Рік тому

    Nice!

  • @amicosan
    @amicosan Рік тому

    Danke

  • @mysterymanmhd5189
    @mysterymanmhd5189 Рік тому +3

    Wieder mal ein sehr cooles Viedeo, kannst du mal ein e web-app programmieren wo man einen text editor programmiert mit Funktionen wie z.b text unterstreichen Schriftgröße ändern u.s.w. machen

  • @mauarou4172
    @mauarou4172 Рік тому

    Wow hilft gut auch for kv Droid mobile Danke

  • @kaliboghg5678
    @kaliboghg5678 Рік тому +18

    Hi, du hast am Schluss gesagt es ist auch möglich dass ganze so im playstore zu veröffentlichen. Könnt ihr mal ein Video dazu machen?

    • @thesyrianhack
      @thesyrianhack Рік тому

      Du brauchst ein Google play Delevoper Account es kostet 25€

    • @kaliboghg5678
      @kaliboghg5678 Рік тому +1

      @@thesyrianhack ja das weis ich allerdings finde ich keinen Weg eine signed apk zu erstellen

    • @Programmierenlernen
      @Programmierenlernen  Рік тому +9

      ​@@kaliboghg5678 Du hast hier 2 Möglichkeiten:
      1. Du erstellst eine PWA. Das machen wir bereits im Tutorial. Diese kannst du im PlayStore veröffentlichen. Google hier am besten mal.
      2. Möglichkeit - Du nutzt ein Tool wie Apache Cordova. Damit kannst du eine signed APK erstellen. Das zeigen wir auch bei uns in der Weiterbildung.
      Ich hoffe, ich konnte dir etwas weiterhelfen.
      LG
      Junus

  • @EmilienSantiagoRossetti
    @EmilienSantiagoRossetti 2 місяці тому

    Danke für Ihre klaren Videos! Ich würde gerne wissen, ob Sie Kurse verkaufen?

  • @emrahkalajdzini1605
    @emrahkalajdzini1605 Рік тому +1

    Du bist einfach mein liebling UA-camr bitte höre nie auf.

  • @andreasatelak7424
    @andreasatelak7424 Рік тому +1

    Hi. Sehr gut erklärt. Danke. Mich würde es auch interessieren wie man die js Funktion dynamisch machen kann. D.h beim eintippen Euro wird gleich USD berechnet und umgekehrt. Ohne den Button "berechnen". Gruß.

  • @leandergrohaupt8526
    @leandergrohaupt8526 Рік тому +1

    Danke für dieses tolle Tutorial!
    Ist die App auf dem Handy auch im Offlinemodus (Flugmodus) verwendbar? LG

  • @viscabayern5578
    @viscabayern5578 Рік тому +2

    Ich fänds cool, wenn du mal ein Discord Server für deine Community erstellen würdest damit man sich dort austauschen kann und über Probleme und deine Videos diskutieren kann.

  • @jonas-werner
    @jonas-werner Рік тому +4

    Kannst du bitte mal ein Tutorial zu React Native und Git & Github machen

  • @huydang6059
    @huydang6059 Рік тому +1

    Könntest du ein Video dazu machen, wie du eine App im AppStore veröffentlichst?

  • @djstevieg84
    @djstevieg84 2 місяці тому

    Sehr gutes tutorial. Vielen Dank. Aber eine Frage hätte ich: Am Ende funktioniert das weder mit full-screen noch mit standalone. Wenn ich die App als homebutton erstelle, ist das lediglich eine Verknüpfung auf die Seite. Nach 1h kann somit die App nicht mehr aufgerufen werden. Hast du eine Idee?

  • @emanueldasilvagomes3047
    @emanueldasilvagomes3047 Рік тому

    Tolles Video.
    könntest du ein Video machen, on der auch z.B Daten auf dem Smartphone gespeichert werden? Z. B für eine App, die Rezepte speichern kann mit Mengenangaben Preise etc.

    • @janne029
      @janne029 Рік тому

      Kannst du mit der LocalStorage oder halt einem Backend machen

    • @emanueldasilvagomes3047
      @emanueldasilvagomes3047 Рік тому

      @@janne029 mit local storage werde soviel ich weiß die Daten nur temporär gespeichert, bis man die Daten im Browser löscht. Das kann nicht die Lösung sein. Und extra ein backend für eine relativ einfache App aufzusetzen ist zu over enginnered.

  • @nilsz6936
    @nilsz6936 Рік тому +1

    Hi Junus, könntest du mal bitte ein React Js Tutorial machen?

  • @Rapgodss
    @Rapgodss Рік тому

    HI ich wollte noch mal fragen weil ich das menü mir nicht runterladen kann hättest du eine idee woran es liegen könnte? Danke!

  • @saschariek1647
    @saschariek1647 Місяць тому

    Dein Tutorial ist gut erklärt, leider fehlt der wichtigste Punkt in diesem Tutorial. Wie bekomme ich die App z.b jetzt in den App Store bei IOS?

  • @spachishome
    @spachishome Рік тому

    Wie komplex ist es, diese App online Daten beziehen zu lassen? (zb. den aktuellen Umrechnungswert aus einer Internetseite auszulesen)

  • @oleseattle863
    @oleseattle863 Рік тому

    Ich kann die Größe der Objekte nur im Html Teil und nicht im Style Abschnitt anpassen. Woran kann das liegen?

  • @basemosquit1776
    @basemosquit1776 Рік тому

    Ich habe ein paar Fragen da ich noch nicht 18 bin kann ich kein Temin abmachen aber könnte es auch möglich sein ein privates Gespräch über eine andere App/usw. zu schreiben?

  • @Sascha_odin
    @Sascha_odin Рік тому

    mal so als info visual studio code ist auch im microsoft store

  • @heckerfan007
    @heckerfan007 Рік тому +1

    @Programmierenlernen kann man deinen Code irgendwo runterladen?

    • @JHxxUniverse
      @JHxxUniverse Рік тому

      Kann man machen aber besser ist meines Erachtens den Code Stück für Stück selbst mit zu schreiben und die eine oder andere Sache individuell anzupassen, lernt man im Endeffekt schneller und bleibt besser im Kopf

    • @Programmierenlernen
      @Programmierenlernen  Рік тому

      Code + Bilder sind jetzt verlinkt!

  • @TimGillhuber
    @TimGillhuber 7 місяців тому

    Hallo, könntest du vielleicht mal ein Video machen, wie man ein html Widget programmiert, zum Beispiel ein Veranstaltungskalender den man dann auf einer Homepage anzeigen lassen kann? Der Kalender sollte am besten über eine App zu verwalten sein, und das dann die Termine planbar also mit Erscheinungs und Ausblendungs Datum angezeigt werden. Würde mich riesig über solch ein Projekt freuen. Darüber habe ich noch nichts vergleichbares gefunden. Viele Grüße

  • @BaumiGW2Guides
    @BaumiGW2Guides Рік тому

    Magst du mal zeigen wie eine ki eingebaut wird ?

  • @StapTrapGaming
    @StapTrapGaming Рік тому +1

    Könntest du mal eine Chat App für Android erstellen mit python und der kivy libary

  • @zwiebel5909
    @zwiebel5909 Рік тому +1

    Bei mir kommt eine fehler meldung calc ist nicht definiert also ich ckicke auf den butten Berechnen aber nichts passiert bitte ihrdend eine hilfe

    • @rayrayrayray9434
      @rayrayrayray9434 8 місяців тому

      Bei mir ist das selbe, nur ohne Fehlermeldung. Ich habe das ganze Video durchgeschaut und es hat fast alles reibungslos funktioniert. Doch als es der letzte Punkt war( Wert + auf Button klicken= umgeänderter Wert) hat der Button nicht funktioniert und hat auch nichts ausgespuckt. Es hat einfach nichts gemacht.
      Ich versuche es jetzt alles neu zu machen.

  • @Valiperschinski
    @Valiperschinski 9 місяців тому

    Kurze Frage : warum muss ich für mein Input Feld nochmal color: white definieren, wenn ich doch bereits für den Body color: white definiert habe ?

    • @Defzan
      @Defzan 7 місяців тому

      Muss du nicht Body gilt für alles was im Body ist solange du in den Kindtags kein anderen Color haben willst kannst du es weg lassen.

  • @vreeboz
    @vreeboz Рік тому

    Junus wie kann man mit euch in Kontakt treten. Warte seid letzte woche Donnerstag auf den Anruf.

  • @schirinjamie2311
    @schirinjamie2311 Рік тому

    ich möchte gerne ein Icon zu meiner Seite hinzufügen weiss aber nicht wie weiss das wer?

  • @HaFreise
    @HaFreise 6 місяців тому +1

    Ich komme von Visual Studio. Es muss doch eine einfachere Möglichkeit geben als die gesammte Oberfläche von Hand zu coden. Einen visuellen Baukasten bei dem man die Oberfläche einfach mit der Maus einrichtet. Immer wieder das Rad neu erfinden kann es ja nicht sein. Für berufliche Programmierer dauert so etwas doch und da ist Zeit immer noch Geld.

  • @promis4you793
    @promis4you793 4 місяці тому

    Wer kann mir genau sagen wenn ich eine Webseite im Internet habe wo jeder drauf zugreifen kann das die sich immer mit aktualisiert wenn ich da was verändere? Wie funktioniert das genau?

  • @CatBenny
    @CatBenny 11 місяців тому

    Wie kann man es machen, dass sich die menüleiste oben ausklappt?

    • @Defzan
      @Defzan 7 місяців тому

      Das ist in dem Video nur ein Bild. Um wirklich ein DropDownMenü zu erhalten muss du diesen im Navbar einprogrammieren dazu gibt es viele tutorials im Internet

  • @bennerx5066
    @bennerx5066 9 місяців тому

    Ich hab mich eigentlich schon angemeldet für das Kurs aber wegen Financial issue, kann ich noch nicht anfangen 😢

  • @theblueshadow
    @theblueshadow Рік тому +2

    Du hast vergessen die Bilder unten zu verlinken.

    • @Programmierenlernen
      @Programmierenlernen  Рік тому

      Code + Bilder sind jetzt verlinkt!

    • @Robin_Bs
      @Robin_Bs Рік тому

      @@Programmierenlernen auf den menu Ding ist gar nix

  • @knightrider1315
    @knightrider1315 27 днів тому

    Hallo zusammen, Ich habe die währungsrechner gemacht und gleichzeitig die währungs umgewandelt aber ich kann nicht von Dollar to Euro rechnen.ich habe gedacht dass es mit dem Befehl if Else man kann das machen aber es funktioniert leider nicht .Weiß jemand wie kann man das machen oder junus kannst di mir einen tip geben.Zurzeit nehme ich in die bootcamp teil aber die können nicht bei dieser Projekt unterstützen

  • @cfo3049
    @cfo3049 Рік тому +1

    Ohne API welche den Kurs auf aktuellem Stand hält, ist das Ganze leider nur semi.🤷‍♂️

  • @lootplayer5184
    @lootplayer5184 Рік тому

    Wie kann ich eine web app gratis im google play store veröffentlichen und am besten ohne irgendwelche limits

    • @Defzan
      @Defzan 7 місяців тому

      Geht nicht für den Playstore fallen einmalig Entwickler gebühren an und für Apple Geräte fällt es sogar jährlich an

  • @oleseattle863
    @oleseattle863 Рік тому

    Es funktioniert auch nicht einen Abstand zwischen den Containern zu erstellen

  • @pascalwalz2172
    @pascalwalz2172 Рік тому

    wo ist der link zu den bildern

  • @Koch2023
    @Koch2023 Рік тому

    Moin bei mir kommt leider ....function replace() { [native code]} , es wäre cool wen jemand helfen könnte.. Danke und tolles Video

    • @Koch2023
      @Koch2023 Рік тому

      habs selbst gelöst :D war ja einfach dank Google

  • @CedricWolf-jr1yf
    @CedricWolf-jr1yf 7 місяців тому

    Kennt jemand ein programm wo man das auf android machen kann

  • @rylix3825
    @rylix3825 Рік тому

    Minute 7;47, wie speichert man es

    • @rayrayrayray9434
      @rayrayrayray9434 8 місяців тому

      Du drückst einmal auf VS irgendwo hin damit der weiß das es dort gespeichert werden muss mit der Maus einen links klick. Und dann kannst du auf deiner Tastatur Strg+S drücken. Auf der Website rechts drückst du einfach auf diesen Runden Punkt wo er auch drauf drückt.
      Kurz gesagt: Strg+s

  • @OfficalMahmoudi
    @OfficalMahmoudi Рік тому

    ich suche immer nach solche UA-camr jedoch werden solche nützliche Videos nicht empfohlen. Zu schade

  • @milancuvrk7745
    @milancuvrk7745 Рік тому

    Wie kann ich eine web app gratis im google play store veröffentlichen

    • @Defzan
      @Defzan 7 місяців тому

      Geht nicht für den Playstore fallen einmalig Entwickler gebühren an und für Apple Geräte fällt es sogar jährlich an

  • @theoklautzsch8310
    @theoklautzsch8310 Рік тому +1

    wie macht man diese kommischen klammern

    • @GeeEZA
      @GeeEZA 7 місяців тому

      Einfach auf diese komischen Tasten drücken! { und }

    • @Defzan
      @Defzan 7 місяців тому

      Geschweifte Klammer meinst du { = ALT+7 und } = ALT + 0

  • @antoniokaiser1371
    @antoniokaiser1371 Рік тому +4

    Erster

  • @marcelequey4936
    @marcelequey4936 2 місяці тому

    Leider sieht meine Bewertung nicht gerade gut aus.
    Für Anfänger sprichst du vielfach ein „fachchinesisch“.
    Dazu erklärst du einem Anfänger nicht wie man speichert. Die App. ist für die Praxis nicht zu gebrauchen. Dies, weil man den aktuellen Umrechnungskurs jeweils im Code ändern müsste.
    Ausserdem sind mehrere Fehler vorhanden.
    Für einen Lehrer ist das leider nicht ok!
    Bitte bei weiteren Videos beherzigen.
    Trotzdem vielen Dank und Grüsse Marcel

  • @theoklautzsch8310
    @theoklautzsch8310 Рік тому

    wo ist die speichern taste

    • @Defzan
      @Defzan 7 місяців тому

      STRG + S

  • @ccvcgchv5185
    @ccvcgchv5185 Рік тому +6

    Irgendwo ist es schon lächerlich das er css in html benutzt und dann sagt er Bilder usw. in der Beschreibung dabei ist nicht mal der Fertiger Code verlinkt. Programmier Lehrer aber noch kein einziges App Tutorial gesehen was eine App ist und keine Web App lächerlich. er programmiert anscheinend seit 30 Jahren kann aber nicht mal vernünftig css benutzen lächerlich. Also würde ich programmieren lernen von Anfang an würde ich auf jeden fall nicht zu diesem Kanal gehen.

    • @andi-drr
      @andi-drr Рік тому +1

      Er hat recht.

    • @ace_oneseven
      @ace_oneseven Рік тому +2

      Heut wohl mit dem falschen Fuß aufgestanden, was?

    • @JHxxUniverse
      @JHxxUniverse Рік тому +2

      Da geb ich @ace_oneseven recht, das Video ist mit seinen 47 Minuten an blutiger Anfänger, wie mich, gerichtet und meines Erachtens völlig ausreichend vom Umfang, wenn du Kurse für "CSS-Profi" oder "App veröffentlichen" suchst, empfehle ich Google ist zumeist eine hilfreiche Suchplattform

    • @GeeEZA
      @GeeEZA 7 місяців тому

      😂😂😂

  • @matteo_EN
    @matteo_EN 7 місяців тому +1

    Das erstell eine App hat schon bei mir nicht funktioniert Du in der Video bestimmt nur Lügen

  • @basti0238
    @basti0238 Рік тому

    Bitte vergleiche nicht das Produkt (Mac) mit Windows oder Linux. Das gleiche bei dem Betriebssystem von Smartphones: Android oder IOS nicht IPhone. Das solltest du doch besser wissen!

  • @Hannover_96_
    @Hannover_96_ Рік тому +1

    Hallo ich habe eine frage an euch
    Ich habe Geburtstag und wollte frage ob ihr mir ein Geschenk machen wollt
    Könnt ihr bitte WINNER TUNIERMANEGER Herrunter laden könnt und das Hallenturnier1 suchen und folgen bitte 🥺🥺🥺 wünscht mein Mannschaft viel Glück

  • @milancuvrk7745
    @milancuvrk7745 Рік тому

    Wie kann ich eine web app gratis im google play store veröffentlichen und am besten ohne irgendwelche limits

    • @Defzan
      @Defzan 7 місяців тому

      Geht nicht für den Playstore fallen einmalig Entwickler gebühren an und für Apple Geräte fällt es sogar jährlich an