Rekrutacja na Frontend Developera. Najczęstsze pytania na rozmowach

30 września 2021 Joanna Pasterczyk

Rozmowa rekrutacyjna, zwłaszcza dla Junior Frontend Developera bywa stresująca – nie dość, że po raz pierwszy ktoś ocenia nasze umiejętności, to jeszcze możemy spodziewać się pytań na niemal każdy temat – od HTML-a po JavaScripta. Tych możliwych pytań jest naprawdę sporo. Przygotowaliśmy dla Was listę najpopularniejszych.

Przy zbieraniu pytań i zadań rekrutacyjnych, korzystaliśmy z wielu źródeł: podcastów o IT, blogów poświęconych programowaniu itd. Zobaczcie, co wybraliśmy.

ZOBACZ TEŻ: Zarobki we frontendzie. Przeglądamy raporty wynagrodzeń

Frontend Developer – pytania ogólne na rekrutacjach

Poniżej lista pytań ogólnych, które najczęściej padają na rozmowach rekrutacyjnych na Frontend Developera:

Nad jakimi projektami pracowałaś/pracowałeś? Jak to wyglądało?
W którą stronę chciałabyś/chciałbyś się rozwijać, jeśli chodzi o frontend development?
Czy pracowałaś/pracowałeś w zespole podczas projektu programistycznego?
Jak się uczyłaś/uczyłeś programowania?
Czy byłaś/byłeś na jakiś kursach programistycznych?
Z jakich źródeł korzystasz?
Czy możesz się pochwalić swoimi projektami?
Wymień swoje trzy zalety.
Czego nauczyłeś się wczoraj/w tym tygodniu?
Co Cię ekscytuje lub interesuje w kodowaniu?
Jakie było ostatnie wyzwanie techniczne, którego doświadczyłeś/aś i jak je rozwiązałeś/aś?
Czy budując nową witrynę internetową lub ją utrzymując, możesz wyjaśnić niektóre techniki, których użyłeś/aś w celu zwiększenia wydajności?
Czy możesz opisać niektóre z najlepszych praktyk lub technik SEO, z których ostatnio korzystałeś/aś?
Czy możesz wyjaśnić jakieś typowe techniki lub ostatnio rozwiązane problemy w zakresie bezpieczeństwa frontendu?
Jakie działania podjąłeś/aś osobiście w ostatnich projektach, aby zwiększyć łatwość utrzymania kodu?
Porozmawiaj o preferowanym środowisku programistycznym.
Jakie systemy kontroli wersji znasz?
Czy możesz opisać swój przepływ pracy podczas tworzenia strony internetowej?
Jeśli masz 5 różnych arkuszy stylów, jak najlepiej zintegrować je z witryną?
Czy możesz opisać różnicę między Progressive Enhancement i graceful degradation?
Jak można zoptymalizować zasoby/zasoby witryny?
Ile zasobów naraz pobierze przeglądarka z danej domeny?
Wymień 3 sposoby zmniejszenia wczytywania strony (postrzegany lub rzeczywisty czas wczytywania).
Gdybyś wskoczył/a do projektu, a oni użyli tabulatorów, a ty spacji, co byś zrobił/a?
Opisz, jak można stworzyć prostą stronę pokazu slajdów.
Gdybyś mógł/mogła w tym roku opanować jedną technologię, co by to było?
Wyjaśnij, czym są ARIA i czytniki ekranu oraz jak sprawić, by strona internetowa była dostępna.
Wyjaśnij niektóre zalety i wady animacji CSS w porównaniu z animacjami JavaScript.
Co oznacza CORS i jakiego problemu dotyczy?
Jak poradziłeś sobie z nieporozumieniem z szefem lub współpracownikiem?
Z jakich zasobów korzystasz, aby poznać najnowsze informacje na temat rozwoju i projektowania frontend?

ZOBACZ TEŻ: Największe absurdy w rekrutacji IT ( ͡° ͜ʖ ͡°)

Frontend Developer – pytania techniczne na rekrutacjach

HTML:

Co robi doctype?
Jak obsługujesz stronę z treścią w wielu językach?
Na jakie rzeczy należy uważać podczas projektowania lub tworzenia witryn wielojęzycznych?
Do czego służą data-atrybuty?
Rozważ HTML5 jako otwartą platformę internetową. Jakie są elementy składowe HTML5?
Opisać różnicę między cookie, sessionStorage i localStorage.
Opisz różnicę między <script>, <script async> a <script defer>.
Dlaczego generalnie dobrym pomysłem jest pozycjonowanie CSS <link>między <head></head>i JS <script>tuż przed </body>? Czy znasz jakieś wyjątki?
Co to jest renderowanie progresywne?
Dlaczego miałbyś/miałabyś używać srcset atrybutu w tagu obrazu? Wyjaśnij proces używany przez przeglądarkę podczas oceny zawartości tego atrybutu.
Czy używałeś/aś wcześniej różnych języków szablonów HTML?

CSS:

Jaka jest specyfika selektora CSS i jak to działa?
Jaka jest różnica między „resetowaniem” a „normalizacją” CSS? Który byś wybrał/a i dlaczego?
Opisz Floats i sposób ich działania.
Opisz z-index i sposób tworzenia kontekstu układania.
Opisz BFC (Block Formatting Context) i jak to działa.
Jakie są różne techniki clear i które są odpowiednie w jakim kontekście?
Jak można podejść do rozwiązywania problemów związanych ze stylami poszczególnych przeglądarek?
Jakie są różne sposoby wizualnego ukrywania zawartości (i udostępniania jej tylko dla czytników ekranu)?
Czy znasz stylizację SVG?
Jakie są niektóre z przewag związanych z pisaniem wydajnego CSS?
Jakie są zalety/wady korzystania z preprocesorów CSS?
Opisz, co lubisz, a czego nie lubisz w preprocesorach CSS, których używasz.
Jak można zaimplementować projekt strony internetowej, który używa niestandardowych czcionek?
Wyjaśnij, jak przeglądarka określa, które elementy pasują do selektora CSS.
Opisz pseudoelementy i omów, do czego służą.
Wyjaśnij, jak rozumiesz model pudełkowy i jak możesz powiedzieć przeglądarce w CSS, aby renderowała twój układ w różnych modelach pudełkowych.
Co robi * { box-sizing: border-box; }? Jakie są jego zalety?
Czym jest właściwość display CSS i czy możesz podać kilka przykładów jej użycia?
Jaka jest różnica między inline a inline-block?
Jaka jest różnica między selektorami „nth-of-type()” i „nth-child()”?
Z jakich istniejących frameworków CSS korzystałeś/aś lokalnie lub w środowisku produkcyjnym? Jak byś je zmienił/a czy ulepszył/a?
Czy korzystałeś/aś z CSS Grid?
Czy możesz wyjaśnić różnicę między kodowaniem witryny internetowej, aby była responsywna, a strategią zorientowaną na urządzenia mobilne?
Czy jest jakiś powód, dla którego chciałbyś/chciałabyś użyć translate() zamiast pozycjonowania bezwzględnego lub odwrotnie? I dlaczego?

JavaScript:

Wyjaśnij delegowanie zdarzenia.
Wyjaśnij, jak this działa w JavaScript.
Czy możesz podać przykład jednego ze sposobów, w jaki praca z this zmieniła się w ES6?
Wyjaśnij, jak działa dziedziczenie prototypowe.
Jaka jest różnica między zmienną, która jest null a undefined?
Jak można podejść do sprawdzania któregokolwiek z tych stanów?
Co to jest zamknięcie i jak/dlaczego miałbyś/miałabyś go używać?
Jakich konstrukcji językowych używasz do iteracji po właściwościach obiektów i elementach tablicy?
Czy możesz opisać główną różnicę między Array.forEach() a Array.map() i dlaczego wybrałbyś/wybrałabyś jedną lub drugą?
Jaki jest typowy przypadek użycia funkcji anonimowych?
Jaka jest różnica między obiektami hosta a obiektami natywnymi?
Wyjaśnij różnicę pomiędzy: function Person(){}, var person = Person(), i var person = new Person()?
Wyjaśnij różnice w używaniu foo między function foo() {}ivar foo = function() {}
Czy możesz wyjaśnić, co robią Function.call i Function.apply? Jaka jest różnica między tymi dwoma?
Wyjaśnij Function.prototype.bind.
Opisz przechwytywanie zdarzeń.
Jaka jest różnica między „atrybutem” a „właściwością”?
Jakie są zalety i wady rozszerzania wbudowanych obiektów JavaScript?
Jaka jest różnica między == a ===?
Co to jest strict mode? Jakie są zalety/wady korzystania z niego?
Jakie są zalety/wady pisania kodu JavaScript w języku, który kompiluje się do JavaScript?
Jakich narzędzi i technik używasz do debugowania kodu JavaScript?
Wyjaśnij różnicę między obiektami zmiennymi i niezmiennymi.
Podaj przykład niezmiennego obiektu w JavaScript.
Jakie są plusy i minusy niezmienności?
Jak osiągnąć niezmienność we własnym kodzie?
Wyjaśnij różnicę między funkcjami synchronicznymi i asynchronicznymi.
Co to jest pętla zdarzeń?
Jaka jest różnica między stosem wywołań a kolejką zadań?
Jakie są różnice między zmiennymi utworzonymi za pomocą let, varlub i const?
Jakie są różnice między konstruktorami klasy ES6 a konstruktorami funkcji ES5?
Czy możesz przedstawić przypadek użycia nowej składni funkcji strzałki =>? Czym ona różni się od innych funkcji?
Jaka jest korzyść z używania składni strzałki dla metody w konstruktorze?
Jaka jest definicja funkcji wyższego rzędu?
Czy możesz podać przykład destrukturyzacji obiektu lub tablicy?
Czy możesz podać przykład generowania ciągu za pomocą literałów szablonu ES6?
Jakie są korzyści z używania spread syntax i czym się różni od rest syntax?
Jak możesz udostępniać kod między plikami?

ZOBACZ TEŻ: Ogłoszenie o pracę w formie krzyżówki. Historia oferty dla frontendowca

O co Ty możesz, a nawet powinieneś zapytać firmę, do której aplikujesz:

Jaki robią produkt/produkty?
W jakich technologiach pracują?
Jaki mają tryb pracy? Scrum, Kanban, Waterfall? Jak długie są sprinty i jak częste release’y?
Jak wygląda przeciętny team? Ile jest w nim osób? Back-end + Front-End + PO/PM + testerzy?
Ogólna opinia na temat ludzi, sprzętu i zarządzania.

Zdjęcie główne pochodzi z unsplash.com. Źródła: SowaProgramuje, SolutionChaser, devszczepaniak.pl, h5bp.

Joanna Pasterczyk

Od ponad ośmiu lat pracuje jako redaktorka, dziennikarka i copywriterka, a od niedawna dba o treści oraz rozwój portalu poświęconego branży IT. Autorka wywiadów, tekstów eksperckich, newsów.