Czy jesteś gotowy na pierwszą pracę? - zadania dla początkującego front-end developera

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ół).
https://stackoverflow.com/questions/35349802/bootstrap-list-group-for-desktop-accordion-for-mobile

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

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:

youtube.com

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 :)

Kamila

Dziękuję za poświęcony czas, będzie mi bardzo miło jak zostawisz komentarz :)