Fragen im Bewerbungsgespräch für Frontend-Entwickler/-innen

Inhaltsverzeichnis

  1. Allgemeine Fragen
  2. HTML Fragen
  3. CSS Fragen
  4. JS Fragen
  5. Code Fragen
  6. Test Fragen
  7. Performance Fragen
  8. Netzwerk Fragen
  9. Spaß Fragen

[⬆] Allgemeine Fragen:

  • Was hast du gestern/diese Woche gelernt?
  • Was reizt oder interessiert dich am Programmieren?
  • Welche technische Herausforderung hast du kürzlich erlebt und wie hast du sie gelöst?
  • Kannst du beim Aufbau einer neuen Website oder bei der Wartung einer Website einige Techniken erklären, die du zur Leistungssteigerung eingesetzt hast?
  • Kannst du einige bewährte SEO-Verfahren oder Techniken beschreiben, die du in letzter Zeit verwendet hast?
  • Kannst du gängige Techniken oder kürzlich gelöste Probleme in Bezug auf die Front-End-Sicherheit erläutern?
  • Welche Maßnahmen hast du persönlich bei aktuellen Projekten ergriffen, um die Wartbarkeit deines Codes zu verbessern?
  • Erzähl mir bitte etwas über deine bevorzugte Entwicklungsumgebung.
  • Mit welchen Versionskontrollsystemen bist du vertraut?
  • Kannst du deinen Arbeitsablauf beschreiben, wenn du eine Webseite erstellst?
  • Wenn du 5 verschiedene Stylesheets hast, wie würdest du diese am besten in die Website integrieren?
  • Kannst du den Unterschied zwischen Progressive Enhancement und Graceful Degradation beschreiben?
  • Wie würdest du die Assets/Ressourcen einer Website optimieren?
  • Wie viele Ressourcen kann ein Browser gleichzeitig von einer bestimmten Domain herunterladen?
    • Welche Ausnahmen gibt es?
  • Nenne 3 Möglichkeiten zur Verringerung der Seitenladezeit (gefühlte oder tatsächliche Ladezeit).
  • Was würdest du tun, wenn du in ein Projekt einsteigst, bei dem Tabulatoren verwendet werden und du Leerzeichen verwendest?
  • Beschreibe, wie du eine einfache Diashow-Seite erstellen würdest.
  • Wenn du in diesem Jahr eine Technologie beherrschen könntest, welche wäre das?
  • Erkläre die Bedeutung von Standards und Standardisierungsgremien.
  • Was ist Flash of Unstyled Content (FOUC)? Wie vermeidest du FOUC?
  • Erkläre, was ARIA und Screenreader sind und wie man eine Website barrierefrei macht.
  • Erkläre einige Vor- und Nachteile von CSS-Animationen im Vergleich zu JavaScript-Animationen.
  • Wofür steht CORS und welches Problem löst es?
  • Wie hast du einen Konflikt mit deinem Chef oder deinem Mitarbeiter gelöst?
  • Welche Ressourcen nutzt du, um dich über die neuesten Entwicklungen im Bereich Frontend-Entwicklung und Design zu informieren?
  • Welche Fähigkeiten sind notwendig, um ein guter Frontend-Entwickler zu sein?
  • Welche Rolle siehst du für dich selbst?
  • Erkläre den Unterschied zwischen Cookies, Session Storage und Local Storage.
  • Kannst du erklären, was passiert, wenn du eine URL in den Browser eingibst?
  • Beschreibe den Unterschied zwischen Server-Side Rendering (SSR) und Client-Side Rendering (CSR). Diskutiere die Vor- und Nachteile.
    • Bist du mit statischem Rendering vertraut?
    • Und mit Rehydration?

[⬆] HTML Fragen:

  • Was macht ein doctype?
  • Wie stellst du eine Seite mit Inhalten in mehreren Sprachen bereit?
  • Worauf musst du achten, wenn du für mehrsprachige Websites designst oder entwickelst?
  • Wofür sind data- Attribute gut?
  • Betrachte HTML5 als offene Webplattform. Was sind die Bausteine von HTML5?
  • Beschreibe den Unterschied zwischen einem cookie, sessionStorage und localStorage.
  • Beschreibe den Unterschied zwischen <script>, <script async> und <script defer>.
  • Warum ist es im Allgemeinen eine gute Idee, CSS <link>-Tags zwischen <head></head> und JS <script>-Tags direkt vor </body> zu positionieren? Kennst du Ausnahmen?
  • Was ist progressives Rendering?
  • Warum würdest du ein srcset-Attribut in einem Image-Tag verwenden? Erkläre den Prozess, den der Browser bei der Auswertung des Inhalts dieses Attributs verwendet.
  • Hast du schon verschiedene HTML-Templating-Sprachen verwendet?
  • Was ist der Unterschied zwischen canvasund svg?
  • Was sind leere Elemente in HTML?

[⬆] CSS Fragen:

  • Was ist die Spezifität von CSS-Selektoren und wie funktioniert sie?
  • Was ist der Unterschied zwischen “Resetting” und “Normalizing” von CSS? Was würdest du wählen und warum?
  • Beschreibe Floats und wie sie funktionieren.
  • Beschreibe z-index und wie der Stapelkontext (stacking context) gebildet wird.
  • Beschreibe BFC (Block Formatting Context) und wie er funktioniert.
  • Was sind die verschiedenen Clearing-Techniken und welche ist für welchen Kontext geeignet?
  • Wie würdest du browser-spezifische Styling-Probleme beheben?
  • Wie stellst du deine Seiten für funktionsbeschränkte Browser bereit?
    • Welche Techniken/Prozesse verwendest du?
  • Was sind die verschiedenen Möglichkeiten, Inhalte visuell zu verstecken (und nur für Screenreader verfügbar zu machen)?
  • Hast du jemals ein Grid-System verwendet und wenn ja, welches bevorzugst du?
  • Hast du Medienabfragen oder mobile spezifische Layouts/CSS verwendet oder implementiert?
  • Bist du mit dem Styling von SVGs vertraut?
  • Kannst du ein Beispiel für eine @media-Eigenschaft außer screen geben?
  • Was sind einige der “gotchas” beim Schreiben von effizientem CSS?
  • Was sind die Vor- und Nachteile der Verwendung von CSS-Präprozessoren?
    • Beschreibe, was du an den von dir verwendeten CSS-Präprozessoren magst und nicht magst.
  • Wie würdest du ein Webdesign-Comp umsetzen, das nicht standardmäßige Schriftarten verwendet?
  • Erkläre, wie ein Browser bestimmt, welche Elemente einem CSS-Selektor entsprechen.
  • Beschreibe Pseudo-Elemente und wofür sie verwendet werden.
  • Erkläre dein Verständnis des Box-Modells und wie du dem Browser in CSS mitteilen würdest, dein Layout in verschiedenen Box-Modellen darzustellen.
  • Was macht * { box-sizing: border-box; }? Was sind seine Vorteile?
  • Was ist die CSS display-Eigenschaft und kannst du ein paar Beispiele für ihre Verwendung geben?
  • Was ist der Unterschied zwischen inline und inline-block?
  • Was ist der Unterschied zwischen den Selektoren “nth-of-type()” und “nth-child()”?
  • Was ist der Unterschied zwischen einem relativ, fest, absolut und statisch positionierten Element?
  • Welche bestehenden CSS-Frameworks hast du lokal oder in der Produktion verwendet? Wie würdest du sie ändern/verbessern?
  • Hast du CSS Grid verwendet?
  • Kannst du den Unterschied erklären, eine Website responsiv zu codieren, im Vergleich zur Verwendung einer Mobile-First-Strategie?
  • Hast du jemals mit Retina-Grafiken gearbeitet? Wenn ja, wann und welche Techniken hast du verwendet?
  • Gibt es einen Grund, warum du translate() anstelle von absolutem Positionieren verwenden würdest, oder umgekehrt? Und warum?
  • Wie ist die CSS-Eigenschaft clearfix nützlich?
  • Kannst du den Unterschied zwischen px, em und rem in Bezug auf Schriftgrößen erklären?
  • Kannst du ein Beispiel für eine Pseudo-Klasse geben? Kannst du ein Anwendungsbeispiel für eine Pseudo-Klasse nennen?
  • Was ist der Unterschied zwischen einem Block-Level-Element und einem Inline-Element? Kannst du Beispiele für beide Elementtypen nennen?
  • Was ist der Unterschied zwischen CSS Grid und Flexbox? Wann würdest du welches verwenden?
  • Was ist der Unterschied zwischen festen, fluiden und responsiven Layouts?

[⬆] JS Fragen:

  • Erkläre Event Delegation.
  • Erkläre, wie this in JavaScript funktioniert.
    • Kannst du ein Beispiel dafür geben, wie sich die Arbeit mit this in ES6 geändert hat?
  • Erkläre, wie die prototypische Vererbung funktioniert.
  • Was ist der Unterschied zwischen einer Variable, die null, undefined oder nicht deklariert ist?
    • Wie würdest du einen dieser Zustände überprüfen?
  • Was ist ein Closure, und wie/warum würdest du eines verwenden?
  • Welche Sprachkonstruktionen verwendest du, um über Objekteigenschaften und Array-Elemente zu iterieren?
  • Kannst du den Hauptunterschied zwischen der Array.forEach()-Schleife und den Array.map()-Methoden beschreiben und warum du die eine der anderen vorziehen würdest?
  • Was ist ein typischer Anwendungsfall für anonyme Funktionen?
  • Was ist der Unterschied zwischen Host-Objekten und nativen Objekten?
  • Erkläre den Unterschied zwischen: function Person(){}, var person = Person() und var person = new Person()?
  • Erkläre die Unterschiede in der Verwendung von foo zwischen function foo() {} und var foo = function() {}.
  • Kannst du erklären, was Function.call und Function.apply machen? Was ist der bemerkenswerte Unterschied zwischen den beiden?
  • Erkläre Function.prototype.bind.
  • Was ist der Unterschied zwischen Feature Detection, Feature Inference und der Verwendung des UA-Strings?
  • Erkläre “Hoisting”.
  • Was ist Typenkonvertierung? Was sind häufige Fallstricke bei der Verwendung von Typenkonvertierungen in JavaScript-Code?
  • Beschreibe Event Bubbling.
  • Beschreibe Event Capturing.
  • Was ist der Unterschied zwischen einem “Attribut” und einer “Eigenschaft”?
  • Was sind die Vor- und Nachteile der Erweiterung eingebauter JavaScript-Objekte?
  • Was ist der Unterschied zwischen == und ===?
  • Erkläre die Same-Origin-Policy in Bezug auf JavaScript.
  • Warum wird es Ternary Operator genannt, was bedeutet das Wort “Ternary”?
  • Was ist der Strict Mode? Was sind einige der Vor- und Nachteile seiner Verwendung?
  • Was sind einige der Vor- und Nachteile, JavaScript-Code in einer Sprache zu schreiben, die in JavaScript kompiliert wird?
  • Welche Werkzeuge und Techniken verwendest du zum Debuggen von JavaScript-Code?
  • Erkläre den Unterschied zwischen veränderlichen und unveränderlichen Objekten.
    • Was ist ein Beispiel für ein unveränderliches Objekt in JavaScript?
    • Was sind die Vor- und Nachteile der Unveränderlichkeit?
    • Wie kannst du Unveränderlichkeit in deinem eigenen Code erreichen?
  • Erkläre den Unterschied zwischen synchronen und asynchronen Funktionen.
  • Was ist die Event Loop?
    • Was ist der Unterschied zwischen Call Stack und Task Queue?
  • Was sind die Unterschiede zwischen Variablen, die mit let, var oder const erstellt wurden?
  • Was sind die Unterschiede zwischen ES6-Klassen und ES5-Funktionskonstruktoren?
  • Kannst du einen Anwendungsfall für die neue Arrow-Funktion =>Syntax bieten? Wie unterscheidet sich diese neue Syntax von anderen Funktionen?
  • Welchen Vorteil hat die Verwendung der Arrow-Syntax für eine Methode in einem Konstruktor?
  • Was ist die Definition einer Higher-Order Function?
  • Kannst du ein Beispiel für das Destructuring eines Objekts oder Arrays geben?
  • Kannst du ein Beispiel für das Generieren eines Strings mit ES6-Template-Literalen geben?
  • Kannst du ein Beispiel für eine Curry-Funktion geben und warum diese Syntax einen Vorteil bietet?
  • Was sind die Vorteile der Verwendung der spread syntax und wie unterscheidet sie sich von der rest syntax?
  • Wie kannst du Code zwischen Dateien teilen?
  • Warum möchtest du vielleicht statische Klassenmitglieder erstellen?
  • Was ist der Unterschied zwischen while- und do-while-Schleifen in JavaScript?
  • Was ist ein promise? Wo und wie würdest du ein promise verwenden?
  • Erkläre, wie du objektorientierte Programmierprinzipien beim Programmieren mit JavaScript anwenden würdest.

[⬆] Code Fragen:

  • Mach, dass dies funktioniert:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Erstelle eine for-Schleife, die bis 100 iteriert und “fizz” bei Vielfachen von 3, “buzz” bei Vielfachen von 5 und “fizzbuzz” bei Vielfachen von 3 und `5 ausgibt.
  • Was wird jeweils zurückgegeben?
console.log("hello" || "world")
console.log("foo" && "bar")
  • Schreibe einen sofort ausgeführten Funktionsausdruck (IIFE).

[⬆] Test Fragen:

  • Was sind einige Vor- und Nachteile beim Testen deines Codes?
  • Welche Werkzeuge würdest du verwenden, um die Funktionalität deines Codes zu testen?
  • Was ist der Unterschied zwischen einem Unit-Test und einem funktionalen/integration Test?
  • Was ist der Zweck eines Code-Stil-Linting-Tools?
  • Was sind einige der Best Practices für das Testen?

[⬆] Performance Fragen:

  • Welche Werkzeuge würdest du verwenden, um einen Performance-Bug in deinem Code zu finden?
  • Welche Möglichkeiten gibt es, die Scroll-Performance deiner Website zu verbessern?
  • Erkläre den Unterschied zwischen Layout, Painting und Compositing.

[⬆] Netzwerk Fragen:

  • Warum war es traditionell besser, Site-Assets von mehreren Domains zu servieren?
  • Beschreibe den Prozess so gut wie möglich, vom Zeitpunkt, an dem du die URL einer Website eingibst, bis sie vollständig auf deinem Bildschirm geladen ist.
  • Was sind die Unterschiede zwischen Long-Polling, Websockets und Server-Sent Events?
  • Erkläre die folgenden Request- und Response-Header:
    • Unterschied zwischen Expires, Date, Age und If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Was sind HTTP-Methoden? Liste alle HTTP-Methoden auf, die du kennst, und erkläre sie.
  • Was ist Domain-Pre-Fetching und wie hilft es bei der Performance?
  • Was ist ein CDN und was ist der Vorteil der Verwendung eines solchen

[⬆] Spaß Fragen:

  • Was ist ein cooles Projekt, an dem du kürzlich gearbeitet hast?
  • Was magst du an den Entwickler-Tools, die du benutzt?
  • Wer inspiriert dich in der Frontend-Community?
  • Hast du irgendwelche Nebenprojekte? Welche Art?
Edit this page