Pytania rekrutacyjne HTML i CSS z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

HTML i CSS · Junior

1. Po co dokumenty HTML zaczynają się od <!DOCTYPE html>?

   Poprawna odpowiedź: Aby włączyć tryb standardów zamiast trybu quirks

   DOCTYPE nie jest ani znacznikiem, ani odnośnikiem do zasobu. Informuje przeglądarkę, że strona jest zgodna ze współczesnymi standardami, i włącza tryb standardów. Bez niego przeglądarka przechodzi w tryb quirks i emuluje błędy starych przeglądarek (np. inny model pudełkowy). Kodowanie ustawia <meta charset="utf-8">, a nie DOCTYPE.

2. Który zestaw zawiera wyłącznie semantyczne elementy HTML5?

   Poprawna odpowiedź: <header>, <nav>, <main>, <article>, <footer>

   Elementy semantyczne opisują znaczenie treści: nagłówek, nawigację, główną treść, samodzielny artykuł, stopkę. <div> i <span> to neutralne kontenery bez znaczenia, a <b> i <i> są prezentacyjne (wyróżnienie bez podkreślenia ważności). Semantyka pomaga czytnikom ekranu, wyszukiwarkom i czytelności kodu.

3. Ile widocznych elementów <main> może mieć strona i do czego on służy?

   Poprawna odpowiedź: Jeden - zawiera główną, unikalną treść strony

   <main> oznacza główną treść dokumentu, unikalną dla danej strony (bez nagłówka, menu i stopki). Widoczny może być tylko jeden (pozostałe wymagają atrybutu hidden). To punkt orientacyjny (landmark) dla czytników ekranu: użytkownik może od razu przeskoczyć do treści. <section> to sekcja tematyczna, a nie zamiennik <main>.

4. Czym domyślnie różni się <div> od <span>?

   Poprawna odpowiedź: <div> jest elementem blokowym, a <span> liniowym

   <div> ma domyślnie display: block: rozciąga się na całą szerokość rodzica i zaczyna się od nowej linii. <span> ma display: inline: płynie w tekście i jest tak szeroki jak jego zawartość. Żaden z nich nie niesie semantyki - oba są kontenerami do grupowania i stylowania.

HTML i CSS · Middle

1. Jaka jest specyficzność selektora nav#main .item:hover > a::before?

   Poprawna odpowiedź: (1, 2, 3) - identyfikator, klasa + pseudoklasa, dwa typy + pseudoelement

   Liczymy kolumnami: identyfikatory - #main (1); klasy, atrybuty i pseudoklasy - .item i :hover (2); typy i pseudoelementy - nav, a, ::before (3). Kombinatory (>, spacja) nie dodają specyficzności. Pseudoklasa waży jak klasa, a pseudoelement jak selektor typu.

2. Jak nadpisać regułę z !important z zewnętrznej biblioteki, nie ruszając jej kodu?

   Poprawna odpowiedź: Napisać własną regułę także z !important i bardziej specyficznym selektorem

   Zwykła reguła nigdy nie wygra z !important, niezależnie od specyficzności. Między kilkoma deklaracjami !important znowu działają specyficzność i kolejność. Inne opcje: styl inline z !important albo warstwy kaskadowe - dla !important kolejność warstw jest odwrócona. Najlepiej po prostu unikać !important we własnym kodzie.

3. Do czego rozwija się skrót flex: 1?

   Poprawna odpowiedź: flex-grow: 1; flex-shrink: 1; flex-basis: 0%

   flex: 1 = 1 1 0%: rozmiar bazowy jest zerowy, więc całe miejsce dzieli się ściśle proporcjonalnie do flex-grow - kolumny są równe niezależnie od treści. flex: auto = 1 1 auto - dzielona jest tylko wolna przestrzeń ponad rozmiar treści. flex: none = 0 0 auto.

4. Czym flex-basis różni się od width na elemencie flex w wierszu (flex-direction: row)?

   Poprawna odpowiedź: flex-basis to początkowy rozmiar na osi głównej; jeśli nie jest auto, ma pierwszeństwo przed width

   flex-basis ustala początkowy rozmiar elementu wzdłuż osi głównej, od którego liczy się grow i shrink. Przy flex-basis: auto używane jest width (lub height w kolumnie). Przy flex-direction: column flex-basis dotyczy wysokości, a nie szerokości - to kluczowa różnica wobec width.

HTML i CSS · Senior

1. Jak warstwy kaskadowe @layer wpływają na priorytet stylów?

   Poprawna odpowiedź: Kolejność warstw wygrywa ze specyficznością: wygrywa późniejsza warstwa

   Kaskada najpierw porównuje warstwy, a dopiero potem specyficzność w obrębie warstwy. Dlatego .btn w warstwie components wygrywa z #app .btn we wcześniejszej warstwie base. Style poza warstwami są silniejsze od każdej warstwy. Dla !important kolejność jest odwrócona: ważne deklaracje we wcześniejszej warstwie wygrywają. Tailwind v4 buduje swoje style na warstwach theme, base, components i utilities.

2. Jak zwykłe (bez !important) style w warstwach i poza warstwami mają się do siebie?

   Poprawna odpowiedź: Style poza warstwami są silniejsze od każdej warstwy

   Style poza warstwami niejawnie trafiają do „ostatniej” warstwy i wygrywają ze wszystkimi nazwanymi warstwami. Dzięki temu można opakować zewnętrzny CSS w @layer vendor i łatwo nadpisać go własnymi stylami. Z !important logika się odwraca: ważne style w warstwach wygrywają z ważnymi stylami poza warstwami.

3. Co robi @scope (.card) to (.card__content) { img { ... } }?

   Poprawna odpowiedź: Styluje img wewnątrz .card, ale nie wewnątrz .card__content

   @scope definiuje korzeń zakresu i opcjonalną „dolną granicę” (donut scope): style działają wewnątrz .card, ale nie sięgają do .card__content i jego potomków. Dodatkowo przy równej specyficzności wygrywa reguła z bliższym korzeniem (scoping proximity). @scope nie tworzy Shadow DOM.

4. Jaki problem rozwiązuje subgrid?

   Poprawna odpowiedź: Daje zagnieżdżonej siatce ścieżki rodzica, wyrównując części między kartami

   Z grid-template-rows: subgrid siatka potomna dziedziczy linie rodzica. Klasyczny przykład to rząd kart, których tytuły, teksty i przyciski mają być wyrównane, nawet gdy tytuł jednej karty zawija się do dwóch linii. Bez subgrid każda karta wyrównuje się niezależnie.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.