Dev Planet Germany
Dev Planet Germany
  • 94
  • 391 199
Drag and Drop mit HTML und JavaScript - Deutsches Tutorial
Eine Drag and Drop Funktionalität zu implementieren, ist mit HTML und JavaScript dank der Drag and Drop API nicht weiter schwer. Deshalb schauen wir uns in diesem Video an, welche Drag & Drop Events es in HTML bzw. JavaScript gibt und wie man sie anbindet, um Elemente per Drag & Drop zu verschieben.
Переглядів: 5 740

Відео

Schatten für Bilder mit Transparenz (z.B. PNG oder WEBP) mit CSS - Deutsches CSS Tutorial
Переглядів 8012 роки тому
Möchte man Bildern mit CSS einen Schatten verleihen, ist die box-shadow Eigenschaft, die häufig für Schatten verwendet wird, oft die falsche Wahl. Sie wirft den Schatten nämlich vom Rand des Elements aus, und das sieht bei Bildern mit Transparenz, also beispielsweise PNG oder WEBP-Dateien nicht besonders toll aus. Deshalb erfährst du in diesem Video, wodurch das Problem verursacht wird, und noc...
Diese VSCode Erweiterung sollte jeder Javascript-Entwickler kennen! - Deutsches Quokka.js Tutorial
Переглядів 1,1 тис.2 роки тому
Quokka.js ist eine kostenlose Erweiterung für Visual Studio Code, Sublime Text und die JetBrains IDEs, die die Arbeit als JavaScript bzw. TypeScript-Entwickler enorm vereinfachen und beschleunigen kann. Das tut es hauptsächlich durch seine Kernfunktion: das sogenannte Live Feedback, die einem direkt im Editor anzeigt, was der Code, den man geschrieben hat, tut und wo es zu Fehlern kommt. Video ...
Das nervigste CSS-Problem endlich gelöst! - Einführung in CSS Layers - Deutsches Tutorial
Переглядів 1,4 тис.2 роки тому
Spezifität ist meiner Meinung nach das schlechteste CSS-Feature, das es bis heute überlebt hat. Dabei ist der Gedanke hinter Spezifität eigentlich ganz sinnvoll: wird ein Element von den Selektoren mehrerer CSS-Einträge ausgewählt und werden in diesen Einträgen die selben CSS-Eigenschaften manipuliert, muss irgendwie entschieden werden, welche Zuweisung tatsächlich angewendet wird. Leider wählt...
Taschenrechner mit HTML, CSS & JavaScript - Wie schwer kann das sein? - Deutsches Tutorial
Переглядів 7 тис.2 роки тому
Einen einfachen Taschenrechner mit HTML, CSS und JavaScript zu erstellen: wie schwer kann das schon sein? Diese Frage wollen wir im Rahmen dieses Videos beantworten. GitHub des Projekts: github.com/dev-planet-germany/javascript-taschenrechner 00:00:00 Einleitung & Projektstruktur 00:00:30 Struktur des Taschenrechners mit HTML 00:06:00 Gestaltung des Taschenrechners mit CSS 00:28:34 Funktion des...
Der beste Weg, um Elemente mit CSS zu zentrieren - Deutsches CSS Tutorial
Переглядів 8612 роки тому
Irgendwann kommt jeder Webentwickler einmal in die Situation, ein Element mithilfe von CSS zentrieren zu müssen. Fragt man Google danach, wie man ein Element mit CSS zentriert, findet man eine Unzahl verschiedener Möglichkeiten, von denen die meisten unnötig kompliziert oder fehleranfällig sind und von denen manche sogar das restliche Layout der Seite zerstören können. Es gibt aber zum Glück au...
Dieses Tastenkürzel MUSST du kennen! - Deutsches Visual Studio Code Tutorial
Переглядів 1,1 тис.2 роки тому
In Visual Studio Code kann man theoretisch alles mit der Maus machen. Wesentlich praktikabler ist es jedoch, Visual Studio Code mit der Tastatur zu bedienen, weil das schneller geht und die Wege mit der Maus manchmal doch etwas umständlich sind. Deshalb bietet Visual Studio Code eine Vielzahl an Tastenkombinationen, um bestimmte Befehle auszuführen. Dabei ist eine Tastenkombination in Visual St...
Warum Computer schlecht in Mathe sind
Переглядів 2972 роки тому
Wir Menschen sehen Computer immer als die perfekten Rechenmaschinen an, die viel besser und schneller rechnen können als wir. Das stimmt aber nur zum Teil, denn Computer müssen beim Rechnen ganz anderen Erwartungen und Voraussetzungen gerecht werden. Was das bedeutet und wieso Computer oft komische Ergebnisse ermitteln, besprechen wir in diesem Video.
Erstelle einen unschlagbaren Computergegner für Tic-Tac-Toe - Deutsches JavaScript Tutorial
Переглядів 1,2 тис.2 роки тому
Im letzten Video haben wir ein Tic-Tac-Toe Spiel erstellt, bei dem ein Spieler gegen einen Computergegner spielen kann. Dabei wählt der Gegner seine Züge bisher nach dem Zufallsprinzip aus: es ist also nicht gerade schwer, ihn zu besiegen. Das werden wir in diesem Video ändern und mithilfe von JavaScript und dem MiniMax-Algorithmus einen Computergegner erschaffen, der überhaupt nicht verlieren ...
Erstelle ein Tic-Tac-Toe Spiel mit HTML, CSS & JavaScript - Deutsches Tutorial
Переглядів 8 тис.2 роки тому
Tic-Tac-Toe kennen sicher die meisten: zwei Spieler setzen abwechselnd Spielsteine auf einem Gitter von 3x3 Feldern. Ziel ist es, eine Reihe, Spalte oder Diagonale mit seinen eigenen Spielsteinen zu füllen. Dieses Spiel werden wir in diesem Video mit HTML, CSS und JavaScript nachbauen - und damit du es auch allein spielen kannst, werden wir gleich auch noch einen ganz simplen Computergegner imp...
Lerne JSON in 7 Minuten! - JSON Tutorial für Anfänger - Deutsch
Переглядів 1,2 тис.2 роки тому
JSON ist das beliebteste Format für den Austausch von Daten zwischen Anwendungen. Deshalb kommt man um JSON nicht herum, wenn man mit APIs arbeitet, Daten zwischen Server und Frontend transportiert oder mit anderen Programmen kommuniziert. Weil JSON für das tägliche Arbeiten als Programmierer beinahe unerlässlich ist, schauen wir uns in diesem JSON Tutorial an, wie es funktioniert und wie man e...
HTML Grundlagen für absolute Anfänger - Learn by Doing Kurs - Deutsch
Переглядів 9 тис.2 роки тому
HTML ist das Fundament einer jeden Website, denn ohne HTML kann eine Website nicht existieren. Deshalb wirst du in diesem Learn by Doing Kurs alles lernen, was nötig ist, um die Grundlagen von HTML zu meistern und damit das Fundament deiner Webentwickler-Karriere zu legen. Visual Studio Code: code.visualstudio.com/ GitHub des Kurses: github.com/dev-planet-germany/html-kurs PDF des Rezepts: gith...
Der Unterschied zwischen == und === - Gleichheit in JavaScript - Deutsch
Переглядів 6312 роки тому
In JavaScript gibt es gleich zwei unterschiedliche Operatoren, mit denen geprüft werden kann, ob zwei Werte gleich sind: das doppelte Gleichheitszeichen und das dreifache Gleichheitszeichen. Auf den ersten Blick tun beide genau dasselbe: sind die Werte auf beiden Seiten des Operators gleich, ergeben sie true und sind die Werte unterschiedlich, ergeben sie false. Es scheint also egal zu sein, we...
Warum findet getElementById das Element nicht? - Mit Lösungen! - JavaScript Tutorial - Deutsch
Переглядів 1,6 тис.2 роки тому
Wenn du in JavaScript die getElementById Methode des document-Objekts verwendest, um auf ein Element zuzugreifen und dabei null als Ergebnis erhältst, bedeutet das, dass dein Element nicht gefunden werden konnte. Dass getElementById ein Element nicht findet, kann mehrere unterschiedliche Ursachen haben, die wiederum auf unterschiedliche Weisen behoben werden können. Welche das sind und wie man ...
CSS Animationen leicht gemacht mit der transition Eigenschaft - CSS Tutorial für Anfänger - Deutsch
Переглядів 1,2 тис.2 роки тому
Animationen zu erstellen, muss immer aufwendig und kompliziert sein? Nicht mit CSS, denn hier gibt es die Transition-Eigenschaft, mit der das Ganze zum Kinderspiel wird. Wie sie funktioniert und welche Möglichkeiten die transition Eigenschaft bietet, erfährst du in diesem Tutorial! 00:00 Wie funktioniert die transition Eigenschaft in CSS? 01:00 Die transition-Übergänge auf eine Eigenschaft besc...
Transparenz in CSS - CSS Tutorial für Anfänger 14 - Deutsch
Переглядів 5042 роки тому
Transparenz in CSS - CSS Tutorial für Anfänger 14 - Deutsch
Wie man einen Umrechner erstellt - HTML, CSS & JavaScript Tutorial für Anfänger - Deutsch
Переглядів 7 тис.2 роки тому
Wie man einen Umrechner erstellt - HTML, CSS & JavaScript Tutorial für Anfänger - Deutsch
Auf Bilder verlinken - HTML Tutorial - Deutsch
Переглядів 1,5 тис.2 роки тому
Auf Bilder verlinken - HTML Tutorial - Deutsch
Eingabeelemente für Zahlen ohne Pfeile - HTML & CSS Tutorial für Anfänger - Deutsch
Переглядів 7132 роки тому
Eingabeelemente für Zahlen ohne Pfeile - HTML & CSS Tutorial für Anfänger - Deutsch
Die Schriftart ändern mit font-family - CSS Tutorial für Anfänger 13 - Deutsch
Переглядів 1,5 тис.2 роки тому
Die Schriftart ändern mit font-family - CSS Tutorial für Anfänger 13 - Deutsch
Wie man Toasts (Snackbars) erstellt - HTML, CSS & JavaScript Tutorial - Deutsch
Переглядів 1,6 тис.2 роки тому
Wie man Toasts (Snackbars) erstellt - HTML, CSS & JavaScript Tutorial - Deutsch
4 VSCode Erweiterungen für produktiveres Arbeiten mit JavaScript - Deutsch
Переглядів 1,2 тис.2 роки тому
4 VSCode Erweiterungen für produktiveres Arbeiten mit JavaScript - Deutsch
Wie man Umschalter (Toggle Switches) erstellt! - HTML & CSS Tutorial - Deutsch
Переглядів 1,9 тис.2 роки тому
Wie man Umschalter (Toggle Switches) erstellt! - HTML & CSS Tutorial - Deutsch
Flexbox Tutorial für Anfänger - CSS Tutorial - Deutsch
Переглядів 6 тис.2 роки тому
Flexbox Tutorial für Anfänger - CSS Tutorial - Deutsch
Verwendest du das falsche Farbformat? - Tipp für effizienteres Arbeiten mit CSS & VSCode
Переглядів 5102 роки тому
Verwendest du das falsche Farbformat? - Tipp für effizienteres Arbeiten mit CSS & VSCode
5 VSCode Erweiterungen, die jeder Webentwickler kennen sollte!
Переглядів 3 тис.2 роки тому
5 VSCode Erweiterungen, die jeder Webentwickler kennen sollte!
CSS Position Tutorial - static, absolute, relative, fixed & sticky erklärt! - Deutsch
Переглядів 4,5 тис.2 роки тому
CSS Position Tutorial - static, absolute, relative, fixed & sticky erklärt! - Deutsch
Was tut der Fragezeichen Operator in JavaScript?
Переглядів 7812 роки тому
Was tut der Fragezeichen Operator in JavaScript?
Passwortabfrage mit Klartext-Funktion! - HTML, CSS & JavaScript Tutorial - Deutsch
Переглядів 3,5 тис.2 роки тому
Passwortabfrage mit Klartext-Funktion! - HTML, CSS & JavaScript Tutorial - Deutsch
Gestreifte Tabellen mit HTML & CSS - Deutsches Tutorial
Переглядів 1,3 тис.3 роки тому
Gestreifte Tabellen mit HTML & CSS - Deutsches Tutorial

КОМЕНТАРІ

  • @ThomasL-z9n
    @ThomasL-z9n 7 днів тому

    Super erklärt, so macht das lernen Spaß, Danke dafür :)

  • @shamana-om
    @shamana-om 12 днів тому

    Tolles Video, sehr gut erklärt, vielen Dank!

  • @stephenc5273
    @stephenc5273 25 днів тому

    D A N K E ! Echt genial!

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

    Danke für die Erklärung 😊

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

    Ja! 1:32:15

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

    Ich dachte schon der Computer ist ‘ne coole KI

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

    Ich bin ein 11 Jähriger sher guter Web- Game- und Flutter Developer und würde empfehlen im titel anzugeben das es mehr wie ein Anfänger tutorial ist

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

    Code doch mal richtig! Das sieht aus wie eine PowerPoint Präsentation

  • @Bsk.8yr
    @Bsk.8yr 2 місяці тому

    Danke sehr hilfreich

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

    Du machst einfach die besten Tutorials, vielen Dank. Schade, dass keine neuen Videos mehr kommen :(

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

    Eine wirklich exzellente Einführung in die Programmierung mit HTML und CSS, sehr gut und detailliert erklärt. Aber bei der Durchführung ist eine Kleinigkeit anders (dies trifft auch auf das Projekt bei github zu): Die beiden Tabellen sind nebeneinander und auch gerahmt dargestellt, doch die kleine Taballe links ist in der gleichen Länge wie die rechte Tabelle dargestellt. Dadurch hat jeder Eintrage eine Höhe von mehreren Zeilen. Wie kann man dies zurücksetzen auf eine einzige Zeile?

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

    Sehr hilfreich, danke!

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

    Top erklärt, DANKE!

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

    tolles video wie können wir die buttons jetzt untereinander zentrieren?

  • @germanballstuttgartball5291
    @germanballstuttgartball5291 5 місяців тому

    ENDLICH!!! Nach all den Jahren konnt emir nun endlich jemand verständlich und anschaulich die genauen Unterschiede zwischen absolute und relative erklären. Ich hatte mich das schon ewig gefragt. Vielen Dank dafür. Sticky kannte ich bisher noch gar nicht.

  • @ursfries8231
    @ursfries8231 5 місяців тому

    Hallo zusammen Ich bin mehr oder weniger Anfänger und habe den CSS-Code genau so eingegeben wie erklährt. Leider funktionieren bei mir folgende Befehle nicht: justify-content: center; align-items: center; weiss jemand woran das liegen könnte? Vielen Dank im Voraus! Urs Fries

  • @Nibot52
    @Nibot52 5 місяців тому

    123

  • @quantum_scio
    @quantum_scio 5 місяців тому

    Was für ein Spaß! Wie eine 1.000 Teile Puzzle an einem Sonntagnachmittag. Für Anfänger total geeignet. Eine didaktisches Meisterleistung. Vielen Dank

  • @ferienwohnungharz-balogh4166
    @ferienwohnungharz-balogh4166 6 місяців тому

    werden in diesem Format nicht auch strukturierte Daten geschrieben ?

  • @TATEFAMM
    @TATEFAMM 6 місяців тому

    Dankeee

  • @ikemkrueger
    @ikemkrueger 6 місяців тому

    7:50 Bezieht sich "Kind 1" auf "Kind 2", obwohl sie auf der gleichen Ebene sind? Und worauf beziehen sich die "50%"? Für mich sieht das nämlich nach 50% von dem sichtbaren Teil der Seite aus.

  • @danielsuenkel90
    @danielsuenkel90 6 місяців тому

    Vorab erstmal vielen Dank für die Mühe was du dir mit diesem Tutorial gemacht hast, es ist unfassbar lehrreich. Ich konnte sehr viel davon lernen und in Zusammenhang bringen wie das ganze funktioniert. Natürlich Bedarf es noch viel mehr Übung, aber immerhin ist ein Anfang gemacht. :D Hab bis gerade eben dieses Tutorial durchgearbeitet, aber irgendwie will bei mir die Desktopansicht die Pokebälle und das hintergrund.jpg nicht mehr laden seit es runter zu @media (1200px) verschoben wurde =( Auch ist meine "Durch Levelaufstieg" - Tabelle aus welchem Grund auch immer genau so lang geworden wie die "Durch TM/VM" - Tabelle. ^^ Muss ich mich morgen wohl nochmal auf Fehlersuche begeben. Evtl. finde ich ja selbst den Fehler. Über Tipps bin ich aber dennoch dankbar, das Video ist ja nun doch schon älter und es wäre möglich, dass die Ursache in einer Neuerung liegt. Wer weiß =D

  • @gerdrudolph8895
    @gerdrudolph8895 6 місяців тому

    Ich bin gerade dabei ein wenig HTML/CSS zu lernen um es an meine Tochter weitergeben zu können. Dabei schon viele Bücher durchgearbeitet und Videos. Dieses Video ist für mich das beste, unwahrscheinlich kompakt und trotzdem leicht verständlich und lehrreich. Vielen Dank für das video

  • @emmaeimerle5597
    @emmaeimerle5597 6 місяців тому

    Super gut und ausführlich erklärt!!! Vielen Dank!

  • @ClaudiaWick
    @ClaudiaWick 6 місяців тому

    Sehr gut gemacht! Der Trick mit dem Universaloperator zum Sichtbarmachen der Rahmen ist gerade für einen Anfänger auch super. Habe sehr viel gelernt, danke!!

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

    wie kann ich denn die Seite abschicken wenn ich im Dropdown Menü eine Auswahl treffe? Ich möchte gerne im Dropdown die Jahreszahl auswählen und dann auf der nächsten Seite mit dieser Jahreszahl weiter arbeiten. Ich möchte aber keinen Button noch zusätzlich klicken müssen.

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

    Danke für die wertvollen Hinweise 🖕

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

    Kurz und super erklärt dafür ein riesen..... DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANKEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE

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

    Auch wieder gutes Video!

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

    Sehr gutes Video!

  • @andreask.291
    @andreask.291 8 місяців тому

    genial! ⭐️⭐️⭐️⭐️⭐️

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

    Endlich kapiert - schade, dass ich das Video erst jetzt entdeckt habe :-) Weiter so! 😊

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

    Vielen Dank <3

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

    Danke dafür! Kannst du bitte nochmal erklären, warum die Bestandteile der Adresse als Objekt {} geschrieben werden und nicht als Array? Einfach, weil sich so einzelne Bestandteile der Adresse abbilden lassen?

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

    Ein sehr, sehr gutes Tutorial. Großes Dankeschön!

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

    Unglaublich gut erklärt. Als Anfänger gleich mal eine dumme Frage: besteht die Möglichkeit, dass die Position des Sliders erhalten bleibt (gespeichert wird)?

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

    Top Ergänzungsvideo! Danke dafür. =)

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

    Danke für dieses geniale Video! Bin absoluter Anfänger und bringe mir gerade das coden und später das scripten bei. Solche Videos helfen dann sehr um gewisse Bausteine von websites die man im Kopf hat, nachzubauen und zu verstehen.

  • @lollydieck
    @lollydieck 10 місяців тому

    sehr hilfreiches Video!

  • @Nikishere123
    @Nikishere123 10 місяців тому

    was muss ich tun wenn ich 10 slots möchte und zwei bilder zum verschieben? Lässt sich das "einfach" erweitern?

  • @MrArbijas
    @MrArbijas 10 місяців тому

    thx

  • @ruffy___
    @ruffy___ 10 місяців тому

    Wow! Unglaublich gut und verständlich erklärt! Top Video, Abo ist raus mein lieber😊

  • @mulegrimm1527
    @mulegrimm1527 10 місяців тому

    Ich habe keine Worte für dich danke danke danke danke🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽

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

    Danke, für das wirklich tolle Tutorial! Ich habe viel gelernt und die Stimme und auch die Art und Weise des Erklärens ist wirklich sehr angenehm :)

  • @Axel-jn6fk
    @Axel-jn6fk 11 місяців тому

    Ohne zu übertreiben, was dies das beste HTML+CSS Tutorial das ich bisher gesehen habe. Nicht nur veranschaulichen Sie anhand des Projektes plastisch was zu tun ist, sondern erklären jeden einzelnen Schritt auch kurz und bündig. Machen Sie bitte weiter so!

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

    Danke Super Erklärung!!! Weiter so!!

  • @user-yq6ns1ym4i
    @user-yq6ns1ym4i Рік тому

    Vielen Dank für das Tutorial. Ich hätte noch eine Frage: wie schafft man es, einzelne Bilder bzw. die Überschriften mit einem Link auszustatten?

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

    Danke, guter Tipp

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

    Super erklärt, direkt Abo da gelassen

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

    Grossartig erklärt!