Junior Full Stack Developer Interviewfragen: Was du vorbereiten solltest

Beginne mit den Full-Stack-Grundlagen

Ein Junior-Full-Stack-Interview prüft meist, ob du erklären kannst, wie eine einfache Web-App vom Browser bis zur Datenbank funktioniert: HTML und CSS strukturieren die Seite, JavaScript steuert Verhalten, React verwaltet UI-State, Node.js übernimmt Serverlogik, APIs verbinden die Schichten, SQL speichert Daten und Git macht Arbeit nachvollziehbar.

Nutze diesen Leitfaden, um zuerst kurze, klare Antworten zu üben. Verbinde danach jede Antwort mit einem kleinen Projekt, das du selbst gebaut hast. Auf Junior-Level erwartet man selten tiefe Architektur, aber klare Grundlagen, saubere Debugging-Gewohnheiten und ehrliche Trade-offs.

So bereitest du dich vor

• Erkläre ein Projekt vom UI-Event über den API-Request bis zur Datenbankabfrage.
• Übe, über behobene Fehler zu sprechen, nicht nur über fertige Features.
• Halte Antworten praktisch: Begriff definieren, kleines Beispiel geben, typische Fehler nennen.

---

HTML & CSS

1. Erkläre das Box Model in CSS.

Antwort: Das CSS Box Model ist die Grundlage für das Layout im Web. Jedes Element wird als rechteckige Box dargestellt.

• Content: Der eigentliche Text oder das Bild.
• Padding: Transparenter Bereich um den Inhalt (innerhalb des Rahmens).
• Border: Ein Rahmen, der um das Padding und den Inhalt verläuft.
• Margin: Transparenter Bereich außerhalb des Rahmens (schafft Platz zwischen Elementen).

Seltenheit: Sehr häufig Schwierigkeitsgrad: Leicht

---

2. Was ist der Unterschied zwischen display: block, inline und inline-block?

Antwort:

• Block: Beginnt in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein (z. B. <div>, <p>).
• Inline: Beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite ein, wie nötig ist. width- und height-Eigenschaften haben keine Auswirkung (z. B. <span>, <a>).
• Inline-block: Wie Inline-Elemente, aber Sie können width und height festlegen. Nützlich für Raster oder Navigationsmenüs.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

3. Was ist Semantic HTML und warum ist es wichtig?

Antwort: Semantic HTML bedeutet, Tags zu verwenden, die die Bedeutung des Inhalts vermitteln, nicht nur sein Aussehen.

• Beispiele: <header>, <nav>, <article>, <footer> anstelle von nur <div>s.
• Bedeutung:
  • Barrierefreiheit: Screenreader verwenden diese Tags, um sehbehinderten Benutzern die Navigation zu erleichtern.
  • SEO: Suchmaschinen verstehen die Struktur und Bedeutung von Inhalten besser.
  • Lesbarkeit: Code ist für Entwickler leichter verständlich.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

4. Erkläre Flexbox vs. CSS Grid.

Antwort:

• Flexbox: Ein eindimensionales Layoutmodell (Zeile ODER Spalte). Am besten geeignet, um Elemente innerhalb eines Containers auszurichten oder den Platz zu verteilen (z. B. eine Navigationsleiste).
• CSS Grid: Ein zweidimensionales Layoutmodell (Zeilen UND Spalten). Am besten geeignet, um das Gesamtlayout einer Seite zu definieren (z. B. Header, Seitenleiste, Hauptinhalt, Footer).

Seltenheit: Häufig Schwierigkeitsgrad: Mittel

---

JavaScript

5. Was ist der Unterschied zwischen var, let und const?

Antwort:

• var: Funktionsbezogener Gültigkeitsbereich (oder globaler Gültigkeitsbereich). Kann neu deklariert und aktualisiert werden. Wird an den Anfang seines Gültigkeitsbereichs "gehoben" (Hoisting).
• let: Blockbezogener Gültigkeitsbereich (existiert nur innerhalb von {}). Kann aktualisiert, aber nicht im selben Gültigkeitsbereich neu deklariert werden.
• const: Blockbezogener Gültigkeitsbereich. Kann weder aktualisiert noch neu deklariert werden. Muss bei der Deklaration initialisiert werden. Verwenden Sie dies standardmäßig, es sei denn, Sie müssen es neu zuweisen.

Seltenheit: Sehr häufig Schwierigkeitsgrad: Leicht

---

6. Erkläre async und await.

Antwort: async und await (eingeführt in ES2017) lassen asynchronen Code eher wie synchronen Code aussehen und sich auch so verhalten.

• async: Vor eine Funktion gesetzt, stellt es sicher, dass die Funktion eine Promise zurückgibt.
• await: Wird innerhalb einer async-Funktion verwendet und pausiert die Ausführung, bis die Promise aufgelöst ist.
• Vorteil: Sauberer und besser lesbar als das Verketten von .then() und .catch().

Seltenheit: Häufig Schwierigkeitsgrad: Mittel

---

7. Was ist das DOM?

Antwort: Das DOM (Document Object Model) ist eine Programmierschnittstelle für Webdokumente. Es repräsentiert die Seite, sodass Programme (JavaScript) die Dokumentstruktur, den Stil und den Inhalt ändern können. Das DOM repräsentiert das Dokument als Knoten und Objekte.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

8. Was ist der Unterschied zwischen == und ===?

Antwort:

• == (Lockere Gleichheit): Vergleicht Werte nach Durchführung einer Typumwandlung (Konvertierung in einen gemeinsamen Typ). Z. B. ist 5 == "5" true.
• === (Strikte Gleichheit): Vergleicht sowohl Wert als auch Typ. Keine Typumwandlung. Z. B. ist 5 === "5" false.
• Best Practice: Verwenden Sie immer ===, um unerwartete Fehler zu vermeiden.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

React

9. Was ist das Virtual DOM?

Antwort: Das Virtual DOM ist eine leichtgewichtige Kopie des realen DOM, die im Speicher gehalten wird.

• Prozess: Wenn sich der Zustand ändert, aktualisiert React zuerst das Virtual DOM. Anschließend vergleicht es das neue Virtual DOM mit dem vorherigen (Diffing) und berechnet die effizienteste Methode, um das reale DOM zu aktualisieren (Reconciliation).
• Vorteil: Minimiert die direkte Manipulation des langsamen realen DOM, was die Leistung verbessert.

Seltenheit: Häufig Schwierigkeitsgrad: Mittel

---

10. Was sind Props und State?

Antwort:

• Props (Properties): Nur-Lese-Daten, die von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden. Sie ermöglichen es, Komponenten wiederverwendbar und dynamisch zu gestalten.
• State: Daten, die innerhalb der Komponente verwaltet werden. Sie können sich im Laufe der Zeit ändern (z. B. Benutzereingaben, API-Antwort). Wenn sich der Zustand ändert, wird die Komponente neu gerendert.

Seltenheit: Sehr häufig Schwierigkeitsgrad: Leicht

---

11. Was sind React Hooks? Nenne ein paar gängige.

Antwort: Hooks sind Funktionen, mit denen Funktionskomponenten React-Funktionen wie State, Context, Refs und Effects nutzen können.

• useState: Speichert lokalen Component-State, zum Beispiel Formulareingaben oder einen ausgewählten Tab.
• useEffect: Synchronisiert eine Komponente mit etwas außerhalb von React, etwa Datenabruf oder ein Event-Abo. Es ist nicht für jede Berechnung gedacht.
• useContext: Liest gemeinsamen Context, ohne Props durch jede Ebene weiterzugeben.
• Interview-Tipp: Nenne die Rules of Hooks: Hooks oben in einer React-Komponente oder einem Custom Hook aufrufen, nicht in Schleifen oder Bedingungen.

Seltenheit: Häufig Schwierigkeitsgrad: Mittel

---

Node.js & Backend

12. Was ist Node.js und warum ist es Single-Threaded?

Antwort: Node.js ist eine JavaScript-Laufzeitumgebung auf Basis der V8-Engine. JavaScript läuft auf einem Hauptthread, kann aber viele I/O-lastige Aufgaben verarbeiten, weil die Event Loop asynchrone Arbeit koordiniert.

• Hauptthread: Führt deine JavaScript-Callbacks aus.
• Non-blocking I/O: Datei-, Netzwerk- und Datenbankoperationen können an Betriebssystem oder libuv delegiert und später fortgesetzt werden.
• Wichtige Grenze: CPU-lastiger JavaScript-Code kann die Event Loop trotzdem blockieren. Für teure Arbeit nutzt man Worker Threads, eine Job Queue oder verlagert sie aus dem Request-Pfad.
• Gutes Beispiel: Ein API-Server, der auf viele Datenbank- oder Netzwerkaufrufe wartet.

Seltenheit: Häufig Schwierigkeitsgrad: Mittel

---

13. Was ist NPM und package.json?

Antwort:

• NPM (Node Package Manager): Der Standard-Paketmanager für Node.js. Es ermöglicht Ihnen, Bibliotheken (Abhängigkeiten) zu installieren und zu verwalten.
• package.json: Die Manifestdatei für ein Node.js-Projekt. Sie listet Metadaten (Name, Version) und Abhängigkeiten (Bibliotheken, die zum Ausführen der App erforderlich sind) auf.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

14. Erkläre den Unterschied zwischen GET und POST.

Antwort:

• GET: Ruft eine Ressource ab. Es sollte safe sein, also den Serverzustand nicht absichtlich ändern, und idempotent sein, sodass wiederholte gleiche Anfragen dieselbe Wirkung haben.
• POST: Sendet Daten, die der Server verarbeitet, oft zum Erstellen einer Ressource oder Auslösen einer Aktion. Es ist nicht garantiert idempotent; wiederholte POSTs können also doppelte Arbeit erzeugen, wenn die API das nicht verhindert.
• Praktisches Beispiel: GET lädt eine Produktliste; POST sendet eine Bestellung oder erstellt einen Kommentar.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

Datenbank (SQL)

15. Was ist ein Primary Key und ein Foreign Key?

Antwort:

• Primary Key: Eine Spalte (oder eine Menge von Spalten), die jede Zeile in einer Tabelle eindeutig identifiziert. Sie darf nicht NULL sein.
• Foreign Key: Eine Spalte, die auf den Primary Key einer anderen Tabelle verweist. Sie stellt eine Beziehung zwischen zwei Tabellen her.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

16. Erkläre den Unterschied zwischen INNER JOIN und LEFT JOIN.

Antwort:

• INNER JOIN: Gibt Datensätze zurück, die in beiden Tabellen übereinstimmende Werte haben.
• LEFT JOIN (oder LEFT OUTER JOIN): Gibt alle Datensätze aus der linken Tabelle und die übereinstimmenden Datensätze aus der rechten Tabelle zurück. Wenn keine Übereinstimmung vorhanden ist, ist das Ergebnis auf der rechten Seite NULL.

Seltenheit: Sehr häufig Schwierigkeitsgrad: Mittel

---

17. Was ist Normalisierung?

Antwort: Normalisierung ist der Prozess der Organisation von Daten in einer Datenbank, um Redundanz zu reduzieren und die Datenintegrität zu verbessern.

• Ziel: Größere Tabellen in kleinere Tabellen aufteilen und diese mithilfe von Beziehungen verknüpfen.
• Formen: 1NF, 2NF, 3NF (die dritte Normalform ist für die meisten Anwendungen in der Regel ausreichend).

Seltenheit: Ungewöhnlich (für Juniors) Schwierigkeitsgrad: Mittel

---

Allgemein

18. Was ist Git und warum verwenden wir es?

Antwort: Git ist ein verteiltes Versionskontrollsystem.

• Verwendung: Es verfolgt Änderungen im Quellcode während der Softwareentwicklung.
• Vorteile: Ermöglicht die Zusammenarbeit mehrerer Entwickler (Collaboration), speichert einen Verlauf der Änderungen (Versioning) und ermöglicht die Wiederherstellung früherer Zustände, wenn etwas kaputt geht.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

19. Was ist eine API?

Antwort: API steht für Application Programming Interface (Anwendungsprogrammierschnittstelle). Es handelt sich um eine Reihe von Regeln, die es verschiedenen Softwareanwendungen ermöglichen, miteinander zu kommunizieren. In der Webentwicklung bezieht es sich normalerweise auf eine REST-API, bei der ein Frontend (Client) Daten von einem Backend (Server) anfordert.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht

---

20. Wie debuggt man eine Webanwendung?

Antwort: Beginne damit, den Fehler zu reproduzieren und einzugrenzen: Browser, Netzwerk-Request, Backend-Handler oder Datenbank.

• Frontend: Nutze Browser DevTools: Console für Fehler, Network für API-Status und Payloads, Elements für HTML/CSS und bei Bedarf React DevTools.
• Backend: Prüfe strukturierte Logs, Request-IDs, Stacktraces, Umgebungsvariablen und Datenbankabfragen. Nutze einen Debugger, wenn der Kontrollfluss unklar ist.
• Gute Interviewantwort: Beschreibe einen echten Bug, was du zuerst geprüft hast und wie du den Fix bestätigt hast.

Seltenheit: Häufig Schwierigkeitsgrad: Leicht