Sprawdź zawód
Technologia

Frontend Developer

Buduj dostępne interfejsy, które działają na telefonie i komputerze.

Kompendium zawodu

Pojęcia w pracy

DOM
Model dokumentu używany przez przeglądarkę. Zmiana elementu DOM może zmienić to, co użytkownik widzi lub obsługuje.
Stan interfejsu
Sytuacja, którą ekran pokazuje, np. ładowanie, sukces, pusty wynik albo błąd.
Regresja
Pogorszenie działającej wcześniej funkcji po wprowadzeniu zmiany.

Zwroty w typowych sytuacjach

„Błąd odtwarza się na wąskim ekranie po wysłaniu formularza.”
Zgłoszenie zawiera warunek i czynność, od których można zacząć diagnozę.
„Po błędzie sieci zachowajmy wpisane dane i umożliwmy ponowienie.”
Ustalasz zachowanie formularza po przerwanym zapisie.

Program kursu

Podstawy

  1. 1Struktura dostępnej strony
  2. 2Model pudełkowy
  3. 3Od zdarzenia do aktualizacji DOM

Praktyka

  1. 4Układ dopasowany do ekranu
  2. 5Formularz z błędem przy polu
  3. 6Wyszukiwanie odporne na spóźnione wyniki

Specjalizacja

  1. 7Stany interfejsu po zapytaniu
  2. 8Diagnoza opóźnień interfejsu
  3. 9Przegląd wdrożenia i plan cofnięcia

Jak wygląda praca

Kod na ekranie komputera
Zdjęcie Rob Wingate / Unsplash
  1. Podstawy

    Zaprojektuj strukturę

    Wybierz nagłówki, etykiety i kontrolki opisujące zadanie. Zbuduj najkrótszą ścieżkę do wysłania formularza.

  2. Praktyka

    Sprawdź układ i wejście

    Przetestuj szerokości 360 i 1280 px, długą treść i obsługę samą klawiaturą. Sprawdź widoczność fokusu.

  3. Specjalizacja

    Obsłuż stany zapytania

    Rozpisz stan ładowania, wynik, brak danych i błąd. Zadbaj o zachowanie wpisanych danych przy ponowieniu.

Źródła do nauki MDN — struktura i dostępność formularzy · MDN — model pudełkowy CSS

Przećwicz rozmowę kwalifikacyjną

Odpowiedz na głos, a potem rozwiń przykładową odpowiedź.

Kiedy użyjesz linku, a kiedy przycisku?

Link prowadzi pod adres. Przycisk wywołuje działanie, np. wysyła formularz. Wybieram natywne elementy, aby przeglądarka zapewniła oczekiwane zachowanie klawiatury.

Jak sprawdzisz, czy formularz jest dostępny?

Zacznę od przejścia klawiszem Tab. Sprawdzę kolejność, widoczny fokus, etykiety i sposób poinformowania o błędzie. Potem sprawdzę, czy użytkownik może poprawić pole i ponowić sprawdzenie.

Zadanie rekrutacyjne

Firma chce przyjmować zgłoszenia na szkolenie. Zbuduj prosty formularz i zasymuluj awarię wysyłki.

Pokaż kryteria wykonania
  • Pole ma widoczną etykietę i czytelny komunikat błędu.
  • Przy błędzie adres pozostaje w polu, a użytkownik może ponowić wysyłkę.
  • Wszystkie czynności można wykonać klawiaturą.

Pierwszy dzień w pracy

Uruchom projekt lokalnie, przejdź najważniejszy formularz i zapytaj, gdzie zespół dokumentuje komponenty oraz kryteria dostępności.

Widełki wynagrodzeń

Front-End Developer · Rekrutacje z 2025 r. · Polska · pełny etat · miesięcznie brutto

Polska
13 000–22 000 zł

Źródło Hays Poland, raport płacowy 2026, s. 61

Inne kursy z tej branży

Technologia

Tester oprogramowania

Sprawdzaj działanie aplikacji i opisuj problemy tak, by zespół mógł je odtworzyć.

  • Testy manualne
  • Przypadki do weryfikacji
  • Raport błędu
9 lekcji · 3 poziomy Otwarta lekcja
Technologia

Architekt systemów IT

Przekładaj wymagania na architekturę, która znosi awarie i daje się rozwijać.

  • Wymagania jakościowe
  • Integracje
  • Decyzje architektoniczne
9 lekcji · 3 poziomy Otwarta lekcja