Interviewfragen zu HTML und CSS (Junior) mit Antworten

75 Fragen fürs Vorstellungsgespräch zu HTML und CSS (Junior) mit richtigen Antworten, Erklärungen und Links zur Dokumentation.

Diesen Test machen
  1. 1.Warum beginnen HTML-Dokumente mit <!DOCTYPE html>?
  2. 2.Welche Gruppe enthält nur semantische HTML5-Elemente?
  3. 3.Wie viele sichtbare <main>-Elemente darf eine Seite haben, und wofür ist es?
  4. 4.Wie unterscheidet sich <div> standardmäßig von <span>?
  5. 5.Man setzt width: 200px; height: 50px auf ein <span> ohne weitere Styles. Was passiert?
  6. 6.Wie unterscheidet sich display: inline-block von inline?
  7. 7.Wie liest man in JavaScript den Wert des Attributs data-user-id="42"?
  8. 8.Was ist der Hauptunterschied zwischen den Attributen id und class?
  9. 9.Warum ergänzt man bei einem Link mit target="_blank" rel="noopener noreferrer"?
  10. 10.Welchen type hat ein <button> innerhalb eines <form> standardmäßig?
  11. 11.Warum verbindet man ein <label> über for und id mit einem <input>?
  12. 12.Welches alt sollte ein rein dekoratives Bild (etwa ein Trennornament) haben?
  13. 13.Was macht box-sizing: border-box?
  14. 14.Wie unterscheidet sich padding von margin?
  15. 15.Zwei Blöcke stehen untereinander. Der obere hat margin-bottom: 20px, der untere margin-top: 30px. Wie groß ist der Abstand zwischen ihnen?
  16. 16.Beide Selektoren setzen color auf denselben Link. Wer gewinnt: #nav a oder .menu .item a.link?
  17. 17.Welche dieser Eigenschaften erben Kindelemente standardmäßig?
  18. 18.Wie unterscheidet sich display: none von visibility: hidden?
  19. 19.Wie verhält sich ein Element mit position: relative; top: 10px?
  20. 20.Relativ wozu wird ein Element mit position: absolute positioniert?
  21. 21.Wie funktioniert position: sticky; top: 0?
  22. 22.Für welche Elemente gilt z-index?
  23. 23.Wie unterscheidet sich rem von em?
  24. 24.Wie viel ist 50vw?
  25. 25.Wie schreibt man Media Queries beim Mobile-first-Ansatz meist?
  26. 26.Wozu braucht man <meta name="viewport" content="width=device-width, initial-scale=1">?
  27. 27.Entlang welcher Achse richtet justify-content Items in einem Flex-Container aus?
  28. 28.Ein Container hat display: flex; flex-direction: column; justify-content: center. Wie sind seine Kinder ausgerichtet?
  29. 29.Was macht flex-wrap: wrap?
  30. 30.Wie verteilt man Flex-Items am einfachsten gleichmäßig, ohne Abstand nach dem letzten?
  31. 31.Welcher Ansatz zentriert einen Block im Elternelement richtig horizontal und vertikal?
  32. 32.Was legt grid-template-columns: repeat(3, 1fr) fest?
  33. 33.Wie lässt man ein Grid-Item unabhängig von der Spaltenzahl die volle Breite des Grids einnehmen?
  34. 34.Wie unterscheidet sich eine Pseudoklasse von einem Pseudoelement?
  35. 35.Wie färbt man das letzte Element einer Liste beliebiger Länge ohne JavaScript rot?
  36. 36.Warum erscheint ein ::before mit nur width, height und background nicht?
  37. 37.Wie deklariert und nutzt man eine CSS-Variable richtig?
  38. 38.Was bedeuten die letzten zwei Ziffern in der Farbe #3366ff80?
  39. 39.Wann ist <img> besser als background-image?
  40. 40.Wozu gibt es die Überschriftenebenen <h1>–<h6>, wenn man die Größe per CSS setzen kann?
  41. 41.Wann nutzt man <a> und wann <button>?
  42. 42.Wofür ist die Liste <dl>?
  43. 43.Ein Formular wird mit der Methode GET abgeschickt. Wohin gehen die Daten der Felder?
  44. 44.Was bringt <input type="email"> im Vergleich zu type="text"?
  45. 45.Was macht das Attribut required an einem Formularfeld?
  46. 46.Worum geht es beim Utility-first-Ansatz in Tailwind CSS?
  47. 47.Was bedeutet die Klasse md:flex in Tailwind?
  48. 48.Wie viel ist p-4 in Tailwind mit der Standardkonfiguration?
  49. 49.Wie ändert man in Tailwind den Hintergrund eines Buttons beim Überfahren?
  50. 50.Wie funktioniert die Variante dark: standardmäßig in Tailwind v4?
  51. 51.Wann nutzt man <article> statt <section>?
  52. 52.Wie unterscheidet sich <strong> von <b>?
  53. 53.Was passiert, wenn man in HTML ein <div> in ein <p> setzt?
  54. 54.Wann ist <table> die richtige Wahl?
  55. 55.Was wird für eine nicht angehakte Checkbox an den Server gesendet?
  56. 56.Warum ist placeholder kein Ersatz für <label>?
  57. 57.Wie markiert man eine Gruppe zusammengehöriger Radiobuttons aus?
  58. 58.Wofür sind <figure> und <figcaption>?
  59. 59.Wie unterscheidet sich overflow: auto von overflow: scroll?
  60. 60.Warum zentriert text-align: center ein <div> mit fester Breite im Elternelement nicht?
  61. 61.Warum ist ein line-height: 1.5 ohne Einheit meist besser als line-height: 24px?
  62. 62.Wie unterscheidet sich opacity: 0.5 an einer Karte von background: rgb(0 0 0 / 0.5)?
  63. 63.Wie wendet man Hover-Styles nur auf Geräten an, die wirklich hovern können?
  64. 64.Was ist der Unterschied zwischen .menu a und .menu > a?
  65. 65.Welches Element wählt h2 + p?
  66. 66.Was wählt input[type="email"]?
  67. 67.Warum ist img { max-width: 100%; height: auto; } eine verbreitete Basisregel?
  68. 68.Was setzt margin: 10px 20px?
  69. 69.Wie macht man aus einem quadratischen Avatarbild einen Kreis?
  70. 70.Warum beendet man eine font-family-Liste mit einer generischen Familie wie sans-serif?
  71. 71.Welches Risiko für die Barrierefreiheit hat das Umordnen von Flex-Items mit order?
  72. 72.Warum haben Flex-Items in einer Zeile standardmäßig die gleiche Höhe?
  73. 73.Welcher Style gewinnt: eine Regel im Stylesheet oder das Inline-Attribut style?
  74. 74.Was macht class="hidden md:block" in Tailwind?
  75. 75.Warum setzt man das Attribut lang an <html>?