W ramach mentoringu tworzę zadania dla mojego mentee i postanowiłam się z Wami nimi podzielić :) Ten wpis jest dla osób początkujących po kursach. Tych którzy czują się gotowi na podjęcie pierwszej pracy lub chcą sprawdzić się w prawdziwym zadaniu.

Jak wiadomo od słuchania i oglądania nikt programistą nie został, więc do roboty. Dobrze zrobione zadania tego typu to fajny wpis do pierwszego CV front-end developera :)

Słowniczek

Zanim przejdziemy do zadań musimy wyjaśnić sobie kilka słów:

• AC (Acceptance Criteria) - lista biznesowych (czyli nietechnicznych), wymagań, które trzeba spełnić aby zadanie zostało zakończone. Czym dokładniejsze tym lepsze :) A dzisiaj to ja będe je przygotowała.
• standardy kodowania - każdy team ma swoje, uczymy się ich kodując i współpracując z innymi programistami. Jeśli nie masz swoich to polecam te od Google'a. Dla mnie podstawą dla juniora będzie: ES6, modularność i reużywalność kodu (na takim poziomie jak dacie radę), logicznie ponazywane zmienne, czytelny kod.
• CTA - skrót marketingowców od Call To Action; zwykle interaktywny komponent, kluczowy w kontekście danego widoku strony. Powinien się wizualnie wyróżniać.

Formularz kontaktowy

Poziom trudności dla początkującego: wysoki.

Zaczęłam od najtrudniejszego zadania, ale front-end developer powinien umieć stworzyć dobry formularz. Moim zdaniem perfekcyjne zadanie dla kogoś kto opanował podstawy HTML, CSS oraz JavaScript i szuka wyzwania.

AC:

• podstawą formularza jest prosty landing page z białym tłem
• formularz jest wycentrowany zarówno w poziomie jak i w pionie
• formularz posiada tytuł "Skontaktuj się ze mną" oraz podtytuł "Zawsze chętnie się dowiemy się co Ci chodzi po głowie"
• Formularz posiada trzy pola (imię, adres e-mail oraz treść wiadomości) oraz przycisk "Wyślij"
• wszystkie pola w formularzu są walidowane: w polu imię da się wpisać tylko imię a w polu email tylko email. Błędna walidacja pola jest sygnalizowana czerwonym kolorem.
• pole "Treść wiadomości" pozwala na wpisanie maksymalnie 120 znaków
• przycisk "Wyślij" jest CTA (więc jest wystylowany jako taki)
• przycisk "Wyślij" jest nieaktywny gdy formularz jest niepoprawnie wypełniony
• design ma być elegancki, czytelny i klarowny, a obsługa intuicyjna i zgodna z nawykami użytkowników

To wbrew pozorom trudne zadanie, które wymaga zainteresowania jak wyglądają formularze i interakcje z nimi. Dla początkującego front-end developera jest to wiedza wręcz niezbędna, więc zostawiam Was z wyszukiwarką.

Stopka

Poziom trudności dla początkującego: średni.

Kolejnym zadaniem jest klasyczna stopka w której zwykle umieszczane są linki do najważniejszych podstron. Niezbędna część strony.

AC:

• stopka znajduje się na dole strony, jest to rozciągnięta na całą szerokość
• tło stopki jest w kolorze #383B44, tekst (linki oraz tekst) w #EBECF0
• Stopka zawiera trzy kolumny ułożone obok siebie, a w każdej z nich tytuł oraz pięć Twoich ulubionych linków dotyczących web developmentu
• Każda kolumna ma taką samą szerokość
• W wersji mobilnej kolumny zamieniają się w rozwijaną listę składającą się z tytułów.
• Listę rozwijasz klikając na tytuł, dzięki czemu ukazują się linki. Liste zwijasz klikają na tytuł, linki się chowają. Jak w poniższym przykładzie można użyć jakieś ikonki pokazującej stan (plus/minus albo strzałki góra/dół).

Da się to zrobić w samym CSS i jest to wersja preferowana ze względu na wydajność, ale zostawiam to Wam :)

Menu typu hamburger

Poziom trudności dla początkującego: niski.

Jest to typowy komponent stworzony pod mobilne wersje, ale wiele stron - w tym YouTube - korzysta z niego na wszystkich rozdzielczościach. Możecie je kojarzyć jako charakterystyczne trzy poziom kreski po naciśnięciu których pojawia się menu tak jak na zdjęciu poniżej:

AC:

• strona posiada klikalną ikonkę hamburgera w lewym górym rogu strony
• ikona zawsze (niezależnie od skrolowania) jest u góry strony
• po naciśnięciu ikonki pojawia się menu o szerokości 200px którego wysokość jest równa wysokości strony
• w menu są klikalne bloki z linkami
• menu posiada wewnętrzny scroll na wypadek gdyby pozycji menu było więcej niż pozwala na to wysokość strony
• menu chowa się po ponownym naciśnięciu na ikonkę hamburgera
• dodatkowym atutem będzie animacja pojawiania się i chowania menu, ale nie jest konieczna

Hamburger jest obecnie nielubiany przez UXowców, ale to w miarę proste zadanie, idealne na rozgrzewkę lub mniej śmiałego adepta frontu :) Protip: To również można wykonać samym CSS.

Podsumowanie

Udostępniłam 3 zadania o różnym (wg mnie) poziomie trudności, które sprawdzają wiedzę i - przede wszystkim - umiejętność zdobywania informacji. Możecie zauważyć, że zadania nie kolidują ze sobą, więc szaleńcy mogą wykonać je w jednym pliku.

Piszcie jeśli coś jest niejasne i chwalcie się wynikami Waszej pracy :)

Zapraszam do kodowania :)