← Wszystkie tematy W 51% ogłoszeń · 24 z 47 ogłoszeń frontend React

HTML, CSS i responsywność

Szkielet, ubranie i rozciągliwa koszulka

HTML, CSS i responsywność są w 24 z 47 ogłoszeń. Seniorzy często potykają się na pytaniach o kaskadę i specyficzność, bo „przecież piszemy w Tailwindzie”.

Przerobione Opanowane 0 z 5 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„Ensure responsive design, performance optimization, and accessibility standards.”
emagine Polska · Frontend React Developer
„Projektowanie, rozwój i utrzymanie nowoczesnych, responsywnych oraz dostępnych aplikacji webowych z wykorzystaniem React i TypeScript.”
Upvanta sp. z o.o. · Front-End Engineer (React / TypeScript / AWS)
„Design, develop, and deliver responsive, high-quality front-end solutions using React and modern JavaScript technologies.”
Capco Poland · Front-End Engineer - React (Payments)

Scena pierwsza · flex vs grid

Rozciągliwa koszulka

Dzieci siadają przy stole. Flex sadza je w rzędzie jak w autobusie: kto się nie zmieści, przechodzi do następnego rzędu, a ostatni rząd rozpycha się na całą szerokość. Grid rysuje na stole kratki: każde dziecko ma swoje miejsce, a kolumny zawsze są równe. Przesuń suwak i zmień szerokość stołu.

AlaOlaElaIgaJaś

flex-wrap grid auto-fill

Szerokość stołu 80%

Ustaw szerokość tak, żeby w ostatnim rzędzie zostało jedno lub dwa dzieci, i przełącz flex/grid.

Scena druga · kaskada i specyficzność

Kto ubiera przycisk?

Kilka osób naraz mówi przyciskowi, jaki kolor ma założyć. Wygrywa ta, która ma najmocniejszy głos: liczy się najpierw !important, potem styl wpisany w sam element, potem liczba #id, potem .klas, a na końcu zwykłych tagów. Przy remisie wygrywa ten, kto mówił ostatni. Włączaj i wyłączaj reguły.

Porównajmy

Flex czy grid?

	Flexbox	Grid
Wymiary	Jeden rząd naraz.Układ jednowymiarowy: oś główna i poprzeczna.	Rzędy i kolumny naraz.Układ dwuwymiarowy z liniami siatki.
Kto decyduje o rozmiarze?	Dzieci: każde zajmuje tyle, ile potrzebuje.Content-first: `flex: 1 1 120px`.	Stół: rysujesz kratki, dzieci do nich siadają.Layout-first: `grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))`.
Ostatni rząd	Rozpycha się na całą szerokość.Elementy w ostatnim wierszu rosną.	Zostaje w swoich kratkach.Kolumny wyrównane we wszystkich wierszach.
Typowe użycie	Pasek z przyciskami, menu, ikonka obok tekstu.Nawigacja, toolbary, wyśrodkowanie.	Galeria kart, układ strony, formularz w kolumnach.Layout strony, dashboardy, `grid-template-areas`.
Responsywność	Zawijanie `flex-wrap`.Często bez media queries.	`auto-fill` + `minmax`.Też bez media queries. Do komponentów: container queries.

Flex = autobus

Jeden rząd siedzeń. Kto się nie zmieści, jedzie następnym.

Grid = kratki

Najpierw rysujesz miejsca na stole, potem sadzasz dzieci.

Najmocniejszy głos

!important > styl w elemencie > #id > .klasa > tag. Remis: wygrywa ostatni.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Flexbox vs Grid: kiedy który?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Flex to autobus: jeden rząd siedzeń, kto się nie zmieści, jedzie następnym. Grid to kratki na stole: najpierw rysujesz miejsca, potem sadzasz dzieci.

Na rozmowę: Flex jest jednowymiarowy i zaczyna od zawartości: paski narzędzi, nawigacja, wyrównanie ikony z tekstem, rozkładanie wolnego miejsca. Grid jest dwuwymiarowy i zaczyna od układu: layout strony, galerie kart, formularze w kolumnach, grid-template-areas. Przy kartach w wielu rzędach grid z repeat(auto-fill, minmax()) trzyma równe kolumny, a flex-wrap rozpycha ostatni rząd. Często łączę oba: grid na układ, flex w środku komponentu.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Jak działa specyficzność selektorów i kaskada? Co zmieniają @layer i :where()?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Kto ma najmocniejszy głos, ten ubiera przycisk: !important, potem styl w elemencie, potem #id, potem .klasy, a na końcu tagi. Przy remisie wygrywa ten, kto mówił ostatni.

Na rozmowę: Kolejność kaskady: pochodzenie i ważność (!important), warstwy (@layer), specyficzność (id, klasy/atrybuty/pseudoklasy, elementy), kolejność w źródle. Style inline biją selektory. :where() ma specyficzność 0, więc dobre na łatwe do nadpisania style bazowe w bibliotekach. :is() i :not() biorą specyficzność najmocniejszego argumentu. @layer ustala priorytet całych warstw (reset, base, components, utilities) niezależnie od specyficzności, co rozwiązuje wojny o !important.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Media queries vs container queries: czym się różnią?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Media query pyta, jak duży jest cały pokój. Container query pyta, jak duża jest półka, na której stoi zabawka.

Na rozmowę: Media queries reagują na viewport, więc komponent wygląda tak samo w wąskiej kolumnie sidebaru i w szerokiej treści, jeśli ekran jest ten sam. Container queries (container-type: inline-size + @container (min-width: 400px)) reagują na rozmiar rodzica, więc komponent jest naprawdę przenośny. Media queries zostawiam do layoutu strony i preferencji (prefers-reduced-motion, prefers-color-scheme), a container queries do komponentów w design systemie.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Dlaczego semantyczny HTML ma znaczenie (button vs div z onClick)?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Prawdziwy przycisk przychodzi z instrukcją obsługi dla klawiatury i czytnika. Div udaje przycisk, ale instrukcji nie ma.

Na rozmowę: button daje za darmo fokus, obsługę Enter i Spacji, rolę i nazwę dla czytników, stan disabled i zachowanie w formularzu. Div z onClick wymaga dopisania tabIndex, role, onKeyDown i stanów, a i tak łatwo coś pominąć. Semantyka (nav, main, h1–h6, label, ul) pomaga też SEO, nawigacji czytnikiem po nagłówkach i landmarkach oraz testom (getByRole).

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak zrobić responsywne obrazki? (srcset, sizes, picture, aspect-ratio)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Do małego okna podajesz mały obrazek, do dużego duży, a miejsce na niego rezerwujesz, zanim przyjdzie.

Na rozmowę: srcset z wariantami szerokości (400w, 800w, 1600w) plus sizes mówiący, jak szeroko obraz będzie wyświetlony, a przeglądarka wybierze plik według ekranu i DPR. picture z source type="image/avif" i webp jako fallback albo do art direction (inne kadrowanie na mobile). Zawsze width/height albo aspect-ratio przeciw CLS, loading="lazy" poniżej linii zgięcia, a obraz hero: fetchpriority="high" i bez lazy. W Next.js robi to next/image.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Jeden design system, trzy marki i tryb ciemny

Firma ma trzy marki z różnymi kolorami, fontami i zaokrągleniami. Każda ma mieć tryb jasny i ciemny. Dziś kolory są wpisane w komponenty, a dodanie trybu ciemnego oszacowano na trzy miesiące.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz warstwy tokenów (prymitywne i semantyczne)
Czy umiesz zrobić motywy na CSS custom properties bez przebudowy komponentów
Czy myślisz o kontraście i testach

Odpowiedź seniora

Wprowadzam dwie warstwy tokenów. Prymitywne: paleta każdej marki (blue-500, radius-2). Semantyczne: znaczenie (color-bg-surface, color-text-muted, color-action-primary). Komponenty używają wyłącznie semantycznych, a motyw to przypisanie semantycznych do prymitywnych, w CSS jako custom properties na [data-brand] i [data-theme].

Tokeny trzymam w jednym źródle (JSON w formacie W3C, synchronizowany z Figma Variables), a Style Dictionary generuje CSS i typy TS. Migracja komponentów: codemod zamienia literalne kolory na tokeny, a stylelint (color-no-hex w komponentach) pilnuje, żeby nie wracały. Tryb ciemny zgodny z prefers-color-scheme, z możliwością ręcznego wyboru i color-scheme dla kontrolek.

Jakość: testy wizualne (Chromatic lub Playwright screenshots) dla każdej kombinacji marki i motywu oraz automatyczne sprawdzanie kontrastu par tekst i tło w tokenach.

Typowe wpadki

Osobny plik CSS z nadpisaniami dla każdej marki
Tryb ciemny jako filter: invert()
Tokeny nazwane po kolorze zamiast po znaczeniu

Dopytają o

Jak uniknąć mignięcia jasnego motywu przy ładowaniu?
Jak obsłużysz obrazki i wykresy w trybie ciemnym?
Kto zatwierdza nowy token?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Style jednego mikrofrontendu psują inne

Po wdrożeniu nowego modułu „Promocje” w shellu aplikacji przyciski w koszyku zmieniły kolor, a tabela w panelu klienta straciła odstępy. Każdy zespół używa innego podejścia: Tailwind, CSS Modules i globalne SCSS.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy rozumiesz, skąd biorą się wycieki stylów (globalne selektory, reset, kolejność)
Czy znasz mechanizmy izolacji i ich koszty
Czy proponujesz zasady dla wszystkich zespołów

Odpowiedź seniora

Przyczyna jest zwykle prosta: globalne selektory (button, table, .btn), drugi reset CSS albo preflight Tailwinda dociągnięty przez moduł, który nadpisał style po kolejności ładowania. Diagnozuję w DevTools, która reguła wygrywa, i z którego pliku.

Zasady izolacji: zakaz globalnych selektorów elementów w modułach (stylelint), prefiks klas lub CSS Modules, Tailwind z prefix i bez preflight w modułach (reset tylko w shellu), a całość w @layer (reset, shell, modules), żeby kolejność ładowania nie decydowała o wyniku.

Gdy moduł musi być w pełni odizolowany (np. widżet osadzany u partnerów), Shadow DOM przez Web Component, z kosztem: style globalne i fonty trzeba wstrzyknąć, a portal dla modali wymaga obsługi. Najtańsza długofalowa ochrona to wspólny design system i tokeny, więc moduły nie muszą stylować podstawowych elementów.

Typowe wpadki

Dokładanie !important, aż przestanie się psuć
Shadow DOM dla wszystkich modułów bez analizy kosztów
Brak testów wizualnych shella z modułami

Dopytają o

Jak @layer współpracuje z Tailwindem?
Jak wykryć wyciek przed wdrożeniem?
Co z fontami i zmiennymi CSS w Shadow DOM?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

Wejście na rynek arabski: układ od prawej do lewej

Aplikacja ma wejść na rynek Arabii Saudyjskiej. Cały interfejs musi działać od prawej do lewej, łącznie z ikonami strzałek, wykresami i formularzami. Kod ma 2 tys. reguł CSS z margin-left i left: 0.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz właściwości logiczne CSS
Czy wiesz, co się odwraca, a co nie
Czy planujesz migrację i testy

Odpowiedź seniora

Ustawiam dir="rtl" i lang na elemencie html zależnie od języka. Fizyczne właściwości zamieniam na logiczne: margin-inline-start zamiast margin-left, inset-inline-start zamiast left, padding-inline, text-align: start. Flex i grid odwracają się same. Migrację robię codemodem i stylelintem (plugin z regułą wymuszającą właściwości logiczne), więc nowe fizyczne właściwości nie wracają.

Nie wszystko się odwraca: ikony kierunkowe (strzałki, wstecz) tak, przez transform: scaleX(-1) w [dir=rtl] lub osobne ikony, ale logo, odtwarzacz wideo, numery telefonów i fragmenty kodu nie. Teksty mieszane potrzebują bdi lub unicode-bidi, a pola na numery dir="ltr". Wykresy osi czasu zostawiam od lewej, zgodnie z oczekiwaniami użytkowników, co potwierdzam z badaczami.

Testy: screenshoty kluczowych ekranów w obu kierunkach i przegląd z osobą znającą język.

Typowe wpadki

Odwrócenie całej strony transform: scaleX(-1)
Odwrócenie wszystkich ikon, łącznie z logo
Osobny arkusz rtl.css utrzymywany ręcznie

Dopytają o

Jak obsłużysz biblioteki zewnętrzne, które nie wspierają RTL?
Co z animacjami przesuwającymi elementy w bok?
Jak dobierzesz fonty dla arabskiego?

Zapytaj Claude Rozwiń case Zagraj interviewera