Diversity w polskim IT
Mehdi Aoussiad
Mehdi AoussiadFront-End Web Developer @ Freelance

5 ciekawych projektów dla Frontend Developera na 2023 rok

Z tymi projektami udoskonalisz swoje umiejętności jako Frontend Developer.
20.01.20234 min
5 ciekawych projektów dla Frontend Developera na 2023 rok

Tworzenie frontendów w ostatnich latach staje się coraz to popularniejsze. Zapotrzebowanie na doświadczonych Frontend  Developerów stale rośnie, a w branży tworzenia stron internetowych jest obecnie coraz więcej ról.

Dlatego też z różnych powodów w dzisiejszych czasach coraz więcej osób decyduje się na zostanie Frontend Developerem. Jednak żeby zostać dobrym developerem, zawsze powinno się tworzyć projekty, a nie tylko uczyć się języków czy koncepcji.

Aby więc poprawić swoje umiejętności, zawsze będziesz musiał praktykować to, czego się nauczyłeś. Budowanie projektów jest bardzo ważne, zwłaszcza jeśli dopiero zaczynasz swoją przygodę w tej branży.

Projekty pomogą Ci zapełnić Twoje portfolio i stać się dobrym i wykwalifikowanym developerem. Posiadanie tego w swoim portfolio otworzy przed Tobą drzwi i pomoże w rozwoju Twojej kariery.

Poza tym, budowanie nowych projektów to również dobre rozwiązanie, jeśli chcesz uciec od piekła tutoriali. Możesz więc tego uniknąć, wykonując zamiast tego kilka projektów.

W tym artykule podzielę się z Tobą kilkoma, które możesz stworzyć, gdybyś chciał poprawić swoje frontendowe umiejętności. Przejdźmy więc od razu do rzeczy.

1. Dobrze wyglądająca strona broszurowa

Jako Frontend Developer, umiejętność przekształcenia dowolnego typu projektu w funkcjonalną stronę internetową jest jedną z ważniejszych umiejętności, które powinieneś posiadać.

Jeśli chcesz być w tym dobry, powinieneś przełożyć to na praktykę. Budując statyczną stronę broszurową, możesz się tego wszystkiego nauczyć i przećwiczyć swoje umiejętności w praktyce.

Stroną broszurową może być wszystko, np. strona osobista, strona docelowa dla firmy lub strona docelowa dla newslettera. Wystarczy dobra znajomość HTML, CSS czy JavaScriptu, aby móc przekształcić dowolną makietę w stronę internetową.

Jest to dobry sposób, aby pokazać, że można stworzyć atrakcyjne i wysoko konwertujące strony docelowe, które przyciągają wzrok. Musisz tylko przestrzegać najlepszych praktyk UI i upewnić się, że strona wygląda ładnie.


Przykłady stron broszurowych:

  • strona internetowa agencji,
  • strona internetowa restauracji,
  • strona internetowa z portfolio,
  • strona docelowa firmy.


Przydatne umiejętności:

  • HTML,
  • CSS,
  • projektowanie responsywnych stron,
  • JavaScript,
  • oko do projektowania.

2. Prosta aplikacja internetowa wykorzystująca API

Jeszcze jednym dobrym projektem, który możesz dodać do swojego portfolio jako Frontend developer jest każdy rodzaj aplikacji internetowej, która wykorzystuje API. Obecnie istnieje wiele świetnych API, które możesz wykorzystać jeśli chcesz zbudować aplikację internetową.

Ten projekt udowodnia, że jesteś w stanie bez problemu pracować z interfejsami zewnętrznych API. Po prostu, stworzysz małą aplikację internetową, która wykorzystuje zewnętrzne API. Może to być dowolny rodzaj aplikacji internetowych, takich jak aplikacja filmowa, aplikacja pogodowa lub aplikacja z memami na przykład.

Zobacz przykład aplikacji pogodowej, w której można wyszukać miasta i sprawdzić sytuację pogodową:

weather app using JavaScript


I masz tutaj oczywiście wybór. Możesz zastosować framework lub po prostu klasyczny, waniliowy JavaScript. Celem jest, abyś mógł zbudować stronę internetową, która wyświetla dane API lub wykonuje pewne operacje.


Kilka przykładów małej aplikacji internetowej wykorzystującej API:

  • aplikacja pogodowa,
  • aplikacja do szukania pracy,
  • aplikacja z filmami,
  • aplikacja do tworzenia memów.


Przydatne umiejętności:

  • HTML,
  • CSS,
  • JavaScript,
  • Axios (do pobierania danych z API),
  • React/Vue (opcjonalnie).

3. Koszyk na zakupy e-commerce

W tym projekcie chodzi o zbudowanie fajnego koszyka na zakupy z fajnymi funkcjami. Po prostu potrzebujesz stworzyć koszyk
e-commerce, który posiada poniższe funkcje:

  • możliwość dodawania produktów do koszyka,
  • możliwość przeglądania wszystkich produktów dodanych do koszyka,
  • możliwość usuwania produktów z koszyka,
  • możliwość wyliczenia wszystkich cen.

Zastosowanie koszyka przydaje się na stronach e-commerce i w sklepach internetowych. Wszystko, co musisz stworzyć, to czysty interfejs frontendu sklepu z jakimiś funkcjami oczywiście.

Przydatne umiejętności:

  • HTML,
  • CSS,
  • JavaScript,
  • React/Vue.

4. Twoje osobiste portfolio

Teraz, gdy masz już kilka prostych projektów, następnym krokiem jest stworzenie osobistej strony internetowej z portfolio.

personal portfolio

Strona musi wyglądać wizualnie czysto i atrakcyjnie. Upewnij się, że przestrzegasz wszystkich najlepszych praktyk projektowania stron internetowych, tak, aby Twoje portfolio reprezentowało Cię w dobrym świetle.

Powinno zawierać stronę informacyjną, która mówi o Tobie, stronę kontaktową, gdzie ludzie mogą się z Tobą skontaktować, oraz stronę z projektami, na której zaprezentujesz wszystkie swoje poprzednie projekty. Strona główna powinna wyglądać schludnie i powinna być ładnie zaprojektowana.

5. Stwórz swojego bloga

Jako Frontend Developer, warto byś miał swoją stronę internetową z blogiem. Istnieje wiele dobrych powodów, które za tym stoją.

Tworząc własny blog z wykorzystaniem zdobytych umiejętności, możesz pisać artykuły i dzielić się wiedzą z innymi programistami. Oprócz tego możesz również udokumentować swoją podróż i wprowadzić się na rynek jako deweloper poruszający się w branży.

Własny blog to dobry sposób, aby znaleźć się na drodze rekrutacji i uzyskać więcej możliwości w swojej karierze deweloperskiej. Ponadto, jeśli traktujesz bloga poważnie, możesz stworzyć sobie solidną pozycję w Internecie.

Jest to więc świetny projekt do zbudowania, ponieważ pozwoli Ci dzielić się wiedzą z innymi i posiadać dodatkowy projekt w swoim portfolio.

Jak więc zbudować własnego bloga? Cóż, najlepszym sposobem jest użycie statycznego generatora stron, takiego jak Gridsome lub Gatsby, jeśli używasz Vue lub React.

Dzięki temu w prosty sposób stworzysz stronę internetową, na której będziesz mógł szybko zamieszczać wpisy na blogu. Możesz również sprawić, że Twój blog będzie o wiele bardziej wydajny i szybki, jeśli użyjesz statycznego generatora stron zamiast WordPressa.


Narzędzia i umiejętności, które mógłbyś wykorzystać:

  • HTML,
  • CSS,
  • JavaScript,
  • React,
  • Next.js,
  • MDX,
  • generowanie stron statycznych.

Podsumowanie

Jak więc mogłeś zauważyć powyżej, była to krótka lista niektórych projektów, które warto zbudować, jeśli chcesz udoskonalić swoje deweloperskie umiejętności. Jeśli chcesz zostać dobrym developerem, to tworzenie takich projektów jest tutaj bardzo kluczowe.

Swoje umiejętności kodowania poprawisz tylko wtedy, kiedy będziesz aktywnie tworzył rzeczy. Oglądanie tutoriali bez jakiejkolwiek praktyki to nigdy nie jest dobry pomysł.

Z oryginalną wersją artykułu można zapoznać się na Medium.com.

<p>Loading...</p>