← Wszystkie tematy

Pytania rekrutacyjne HTML i CSS (Junior) z odpowiedziami

75 pytań na rozmowę rekrutacyjną z tematu HTML i CSS (Junior) - z poprawnymi odpowiedziami, wyjaśnieniami i linkami do dokumentacji.

Rozwiąż ten test
  1. 1.Po co dokumenty HTML zaczynają się od <!DOCTYPE html>?
  2. 2.Który zestaw zawiera wyłącznie semantyczne elementy HTML5?
  3. 3.Ile widocznych elementów <main> może mieć strona i do czego on służy?
  4. 4.Czym domyślnie różni się <div> od <span>?
  5. 5.Ustawiasz width: 200px; height: 50px na <span> bez innych stylów. Co się stanie?
  6. 6.Czym display: inline-block różni się od inline?
  7. 7.Jak w JavaScript odczytać wartość atrybutu data-user-id="42"?
  8. 8.Jaka jest główna różnica między atrybutami id i class?
  9. 9.Po co dodawać rel="noopener noreferrer" do linku z target="_blank"?
  10. 10.Jaki jest domyślny type przycisku <button> wewnątrz <form>?
  11. 11.Po co łączyć <label> z <input> przez for i id?
  12. 12.Jaki alt powinien mieć obrazek czysto dekoracyjny (np. ozdobny separator)?
  13. 13.Co robi box-sizing: border-box?
  14. 14.Czym padding różni się od margin?
  15. 15.Dwa bloki stoją jeden pod drugim. Górny ma margin-bottom: 20px, dolny margin-top: 30px. Jaki jest odstęp między nimi?
  16. 16.Oba selektory ustawiają color temu samemu linkowi. Który wygra: #nav a czy .menu .item a.link?
  17. 17.Która z tych właściwości jest domyślnie dziedziczona przez elementy potomne?
  18. 18.Czym display: none różni się od visibility: hidden?
  19. 19.Jak zachowuje się element z position: relative; top: 10px?
  20. 20.Względem czego pozycjonowany jest element z position: absolute?
  21. 21.Jak działa position: sticky; top: 0?
  22. 22.Do jakich elementów stosuje się z-index?
  23. 23.Czym rem różni się od em?
  24. 24.Ile wynosi 50vw?
  25. 25.Jak zwykle pisze się media queries w podejściu mobile-first?
  26. 26.Po co jest <meta name="viewport" content="width=device-width, initial-scale=1">?
  27. 27.Wzdłuż której osi justify-content wyrównuje elementy w kontenerze flex?
  28. 28.Kontener ma display: flex; flex-direction: column; justify-content: center. Jak wyrównane są jego dzieci?
  29. 29.Co robi flex-wrap: wrap?
  30. 30.Jak najprościej równomiernie rozstawić elementy flex bez dodatkowego odstępu po ostatnim?
  31. 31.Które podejście poprawnie centruje blok poziomo i pionowo wewnątrz rodzica?
  32. 32.Co definiuje grid-template-columns: repeat(3, 1fr)?
  33. 33.Jak sprawić, by element grid zajmował całą szerokość siatki niezależnie od liczby kolumn?
  34. 34.Czym pseudoklasa różni się od pseudoelementu?
  35. 35.Jak bez JavaScript pokolorować na czerwono ostatni element listy o dowolnej długości?
  36. 36.Dlaczego ::before z samymi width, height i background się nie pokazuje?
  37. 37.Jak poprawnie zadeklarować i użyć zmiennej CSS?
  38. 38.Co oznaczają dwie ostatnie cyfry w kolorze #3366ff80?
  39. 39.Kiedy lepiej użyć <img> zamiast background-image?
  40. 40.Po co poziomy nagłówków <h1>–<h6>, skoro rozmiar można ustawić w CSS?
  41. 41.Kiedy używać <a>, a kiedy <button>?
  42. 42.Do czego służy lista <dl>?
  43. 43.Formularz jest wysyłany metodą GET. Gdzie trafiają dane pól?
  44. 44.Co daje <input type="email"> w porównaniu z type="text"?
  45. 45.Co robi atrybut required na polu formularza?
  46. 46.Na czym polega podejście utility-first w Tailwind CSS?
  47. 47.Co oznacza klasa md:flex w Tailwind?
  48. 48.Ile wynosi p-4 w Tailwind przy domyślnej konfiguracji?
  49. 49.Jak w Tailwind zmienić tło przycisku po najechaniu kursorem?
  50. 50.Jak domyślnie działa wariant dark: w Tailwind v4?
  51. 51.Kiedy użyć <article> zamiast <section>?
  52. 52.Czym <strong> różni się od <b>?
  53. 53.Co się stanie, gdy umieścisz <div> wewnątrz <p> w HTML?
  54. 54.Kiedy <table> jest właściwym wyborem?
  55. 55.Co jest wysyłane na serwer dla niezaznaczonego checkboxa?
  56. 56.Dlaczego placeholder nie zastępuje <label>?
  57. 57.Jak poprawnie oznaczyć grupę powiązanych przycisków radio?
  58. 58.Do czego służą <figure> i <figcaption>?
  59. 59.Czym overflow: auto różni się od overflow: scroll?
  60. 60.Dlaczego text-align: center nie centruje <div> o stałej szerokości w rodzicu?
  61. 61.Dlaczego bezjednostkowe line-height: 1.5 jest zwykle lepsze niż line-height: 24px?
  62. 62.Czym opacity: 0.5 na karcie różni się od background: rgb(0 0 0 / 0.5)?
  63. 63.Jak stosować style hover tylko na urządzeniach, które naprawdę potrafią najechać kursorem?
  64. 64.Czym różnią się .menu a i .menu > a?
  65. 65.Który element wybiera h2 + p?
  66. 66.Co wybiera input[type="email"]?
  67. 67.Dlaczego img { max-width: 100%; height: auto; } to częsta reguła bazowa?
  68. 68.Co ustawia margin: 10px 20px?
  69. 69.Jak zrobić z kwadratowego awatara koło?
  70. 70.Po co kończyć listę font-family rodziną ogólną, np. sans-serif?
  71. 71.Jakie ryzyko dla dostępności niesie zmiana kolejności elementów flex przez order?
  72. 72.Dlaczego elementy flex w wierszu mają domyślnie równą wysokość?
  73. 73.Co wygrywa: reguła w arkuszu stylów czy atrybut inline style?
  74. 74.Co robi class="hidden md:block" w Tailwind?
  75. 75.Po co ustawiać atrybut lang na <html>?