Es wäre meiner Meinung nach aufgrund mehrerer Gründe besser, mit JavaScript anzufangen.

• JavaScript ist weiter verbreitet als TypeScript
• Es hilft später, bestimmte Verhaltensweisen besser zu verstehen (JS basiert bspw. auf prototypbasierten OOP-Modell, auf die nun eine Sprache wie TypeScript versucht, ein klassenbasiertes OOP-Modell draufzustülpen)

Bezüglich interessanter Themen für später:

• Web-APIs (s. bspw. Canvas, DOM, Fetch, File, Intersection Observer, Mutation Observer, Push, WebSockets, Web Storage)
• Die Features der Webentwicklungstools deines genutzten Browsers (Chrome/Firefox/Safari)
• JS Design Patterns
• Adaptive & Responsive Design (Vorgehensweisen, technische Mittel, ...)
• Node.js, NPM und Bundling Tools (wie Vite, webpack, o.ä.)
• Es wäre gut, sich in ein/e populäre/s JS-Bibliothek/Framework (z.B. Angular / NextJS / React / Svelte / Vue) schon einmal tiefer eingearbeitet zu haben
• Das Gleiche gilt für CSS-Frameworks/Toolkits (s. Bootstrap, Tailwind, UIkit, ...)
• CSS-Erweiterungen (wie LESS oder SCSS)
• CSS Namenskonventionen (siehe BEM, SMACSS)
• Storybooks
• Test-Frameworks (wie Cypress, Jest, Mocha, Playwright, ...)
• WCAG
• Auch wenn es nicht mehr direkt in den Bereich Frontend gehört: Einmal mit einem CMS zu arbeiten, wäre nicht schlecht

Auch wenn ich bzgl. Tools oben meist mehrere Optionen nenne, reicht es vollkommen aus, sich jeweils nur eines herauszugreifen, um das darumliegende Konzept kennenzulernen. Sich direkt in alles einarbeiten zu wollen (z.B. alle genannten Testframeworks), wäre übertrieben. Womit du bei einem Arbeitgeber letztendlich tatsächlich einmal konfrontiert wirst, ist nicht absehbar.

(...) z.B. höre ich immer wie wichtig REST-APIs sind (...)

REST gibt Regeln vor, wie eine Schnittstelle aussehen soll, über die ein Client mit einem Server kommuniziert. Webartikel, die diese Architektur genauer beschreiben, gibt es viele (Beispiel). Ein einfaches Einstiegstutorial mit Node.js findest du beispielsweise im Postman Blog (einen Postman-Account benötigst du m.E. nicht; die Anfragen an die API kannst du genauso gut mittels Fetch stellen).

Mit dem Style gibst du vor, dass das Bild in der Breite 90% des Viewports einnehmen soll und setzt dazu noch einen Innenabstand. So entsteht eine größere Fläche als benötigt wird mit zusätzlichen Weißraum.

Ich würde mal sagen, dass du sicherlich die komplette CSS-Regel nicht brauchst. Gib allenfalls mit den Attributen width und height das Bildgrößenverhältnis vor.

Beispiel bei einem Bild mit den Maßen 500x200 Pixel:

<a href="..."><img class="rx6400" src="RX6400.png" alt="..." height="200" width="500"></a>

Mit dynamischer Ausrichtung an der Containergröße (in CSS):

.rx6400 { height: auto; width: 100% }

Um einen Abstand drumherum zu erhalten, solltest du nicht den Innenabstand des Bildes oder des Links ändern. Setze entweder einen Container ein und definiere für diesen einen Innenabstand (der Kürze halber hier nur als Inline-Style):

<div style="padding: 19%">
  <a href="..."><img ...></a>
</div>

oder nutze für den Link das margin-Property, um einen Außenabstand festzulegen.

Der Wert des alt-Attributs sollte im Übrigen aussagekräftiger sein. In deinem Fall übernimmt es die Rolle des Linktitels. Also wäre so etwas wie: Gehe zu RX6400 Produktseite passend.

Du kannst durchaus mit der Erwartung herangehen, dass er anfängt, sich Grundlagen anhand gestellter Aufgaben selbst anzueignen. Wie du selbst schon schreibst, natürlich mit Hilfe. Wenn er dabei bzgl. HTML, CSS, JS noch völlig ahnungslos ist, gib ihm halt Zeit, in der er selbstständig Tutorials o.ä. durchgeht. Du selbst solltest jedenfalls nicht deine Zeit damit aufwenden, ihm jegliche Syntaxregel u.ä. selbst beizubringen (das inkludiert nicht Detailfragen) - das dürfte auch dein Arbeitgeber so sehen.

Im besten Fall findest du eine Aufgabe, deren Erfüllung letzten Endes auch einen Mehrwert für eure Arbeit / die Firma bringt. Das könnte irgendeine Form an Analysetool sein (Beispiel: Ein HTML-Validationstool für eine Liste an URLs, der Quellcode dieser Seiten wird an den W3C Validator geschickt und dessen Ergebnis in einer Tabelle o.ä. aufbereitet; ein Browserplugin zur Kontrastanalyse) oder irgendeinen Wertegenerator (box-shadow/gradient/...). Andernfalls gibt es die klassischen Module (Akkordion, Tab View, Slider, Lightbox, Flyout, Formulare mit benutzerdefinierter Validation, Sticky Buttonbar, ...), an denen er sich (ohne Hilfe seitens Bibliotheken/Frameworks) versuchen könnte.

Wenn du ihm eine Aufgabe gibst, würde ich den Prozess in Phasen wie diese aufteilen:

1. Du erklärst ihm, was du erwartest und erste Verständnisfragen können geklärt werden (es geht hierbei erst einmal nur darum, die Aufgabe zu verstehen - nicht um Umsetzungsfragen)
2. Du gibst ihm Zeit, für eine erste Eigenanalyse (zwischen 15-60m): Wo hat er Probleme/Rückfragen? Wie könnte er an das Problem herangehen?
3. Ihr besprecht seinen Plan und du kannst ihn in eine entsprechende Richtung lenken, sofern seine Ideen nicht gut sind
4. Er beginnt mit Umsetzung/Recherche/...; bei Zwischenfragen unterstützt du
5. Sobald er fertig ist, zeigt er sein Ergebnis
6. Führe eine Code Review durch und besprich mit ihm Fehler/Verbesserungsmöglichkeiten/u.ä.

Bei einer komplexeren Aufgabe (s. meine ersten Vorschläge oben) macht es natürlich Sinn, die zuvor aufzusplitten. Er könnte bspw. mit HTML/CSS anfangen, der JS-Teil kommt später. Insofern würde auch eine Review je Phase Sinn machen.

Ihn direkt an die Software unseres Betriebs zu lassen, würde ihn vermutlich "erschlagen".

Eine direkte Konfrontation ist vermutlich nicht passend, doch früher oder später braucht es auch hier einen Übergang. Deswegen wäre es gut, bereits jetzt damit anzufangen, nach leichten Aufgaben Ausschau zu halten - sei es nun bezüglich Entwicklung oder Konfiguration. Und ob er sich nun selbst an ihnen (bzw. Teile davon) versucht oder ihr pair programming betreibt (du zeigst deine Herangehensweise, er schaut dabei zu).

Weihe ihn in bestimmte Arbeitsschritte (z.B. Build- und Deploymentprozesse) und Programmstrukturen (Bsp.: Wir verwenden CMS XY und das funktioniert grob so ...) ein.

Entsprechend wäre es evtl. besser eben etwas "spielerisch" zu starten.

Versuche es möglichst praxisbezogen zu halten. Ich gebe dir zwar Recht, dass Minispiele eine gute Übung sein können, aber ihn beispielsweise ein Schachspiel innerhalb der Arbeitszeit entwickeln zu lassen, halte ich nicht für passend. Das kann von einigen Personen falsch interpretiert werden, wenn sie das mitbekommen.

Auf die Kalenderansicht hast du keine Zugriffsmöglichkeit. Entweder du baust dir eine eigene oder du nutzt eine Bibliothek wie flatpickr, die das schon für dich übernimmt.

Ein Pfeil mit weiß ausgefüllter Spitze zeigt eine Vererbung an. Die Klasse, die mit dem Pfeil auf eine andere Klasse zeigt, erbt deren (für sie sichtbaren) Eigenschaften und Verhaltensweisen.

Bei einer einfachen Pfeilspitze (ohne Dreieckskopf) handelt es sich um eine Assoziation, bei der die Klasse am stumpfen Ende auf die Klasse (bzw. deren Attribute/Methoden) zugreift, auf welche der Pfeil zeigt. Das Kreuz am anderen Ende kann genutzt werden, um deutlich auszuschließen, dass diese Beziehung nicht auch in die andere Richtung gehen könnte.

Ich habe bisher nicht so viel Ahnung mit programmieren möchte es aber gerne lernen.

Lerne erst Programmieren (außerhalb von Engines), bevor du dich konkret der Spieleentwicklung widmest. Du brauchst das Grundlagenwissen (Wie kann man Lösungsalgorithmen zu Probleme entwickeln? Wie kann man sich mit der benötigten Programmiersprache formulieren?) und die Arbeit mit einem Framework/einer Engine baut erst darauf auf.

Wenn du mit Unity arbeiten möchtest, müsstest du dich mit C# vertraut machen. Solltest du dich für Unreal entscheiden, wäre C++ die erstbeste Wahl. Beides - das vorab - lässt sich nicht innerhalb weniger Tage erlernen. Das heißt, du solltest definitiv längerwährende Geduld und Motivation mitbringen.

Die Möglichkeiten der visuellen Programmierung (Bolt/Blueprints) klammere ich an dieser Stelle komplett aus, da es sich nur zum zusätzliche Hilfsmittel handelt, die die textuelle Programmierung nur zum Teil ersetzen sollen (lies mehr dazu hier).

(...) aber die sagen alle es ist abhängig welche Genre (...)

Grob kann man sagen (und so schlägt es sich auch auf den Markt nieder), dass Unity eher für klein-mittelgroße 2D-/3D-Spiele (Indie/AA) genutzt wird. Der von dir erwähnte Supermarket Simulator ist ein konkretes Beispiel, denn er wurde mit dieser Engine entwickelt.

Die Unreal Engine hingegen ist öfter auch im AAA-Bereich vertreten, unter anderem wenn es darum geht, tendentiell photorealistische Grafikstile zu erreichen (siehe bspw. Black Myth: Wukong).

Unity oder Unreal Engine?

Für dein Vorhaben würde sich Unity schon gut eignen. Ich halte sie und auch C# einsteigerfreundlicher als Unreal und C++. Im Unity Asset Store findest du evt. sogar ähnliche Assets.

Unabhängig davon kannst du mit beiden Engines zum gleichen Projektziel kommen.

(...) doch ich weiß nicht wie ich es mache, dass ein JButton hinzugefügt wird wenn ein Ordner, da ist (...)

Immer wenn du weißt, dass sich die Ordnerauswahl geändert hat, kannst du dir die verfügbaren Verzeichnisse via Einzeiler holen:

var directories = new File("/your/root/path").listFiles(File::isDirectory);

Statt allerdings mit Buttons zu arbeiten, würde ich zur Auflistung der Seiten eine JTree-Komponente verwenden. Schau dir dazu den Artikel aus den Oracle Tutorialseiten an: Du kannst ein Model-Objekt an die Komponente binden, welches die Einträge enthält. Wenn sich das Model-Objekt ändert, wird die GUI-Komponente automatisch aktualisiert.

Um zu erfahren, welchen Eintrag ein Nutzer selektiert, kannst du einen TreeSelectionListener an die Komponente hängen. Du könntest dir dann den selektierten Modeleintrag holen, und dessen Detailtext (sofern es sich um einen Artikel handelt) in ein Label o.ä. hineinsetzen.

Versuche für deine Anwendung generell, via MVC-Architektur Daten und Oberflächenlogik strikt voneinander zu trennen. Änderungen des Models können via PropertyChangeListener an die Oberfläche übermittelt werden. Änderungen seitens der Oberfläche werden mittels Controllers (Listener) an die Model-Schicht übertragen.

(...) und dann, wenn man darauf klickt, dass dann der inhalt der Datei angezeigt wird (...)

Der Dateiinhalt sollte möglichst nur dann gelesen werden, wenn eine inhaltliche Änderung erwartbar ist. Bei vielen Dateien ist ein lazy load-Ansatz ratsam. Wenn der Datensatz das erste Mal tatsächlich aufgerufen wird, wird der Inhalt gelesen und in das Model gespeichert. Bei Folgeaufrufen kann man sich den Text aus dem Model holen. Es sei denn, es ist klar, dass zuvor eine Datenaktualisierung getätigt wurde.

Zuletzt noch ein paar Anmerkungen zu deinem Code:

1) Die invokeLater-Methode kann auch mit Lambda-Ausdrücken umgehen, was also eine Verkürzung des Codes bedeutet:

SwingUtilities.invokeLater(() -> new Frame());

2) Der Labeltext kann via Konstruktor gesetzt werden. Das Gleiche gilt für Buttons. Der setVisible-Aufruf ist nur für die JFrame-Instanz nötig.

JLabel l0 = new JLabel(".");

3) Auf nichtssagende Bezeichner wie l0, l1, b1, u.ä. würde ich verzichten. Benenne die Variablen doch nach ihrem Zweck (z.B. titleLabel, startButton, o.ä.), damit du später sofort weißt, auf welche konkrete Komponente sie referenzieren.

4) Wenn du Komponenten (JComponent-Klassen wie JPanel) neu zeichnen möchtest, dann nutze die paintComponent-Methode, nicht paint. Sie ist konkret für deinen Anwendungsfall da.

Die paint-Methode hingegen erfüllt eine übergeordnete Aufgabe: Sie ruft paintComponent auf und zeichnet zudem Ränder und Kindkomponenten.

5) Mit dem Festsetzen der Fenstergröße und anschließend absoluten Positionierung der Komponenten bist du auf dem besten Weg, eine nutzerunfreundliche, bzw. für einige Nutzer sogar unbedienbare grafische Oberfläche aufzubauen.

Nebenher machst du es dir selbst noch schwer: Beim Einfügen neuer Komponenten musst du Koordinaten und Größen anderer Komponenten gegebenfalls aufwendig umordnen. Wenn es zu fehlerhaften Darstellungen (fehlende Ränder, Flimmereffekte/nicht sichtbare Komponenten, u.ä.) kommt, bräuchtest du dich ebenso nicht wundern. Es hängt meist mit fehlerhaften Größenberechnungen/-aufteilungen und null-Layouts zusammen.

Vergiss besser setBounds, entferne auch den setResizable-Aufruf und beschäftige dich mit Layout Managers. Sie sind eines der zentralen Konzepte von Swing. Selbst für den Fall, dass du sie zu kompliziert findest, gibt es noch Ausweichmöglichkeiten wie Drag & Drop-Designer (GUI Designer in IntelliJ / Matisse in NetBeans / WindowBuilder in Eclipse), die dir letzten Endes deutlich bessere Ergebnisse liefern, als mit deinem Ansatz.

Solltest du deine bisherige Vorgehensweise (setBounds, paint, ...) so aus einer bestimmten Lernquelle bezogen haben, würde ich dir raten, diese schleunigst zu entsorgen.

Stattdessen (und generell) würde ich dir empfehlen, mehr mit den Oracle Tutorials zu arbeiten. Sie stellen alle Konzepte und Komponenten genau vor und bieten dazu sogar noch komplette Praxisbeispiele.

1. Einen tatsächlichen 3D-Support gibt es nicht. Stattdessen aber Methoden, um 3D-Effekte zu simulieren. Im Scratch Wiki steht mehr dazu.
2. Scratch ist derzeit noch nicht darauf ausgelegt, direkt auf Android/iOS ausgespielt zu werden, daher werden bislang nur Browser als Ausspielquelle benutzt. Auf alle Sensoren eines mobilen Endgeräts hast du mit Scratch selbst keinen Zugriff. Einfache Touchevents dürften (im mobilen Browser) allerdings behandelt werden können, indem man Klickevents nutzt. Eine besser auf mobile Endgeräte abgestimmte Alternative zu Scratch, wäre Catrobat in der Pocket Code-App (ebenso ohne tatsächlichen 3D-Support).

Wenn du Spiele mit mehr technischer Freiheit entwickeln möchtest, würde ich dir empfehlen, eine textuelle Programmiersprache zu lernen und dich im Anschluss mit entsprechenden Bibliotheken/Frameworks/Engines für die Spieleentwicklung auseinanderzusetzen. Ein paar Optionen dahingehend wären C# (in Unity), GDScript (in Godot) oder Lua (in Defold).

An der Stelle würde ich zunächst anführen, dass Roblox seit ein paar Jahren eine eigene, weiterentwickelte Form von Lua (5.1) nutzt: Luau. Neben ein paar Anpassungen unter der Haube (Performanceoptimierungen, u.ä.) beinhaltet diese noch ein paar Syntax-Features (z.B. neue Schlüsselwörter, mehr Support für Typinterferenz, u.ä.), die es in Lua selbst nicht gibt.

Du kannst natürlich trotzdem mit Lua beginnen, solltest dann aber berücksichtigen, dass du dich danach ebenso mit den neuen Features von Luau beschäftigen müsstest.

Material zu Lua findest du hier:

• Lua Manual (offizielle Dokumentation)
• Lua for Programmers (bis Lua 5.1)
• Tutorialspoint (bis Lua 5.2)
• lua-users-Wiki (nur noch via Wayback Machine erreichbar)

Und für Luau/Roblox kannst du in diese Quellen schauen:

• Die offizielle Dokumentation
• Tutorials/Artikel auf dem Roblox Developer Hub
• Auf dem YouTube-Kanal von Suphi Kaner findest du eine Sammlung an Tutorial zu einzelnen, speziellen Themen/Anwendungsfällen

Wenn man "Programming" googlet kommt als erstes dass Bild:

Zunächst sollte hierbei berücksichtigt werden, dass es das Ergebnis einer Suchmaschine ist, die ihr eigenes internes Rankingsystem hat und dabei weitere Kriterien einbezieht (z.B. Suchverhalten, Sprache, Zeit und Ort des Nutzers). Selbst wenn Google mehr als Metadaten für die gecrawlten Bilder einbezieht, kann man nicht erwarten, dass die Ergebnisse akkurat sind.

Das heißt: Zum einen können unterschiedliche Nutzer unterschiedliche Ergebnisse erhalten (ich bekomme z.B. aktuell ein Bild, auf dem Python-Code zu sehen ist) und zum anderen kann man wohl nicht ganz ausschließen, dass man es mit den richtigen Metadaten auch schaffen könnte, die Abbildung eines weißen Kaninchens auf Platz 1 zu bringen.

Eine von Menschen explizit gewählte Repräsentation zum Begriff Programming (oder Programmiersprache) ist HTML nicht.

Wenn man hinterfragen möchte, wieso es solche Bilder in entsprechende Fachartikel schaffen, kann man wohl nur davon ausgehen, dass Gründe wie Unwissenheit, Ressourcenmangel (es gab kein anderes Bild im verfügbaren Bilderpool), ein bestimmtes Ästhetikverständnis oder fehlende Sorgfältigkeit hineingespielt haben.

Ja ich weiss, dass ich ken HTML, aber es ist SVG, (...)

Auf deinem Bild ist HTML-Code zu sehen, in dem SVG-Elemente eingebettet sind.

Trotzdem denken wir alle ans Programieren, wieso?

Noch bevor man den Textinhalt auf dem Bild tatsächlich erfasst, kann man schon Informationen wie diese herausziehen:

• Es ist das Foto eines Bildschirms; die Ansicht ist aus der Schräge
• Es ist Text mit einer speziellen Formatierung (Einrückungen, kein zusammenhängender Text)
• Heller Text befindet sich in einem Programm mit dunklem Hintergrund

Perspektive und Farbkontrast sind zusammen ein häufig genutztes Stilmittel (in Webartikeln von Computermagazinen, u.ä.), um Bildschirmtext (insbesondere Programmcode) interessant darzustellen. Du kannst ja einmal weiter im Ergebnis deiner Google Bildersuche schauen: Ich bin mir sicher, dass die Mehrzahl an Fotos Aufnahmen aus der Schräge sind und man meist helle Texte mit dunklen Programmhintergründen hat.

Das heißt, auf den ersten Blick wird unser Gehirn das Bild in die Schublade packen, wie es ihm der bisherige mediale Konsum schon beigebracht hat. Ob auf dem Bild dann nun eine Programmiersprache zu sehen ist, eine Fantasiesprache oder irgendetwas anderes, ist bis hierhin erst einmal völlig egal.

Bei genauerer Betrachtung kann man nun, je nach Wissensstand, andere spezifische Schlüsse ziehen. Ein Experte erkennt, um welche Computersprache es sich handelt, ein Laie vergleicht es mit ähnlich Bekanntem und ordnet dementsprechend ein. Ich denke, beide Gruppen können dennoch eine Assoziation zur Programmierung ziehen, da HTML/SVG (bzw. für Laien: Code) nun einmal im Umfeld der Programmierung/Softwareentwicklung Einsatz findet.

Beim Erfassen von Informationen wird es seitens des Gehirns wohl immer den Versuch geben, bekannte Assoziationen hervorzurufen, die letztendlich der Lageeinordnung/-bewertung dienlich sein können. Wenn ich zum Beispiel an ein Reh denke, habe ich nicht nur ein Reh vor Augen, sondern ein Reh im Wald.

UI bezeichnet allgemein eine Schnittstelle, über die ein Nutzer mit einer Anwendung (bzw. dem Computer) kommunizieren kann.

Beispiele:

• Eingaben über Touchpad, Fernbedienung, Maus, Tastatur, Joystick, u.ä.
• Der Computer könnte auf Geräusche/deine Stimme reagieren (siehe Alexa oder Google Mini)
• Der Computer könnte auf Bewegungen reagieren (Bewegen des Geräts, Bewegung vor einer Kamera)
• Grafische oder textbasierte Oberflächen (z.B. die Kommandozeile)

Eine grafische Oberfläche (GUI) ist folglich eine konkrete Art an UI. Sie stellt dem Nutzer grafische Komponenten (Buttons, Dropdowns, Eingabefelder, u.ä.) zur Verfügung, über die er mit dem Programm interagieren kann.

Klassische Beispiele dafür findest du hier:

• Bei Betriebssystemen wie macOS, iOS, Android OS oder Windows OS
• Auf Webseiten
• Bei Menüs in Computerspielen

Das Array bietet dir für den Zugriff auf seine Elemente nur eine Schnittstelle:

myArray[...]

Diese Schnittstelle erwartet stets den Indexwert. Solltest du einen Wert außerhalb des Indexbereich angeben, wird dir das Programm einen Laufzeitfehler zurückgeben.

Wenn du an anderen Stellen deines Codes nicht mit dem Indexwert arbeiten möchtest, musst du bei Kommunikation mit dem Array umrechnen.

Beispiel:

int last = myArray.length;
System.out.println(myArray[last - 1]);

Für solche Fälle solltest du dann auch darauf achten, sehr klare Namen zu wählen. Im besten Fall arbeitest du von Beginn an immer mit dem Indexwert.

int lastIndex = myArray.length - 1;
System.out.println(myArray[lastIndex]);

Im Reden/Schreiben über die Sprache wäre es ebenfalls vorteilhaft, sich stets klar auszudrücken.

Beispiel:

Das dritte Element im Array hat den Index 2.

Du brauchst die extra Variable nicht.

int number = Convert.ToInt32(Console.ReadLine());

while (number > 0)
{
  Console.WriteLine(--number);
}

Du setzt j nicht zurück, nachdem die innere Schleife einmal durchlaufen wurde. Daher trifft für die Folgeiterationschritte der äußeren Schleife die Bedingung

j < len(L)

nicht mehr zu.

(...) und bräuchte dazu ein leichtes Programm

Du kannst IntelliJ IDEA als Entwicklungsumgebung nutzen. Alternativen dazu sind noch Eclipse oder NetBeans IDE. Diese drei Programme sind soweit auch für die professionelle Entwicklung geeignet.

Solltest du nach noch einfacher aufgebauten Anwendungen für einen spielerischeren Einstieg suchen, schau dir Greenfoot an. Greenfoot wird insbesondere in schulischen Einrichtungen genutzt.

Andernfalls würde ich dir für den Anfang speziell Processing empfehlen. Hierbei handelt es sich um eine Programmiersprache mit eigener (gleichnamiger) IDE, die auf Java aufbaut und deren Syntax weitestgehend übernimmt. Allerdings nimmt sie auch an vielen Stellen Komplexität heraus: Codestrukturen, die für einen Anfänger eh noch nicht relevant sind (aber in Java dennoch geschrieben werden müssen, um ein funktionales Programm zu erhalten) und erst bei einem späteren Lernstand tatsächlich gut erklärt werden könnten. Mit Processing kannst du dich also gut auf das Erlernen der ersten Grundlagen fokussieren. Anschließend kannst du mit Java einfach weitermachen.

(...) ich würde mir gerne Java beibringen (...) Hat jemand Empfehlungen (...)

Bezüglich Lernmaterial würde ich auf solche verweisen:

• Die JetBrains Academy bietet für Java einen ziemlich umfangreichen Kurs an, welcher nach jedem Kapitel mehrere Übungsaufgaben einschließt.
• Buch: Programmieren lernen mit Java von Habelitz
• Buch: Java ist auch eine Insel von Ullenboom (gibt es für die 15. Auflage auch als Open Book, also in dem Fall zu Java 14)
• Buch: Schrödinger programmiert Java von Ackermann
• Core Java Tutorial (bis Java 11) von Pankai

Abraten würde ich von jeglichen Crashkursen, da diese meist sehr oberflächlich versuchen, Informationen in kurzer Zeit zu vermitteln. Nimm dir stattdessen bewusst die Zeit zum Lernen, die du brauchst. Des Weiteren wäre es gut, mit Material zu starten, welches mindestens Java 9 inkludiert, da ab dieser Version erste größere Umbrüche stattfanden (z.B. die Einführung des Modulsystems). Bei dem hier von anderen Antwortgebern angepriesene W3Schools ist das beispielsweise nicht der Fall.

Wenn du lernst, dann versuche dich auch praktisch an dem Angelesenen. Ganz am Anfang reicht das natürlich noch nicht für richtig sinnvolle Anwendungen, doch nach und nach kannst du deine Kenntnisse kombinieren. Ein paar Seiten, auf denen du Übungsaufgaben finden kannst, wären CodingBat, Edabit, Exercism oder w3resource.

Kann man alles über eine Datenbank laufen lassen?

Können - ja. Es ist aus Sicht der Datentrennung und Wiederverwendbarkeit allerdings nicht so sinnvoll, Daten und Quelltext zusammenzuspeichern.

Nimm als Beispiel den Titel einer Seite, der womöglich als Titel des HTML-Dokuments, als auch für die erste Überschrift im Inhaltsbereich benutzt werden soll. Wenn nur der Titeltext in einer Datenbankzelle abgelegt wird, kann er für beide Fälle abgerufen und eingesetzt werden.

Mittels einer Trennung von reinen Daten und Struktur (HTML), bleibst du flexibler. Sollte sich die Struktur einmal ändern, brauchst du nicht an die Datenbank. Sollten sich einmal die Daten ändern, brauchst du nicht im Quelltext suchen.

Ist es schwer (...)

Grundsätzlich würde ich es nicht als schwer bezeichnen.

Was du brauchst:

• Mach dir darüber Gedanken, welche Inhalte in der Datenbank stehen sollen und wie du sie strukturierst. Man könnte die Daten beispielsweise je Seite oder Komponente bündeln. Was sich eher eignet, hängt von deiner Webseite ab.
• Natürlich den Datenbankserver sowie eine Verbindungsstelle, über die du mit der Datenbank von deiner Webanwendung aus kommunizieren kannst. Je nachdem, mit welcher Programmiersprache du nun deine Webanwendung baust, kannst du in der Regel Bibliotheken o.ä. finden, die dir dabei helfen.
• Je nach Datenbanksystem musst du wissen, wie du Anfragen (Queries) formulieren kannst.
• Programmierkenntnisse mit der Programmiersprache, mit der du deine (serverseitige) Webanwendung entwickelst. Je nachdem, welche Seite angefordert wird, muss deine Anwendung eine Anfrage an die Datenbank stellen. Die empfangenen Daten kannst du nun direkt in das HTML einsetzen, welches an den Browser geschickt wird (an der Stelle lohnt es sich, eine Template-Engine zu verwenden) oder du gibst es an eine JavaScript-Anwendung weiter, die die Daten im Browser in die jeweiligen DOM-Knoten einsetzt.

Ich würde an der Stelle empfehlen, direkt nach Frameworks oder Sets zu schauen, die dir die erwähnten Funktionen bieten, und dich in diese einzuarbeiten.

Zum Beispiel:

• Django (Python)
• Express + Prisma + Pug/EJS (JavaScript)
• Flask + Flask-PyMongo (Python)
• Laravel (PHP)
• Quarkus (Java)
• Spring + Thymeleaf (Java)
• Yii + Twig (PHP)

Alternativ könntest du auch direkt ein CMS nutzen. Die übernehmen für dich die Datenverwaltung. Du gibst die Struktur deiner Inhalte vor (Seiten, evt. auch Seitentemplates) und kannst zudem für die Präsentation (Weboberfläche) ein eigenes Theme anlegen. Der Vorteil gegenüber den obigen Lösungen ist, dass du als Nutzer deine Daten einfacher verwalten kannst, da das CMS dir dafür eine grafische Oberfläche aufbereitet.

Du kannst einen Typ erstellen:

type TMatrix = array[1..8, 1..8] of Integer;

und diesen als Rückgabewert verwenden:

function GetZuege() : TMatrix;

Oder aber du verwendest ein generisches, dynamisches Array:

function GetZuege() : TArray<TArray<Integer>>;

Zumindest auf Spyder hab ich probleme Pytorch zu installieren.

Schau, ob du die neueste Version von Spyder nutzt. Des Weiteren wäre an der Stelle die Frage, ob das Problem nicht eher woanders liegt. Die Installation läuft ja üblicherweise über conda ab.

Hat jemand eine gute Umgebung, wo ich einfach sachen wie libary Pytorch installieren kann?

PyCharm bietet sich an. Wenn das Installationsproblem jedoch, wie schon erwähnt, beim Package Manager liegt, wirst du mit PyCharm ebenso Probleme haben.

Inwiefern du nun genau Wissen mit Python aufgebaut hast, beschreibst du leider nicht konkret. Daher wäre meine erste Empfehlung, dass du dich erst einmal weiter praktisch mit Python beschäftigst und dir anschaust, was du in deinen jeweiligen Interessensgebieten damit bereits erreichen kannst.

Bezogen auf Themen wie AI/ML oder Cybersecurity (in Kombination mit Python) gibt es zudem zahlreiche Literatur und je Bereich auch verschiedene Tools (z.B. Bibliotheken/Frameworks wie Keras, PyTorch, Scapy, Tensorflow, YARA), mit denen du dich einmal näher beschäftigen könntest.

Eine sinnvolle Ergänzung für Python wären C oder C++. Beide Programmiersprachen erlauben einen direkteren Systemzugriff, was gerade im Bereich Cybersecurity nicht uninteressant ist. Generell finden sie in den von dir genannten Themen Anwendung.

Außerdem kannst du mit ihnen bei Bedarf Erweiterungen (extension modules) für Python entwickeln, die dann beispielsweise spezifische System- oder rechenlastige Operationen übernehmen.

Bezüglich der Entwicklung einer Sicherheits-/Antivirensoftware wäre es ratsam, nach dem üblichen Verfahren der Softwareentwicklung vorzugehen (erst analysieren/planen, dann implementieren). Je nach den gestellten Anforderungen wirst du dich nochmal tiefer in bestimmte Punkte einarbeiten bzw. recherchieren müssen (z.B. Welche Arten an Malware gibt es? Wie funktionieren sie? Wie kann man sie erkennen und blockieren? Inwiefern lässt sich AI einweben? Welche Hilfstools gibt es bereits?).

Die Seite der Rheinland GmbH hat zwar auch Schwächen (z.B. Rechtschreibfehler, die hässlichen weißen Boxen auf der Startseite, leere Überschriften und falsche Texthierarchien auf der Datenschutzseite, doppelte Galeriebilder oder ein paar überdimensionale Überschriften), erscheint meines Erachtens aber überlegter aufgebaut, als Handwerk14. Die Platzaufteilung ist besser und die Inhalte vermitteln ein deutlicheres Bild von dem Unternehmen (z.B. Leistungen, Einsatzgebiet, Referenzen).

Bei Handwerk14 hat man den Eindruck, dass mehrere falsche Designentscheidungen getroffen und die Inhalte lieblos hineingeklatscht wurden.

Beispiele:

• Der Footer ist viel zu groß, die zwei Links könnten locker auf eine Zeile
• Generell weiß man auf der Seite nicht, mit dem eingeforderten Platz umzugehen: Mal werden Texte in Lücken hineingezwängt, mal ist der Weißraum riesig (Inhalte/Sektionen könnten in diesen Fällen zusammengefasst werden)
• Der Prefooter (Kontakt) ist völlig überflüssig, da es bereits eine eigene Seite gibt, auf der er im Übrigen ebenso noch einmal ausgespielt wird
• Der Back-to-top-Button hebt sich gerade auf Footerhöhe im Kontrast nicht deutlich ab
• Der Text auf der Datenschutzseite ist größtenteils unformatiert
• Die Seite hat nicht einmal ein eigenes Favicon, obwohl es doch zumindest ein Logo gibt
• Mehrere der genutzten Fotos sind nicht gut, entweder in der Qualität, dem Blickwinkel/Ausschnitt oder der Kulisse

Die technische Umsetzung habe ich mir in beiden Fällen nicht näher angeschaut.