Technologia Ścieżka zawodowa

Frontend Developer

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

Rozpocznij kurs Zobacz program · 9 lekcji

Praca w trzech krokach

Zaprojektuj strukturę
Sprawdź układ i wejście
Obsłuż stany zapytania

Na czym polega praca?

Zaprojektuj strukturę: Wybierz nagłówki, etykiety i kontrolki opisujące zadanie. Zbuduj najkrótszą ścieżkę do wysłania formularza.
Sprawdź układ i wejście: Przetestuj szerokości 360 i 1280 px, długą treść i obsługę samą klawiaturą. Sprawdź widoczność fokusu.
Obsłuż stany zapytania: Rozpisz stan ładowania, wynik, brak danych i błąd. Zadbaj o zachowanie wpisanych danych przy ponowieniu.

Z jakich narzędzi korzystasz?

Przykładowe programy, dokumenty i wyposażenie. Konkretny zestaw zależy od miejsca pracy.

Edytor kodu i HTML, CSS, JavaScript: Zbuduj stronę, nadaj jej wygląd i dodaj działanie elementów.
DevTools w przeglądarce: Zobacz strukturę strony, błędy i zachowanie na wąskim ekranie.
Git: Porównuj wersje kodu i udostępniaj zmiany do przeglądu.

Jakich umiejętności potrzebujesz?

Umiejętności twarde

HTML i CSS
JavaScript
Dostępność

Na początek: Zbuduj formularz kontaktowy z etykietą pola e-mail i przyciskiem wysłania. Przejdź cały formularz klawiszem Tab.

Umiejętności miękkie

Przećwicz, jak powiedzieć to w pracy:

„Błąd odtwarza się na wąskim ekranie po wysłaniu formularza.”
„Po błędzie sieci zachowajmy wpisane dane i umożliwmy ponowienie.”

Program kursu

Zacznij od pierwszej lekcji lub wybierz temat. W każdym rozdziale znajdziesz przykład, schemat i ćwiczenie.

Podstawy

Praca krok po kroku

Trudniejsze sytuacje

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.

Warto wiedzieć przed pierwszym dniem

Kod na ekranie komputera — Zdjęcie Rob Wingate / Unsplash

Mowa ciała w pracy

Przy omawianiu usterki odwróć ekran tak, żeby druga osoba widziała ten sam fragment. Pokaż jedno miejsce naraz, zrób pauzę i poczekaj na potwierdzenie.

Ź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.

Plan pracy nad zadaniem

Zaprojektuj strukturę
Sprawdź układ i wejście
Obsłuż stany zapytania

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

Oferty pracy

Otwórz wyniki dla hasła „frontend developer” na portalu pracy.

Pracuj.pl ↗ RocketJobs ↗

Inne kursy z tej branży

Wszystkie kursy w branży: Technologia →