Projekty ćwiczeń dla programistów front-end

Rozwój front-end, jak każda inna umiejętność, wymaga mnóstwa pracy. Jest wiele sposobów na poradzenie sobie z tym dużym zadaniem, a niektóre z nich to:

1. Pracuj w agencji jako front-end developer.
2. Ucz się w domu i buduj projekty na boku.
3. Pracuj jako wolny strzelec dla klientów.

Każdy ma swoje zalety i wady, ale jedno pozostaje niezmienne - im bardziej różnorodne są zadania, tym szybsze postępy.

W tym artykule przyjrzymy się kilku potencjalnym projektom, nad którymi możesz pracować samodzielnie, gdzie możesz nauczyć się nowych technologii, podejść i potencjalnie kilku „Aha!” chwile w Twojej front-endowej karierze.

Wszystkie poniższe zadania są całkiem dobrymi repozytoriami, które możesz mieć w swoim profilu GitHub, zwłaszcza gdy zdecydujesz się ubiegać o stanowisko front-end.

Notka! Wszystkie poniższe przykłady zostały stworzone przez projektantów dla rzeczywistych produktów. NIE proponujemy Ci, abyś je złapał, zakodował i zrobił, co chcesz. Wszystko to jest przykładem elementów interfejsu użytkownika, nad którymi można pracować bez ich dystrybucji lub późniejszej sprzedaży.

1 - Biblioteka UI komponentów

Poziom trudności: łatwy - średni.

Nie daj się jednak zwieść „łatwości”, ponieważ jak w przypadku każdego projektu, zarówno młodszy, jak i starszy programista mogą mieć problemy w zależności od problemów, które rozwiązują. Umieściliśmy to na łatwej skali, ponieważ nie będzie składać się z żadnych skomplikowanych elementów interfejsu użytkownika i wszystko można hermetyzować.

Możesz wybrać istniejący projekt, taki jak ten, który koncentruje się na rozwijanych menu / przyciskach:

Źródło

Lub możesz wybrać bardziej ogólny, taki jak Bootstrap i Foundation. Co wziąć pod uwagę:

• Dobrze zdefiniowana konwencja nazewnictwa.
• Prezentacja komponentów.
• Modyfikatory - większość ludzi lubi zmieniać drobne elementy, więc zastanów się, jak to zastosować. Przykład - chcesz kolory podstawowe, drugorzędne; sukces, stany błędów itp.
• Zachowaj to „plug and play”. Twoim celem jest umożliwienie innemu programiście korzystania z Twojego kodu bez konieczności pisania jakiegokolwiek kodu CSS. Możesz go również połączyć z podstawowym systemem siatki.

Dobra architektura takiej biblioteki nie jest sprawą banalną. Możesz spróbować tego samego zadania na początku swojej kariery, a także kilka lat później i porównać to, czego się nauczyłeś.

2 - Implementuj interfejs użytkownika złożonych animacji

Poziom trudności: trudny

W tym zadaniu chodzi o eleganckie animacje i wydajność. Ale oprócz tego musiałbyś również napisać kilka niezbyt ogólnych wizualizacji. Zobacz poniższy przykład:

Pełną animację można zobaczyć tutaj. Po wyłączeniu interfejsu użytkownika nadszedł czas, aby dodać interaktywność. Nie wszystkie animacje będą wyglądać jak projekt, ponieważ nie zostały wykonane w przeglądarce, ale w innym narzędziu, ale nie oznacza to, że nie można bardzo zbliżyć się do oryginału. Oczywiście pominiemy wszelkie efekty rozmycia ruchu i dziwne deformacje kształtu, ale większość reszty to coś, co możesz zrobić. Istnieją również biblioteki JS, które pomagają w tworzeniu klatek kluczowych.

To zadanie może zająć tylko dwie zamiany ekranu, aby było nieco krótsze. Nie musisz tutaj pracować nad widokami mobilnymi, jeśli nie masz energii.

3 - Interfejs gry

Poziom trudności: trudny

Kolejne trudne zadanie! Większość gier ma bardzo unikalny styl graficzny, którego nie da się łatwo przetłumaczyć w Internecie. Aby było trudniej, istnieje inna zasada - nie używaj żadnych obrazów / svg do uzyskania kształtów w interfejsie użytkownika.

Źródło: StarCraft II

W tym celu wybraliśmy StarCraft 2. Jak widać, tu i ówdzie jest mnóstwo drobnych szczegółów, które należy wziąć pod uwagę podczas wdrażania. Rzeczywiście, w tym przypadku zasada „braku aktywów” utrudnia to. Będziesz musiał pracować z kształtami, przycinaniem, magiksami cieni, gradientami, granicami i nie tylko. Oczywiście potrzebne są zdjęcia do portretów i marynarza po prawej stronie.

Aby uczynić rzeczy bardziej realistycznymi, górną prawą ramkę portretu można zamienić na jedną z górnych rzędów z następnego obrazu:

Źródło: StarCraft II

Jeśli udało Ci się sprawić, by wyglądał ładnie również na mniejszych ekranach i urządzeniach mobilnych, to wygrywasz dodatkowe punkty! To byłoby bardzo „Wow!” efekt projektu na Twoje CV.

4 - Quiz Game

Trudność: średnia

Gry typu quiz nie są zbyt trudne do zbudowania w porównaniu z niektórymi z powyższych projektów, ale wymagałyby napisania trochę JS, aby działały. Tak, do tej pory mieliśmy tylko projekty oparte na CSS, w tym przypadku musiałbyś także uczynić go interaktywnym, aby ludzie mogli klikać, widzieć poprawne / złe odpowiedzi i nie tylko.

Jeśli szukasz „Quiz” w Dribbble, możesz znaleźć mnóstwo przykładów, ale jeśli trudno ci wybrać jeden, możesz wziąć to:

Źródło

Jak widać, są tylko dwa ekrany, co oznacza, że ​​resztę będziesz musiał wymyślić na podstawie powyższego projektu.

Funkcje quizu:

• Policz prawidłowe odpowiedzi
• Odpowiedz z N opcji
• Pokaż prawidłowe / złe odpowiedzi po kliknięciu
• Zgłoś wyskakujące okienko z pytaniem
• Wróć do wszystkich quizów, wybierz quiz
• Pokaż końcowy wynik po zakończeniu quizu

Jeśli chcesz, możesz zrobić znacznie więcej niż te wymienione powyżej. Zwykle jest to projekt typu „jedno popołudnie”.

5 - Wybierz losową witrynę i przygotuj ją do druku

Trudność: łatwa

Optymalizacja pod kątem druku ma swoje dziwactwa. Zwłaszcza, gdy ukrywasz istniejące elementy w serwisie, czyścisz tła, poprawiasz typografię, pracujesz z podziałami stron i formatujesz strony.

W tym zadaniu możesz wybrać witrynę w Internecie, wybrać stronę z artykułem i rozpocząć pracę nad stylami drukowania. Istnieją obszerne artykuły na ten temat, więc jest wiele do zrobienia.

Przykładowe strony internetowe, z których możesz skorzystać:

• Strona sprzedaży Amazon - skup się tylko na ważnych informacjach.
• Strona sprzedaży kursów - z SitePoint.
• Kolejna strona kursu

Możesz wybrać dowolną inną witrynę, możesz sobie to ułatwić lub utrudnić. Jeśli chcesz zobaczyć przykład dobrego stylu drukowania, spójrz na https://www.smashingmagazine.com/, naprawdę go dopracowali.

6 - Złożony układ w stylu magazynu

Stopień trudności: Szalony

Ten, oprócz tego, że jest trudny, jest również złożony. Zajmuje to więcej czasu w porównaniu z innymi zadaniami wymienionymi powyżej, więc może być konieczne poświęcenie na to więcej niż 20-30 godzin.

Źródło

Powyższy projekt to przeprojektowanie The New York Times autorstwa Slavy Kornilov. W linku zobaczysz wszystkie projekty, które wykonał, w tym duże ekrany prezentujące całą stronę główną.

W tym projekcie będziesz musiał myśleć w kategoriach komponentów, stylizować niektóre złożone elementy interfejsu użytkownika, takie jak wideo wychodzące poza okno robocze (które musi nadal być responsywne), ustawienia typografii, nakładające się elementy i nie tylko.

Już samo spojrzenie na tło za dużym tytułem u góry ukrywa kilka trudnych elementów jego implementacji.

Zaprojektował mnóstwo elementów, więc jeśli chcesz, możesz spędzić tutaj ponad miesiąc lub dwa, a byłoby tak wiele do nauczenia. Może możesz nawet zrobić wideo w tle, jak pokazano poniżej:

Źródło

W tym przypadku są również animacje dla różnych artykułów z wiadomościami, które można również zaimplementować. Warto również wziąć pod uwagę widoki mobilne.

7 - Pulpit nawigacyjny i jego wykresy

Poziom trudności: średnio-trudny

Pulpity nawigacyjne są wszędzie. A kiedy projektanci nie wiedzą, co robić wieczorem, czasami po prostu projektują inny. Właśnie dlatego.
A dzięki temu jest w czym wybierać. W pewnym momencie prawdopodobnie będziesz musiał zbudować prawdziwy dla prawdziwego produktu. I możesz mieć pecha, aby dostać jeden z tych „niesamowicie wyglądających” interfejsów z milionem animacji podczas ładowania, które po prostu nie mają sensu.

Aby przygotować się na taki dzień, oto wyzwanie dla Ciebie:

Wykonaj następujący projekt:

Źródło

Co musisz tutaj wziąć pod uwagę - wykresy muszą być prawdziwe. Muszą używać prawdziwych danych i powinieneś postarać się, aby wyglądały jak te, które widzisz u góry. Istnieje wiele bibliotek, z których możesz korzystać i najprawdopodobniej będziesz musiał dużo rozszerzać / modyfikować.

Jeśli zdecydujesz się włączyć do niego jakieś animacje, mogłoby być jeszcze lepiej. To wyglądałoby tak ładnie w CV, prawda?

Na końcu:

Jednym z najlepszych sposobów nauki i zostania lepszym programistą jest po prostu rozpoczęcie pisania kodu i tworzenie witryn. Rób to codziennie, po prostu zaprogramuj mnóstwo! Jest to pomocne zwłaszcza w pierwszych 3-4 latach Twojej kariery.

Mając za sobą to doświadczenie, możesz z łatwością objąć bardziej starszą rolę. Tam możesz podejmować decyzje i efektywnie kierować własnym zespołem, korzystając z doświadczenia zdobytego podczas wszystkich tych projektów oraz problemów i problemów, które znalazłeś i pokonałeś po drodze. Pamiętaj, zawsze staraj się znaleźć coś, nad czym warto popracować!