Frontend Developer — Praca krok po kroku
Formularz zapisów na szkolenie
Praca krok po kroku · Lekcja 4 z 9
Układ dopasowany do ekranu
Zacznij od jednej kolumny. Pozwól kartom zajmować dostępną szerokość i dodaj kolumny, gdy mieści się w nich czytelna treść. CSS Grid obsłuży układ, a Flexbox sprawdzi się w nawigacji i pojedynczych rzędach.
- Co zrobić najpierwSprawdź układ i wejście
- Co zrobić dalejUkład dopasowany do ekranu
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Sprawdź układ i wejście
Przetestuj szerokości 360 i 1280 px, długą treść i obsługę samą klawiaturą. Sprawdź widoczność fokusu.
Ćwiczenie praktyczne
Ułóż sześć kart. Sprawdź stronę przy 360 i 1280 pikselach oraz z długim tytułem karty.
Formularz zapisów na szkolenie
Podejmij decyzję
Wróć do notatki z początku sprawy. Zapisz pierwsze działanie i wyjaśnij, jak pomoże rozwiązać sytuację.
Pokaż przykładową reakcję
Pokaż osobno stan wysyłania, potwierdzenie zapisu i czytelny komunikat błędu. Uczestnik wie, czy zgłoszenie dotarło i co może zrobić dalej.
Sprawdź się — opcjonalne pytanie
Jak wykryjesz problem z wąskim ekranem?
- Sprawdzisz wyłącznie kolor przycisku
- Otworzysz podgląd przy maksymalnej szerokości
- Przetestujesz mały viewport i długie treści
Pokaż odpowiedź i wyjaśnienie
Przetestujesz mały viewport i długie treści. Mały viewport i długa treść ujawniają problemy z przepełnieniem.
Praca krok po kroku · Lekcja 5 z 9
Formularz z błędem przy polu
Komunikat powinien wskazywać konkretne pole i sposób poprawienia. Powiąż pomoc przez aria-describedby, a nieprawidłowe pole oznacz aria-invalid. Po nieudanej walidacji zachowaj dane wpisane poprawnie.
- Co zrobić najpierwPole
- Co zrobić dalejKomunikat z instrukcją
- Jak zakończyćPonowienie
Przykład z pracy
Użytkownik wpisał adres bez domeny. Komunikat „Podaj adres w formacie [email protected]” pojawia się przy polu i jest powiązany z nim w kodzie.
Ćwiczenie praktyczne
Zbuduj dwa pola i przejdź wysyłkę z jednym błędnym. Sprawdź powiązanie komunikatu w drzewie dostępności.
Sprawdź się — opcjonalne pytanie
Co najlepiej łączy treść błędu z polem?
- aria-describedby wskazujące identyfikator komunikatu
- Sam czerwony kolor ramki
- Niepowiązana informacja w stopce
Pokaż odpowiedź i wyjaśnienie
aria-describedby wskazujące identyfikator komunikatu. Powiązanie programowe udostępnia tekst komunikatu przy odczycie pola.
Praca krok po kroku · Lekcja 6 z 9
Wyszukiwanie odporne na spóźnione wyniki
Wysłanie zapytań w kolejności A i B nie gwarantuje takiej samej kolejności odpowiedzi. Anuluj nieaktualne pobieranie lub dopuszczaj aktualizację tylko dla ostatniego identyfikatora zapytania.
- Co zrobić najpierwWejście
- Co zrobić dalejOznaczenie lub anulowanie zapytania
- Jak zakończyćBieżący wynik
Przykład z pracy
Zapytanie „an” odpowiada po 700 ms, a „analityk” po 150 ms. Wynik „an” nie może zastąpić listy dla bieżącego tekstu.
Ćwiczenie praktyczne
Zasymuluj dwie odpowiedzi w odwrotnej kolejności. Udokumentuj, jak blokujesz nadpisanie wyniku.
Sprawdź się — opcjonalne pytanie
Który wynik ma prawo zaktualizować listę?
- Odpowiedź, która przyszła najpóźniej
- Wynik dla aktualnego zapytania
- Odpowiedź o większej liczbie pozycji
Pokaż odpowiedź i wyjaśnienie
Wynik dla aktualnego zapytania. Wynik musi odpowiadać wartości, którą użytkownik widzi w polu.