Rekrutacja na Frontend Developera. Najczęstsze pytania na rozmowach

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

ZOBACZ TEŻ:  Ludzkość marnuje 500 lat dziennie na CAPTCHA. Czy da się temu jakoś zaradzić?

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.

Zapraszamy do dyskusji

Patronujemy

 
 
More Stories
Pandemia nie przeszkodziła w pomaganiu potrzebującym. Women in Technology wspiera dzieci z niepełnosprawnościami