Skoro już wiemy, kim jest front end developer, czas poznać, od czego zacząć naukę. Cały czas zresztą powstają nowe materiały do nauki, książki, kursy stacjonarne, szkolenia czy kursy online. Ogromna ilość wiedzy może przytłaczać, dlatego właśnie warto wiedzieć, od czego dokładnie zacząć, żeby nie zmarnować czasu na naukę rzeczy niepotrzebnych. I właśnie dlatego zapraszam Cię na wpis, gdzie dowiesz się, od czego zacząć naukę, aby być junior frontend developerem.

Podstawa – Angielski

Pierwszą rzeczą, którą musisz znać, jest język angielski. Jest to absolutnie podstawa i pierwszy język programowania, którego musisz się nauczyć. Większość materiałów jest tworzona w języku angielskim. Większość nowych technologii jest tworzona z angielską dokumentacją. Większość problemów, z którymi się spotkasz, już zostało rozwiązanych… właśnie w języku angielskim.

Bez angielskiego ciężko Ci będzie się poruszać w świecie IT. Mimo że istnieją możliwości nauki frontendu bez angielskiego (np. polskie kursy czy książki), to jednak MUSISZ się go nauczyć. Po polsku poznasz podstawy, ale całej reszty będziesz musiał douczyć się sam. Najczęściej po angielsku.

Nie musisz znać angielskiego perfekcyjnie, ale musisz nauczyć się czytania dokumentacji technicznej po angielsku oraz opisywania problemu po angielsku. Z czasem wyrobisz w sobie umiejętności jeszcze lepszego szukania wiedzy i rozwiązań, jednak na początku język angielski jest absolutnie niezbędny, żeby pracować dobrze i szybko.

Język programowania – JavaScript

Podstawowym językiem programowania, i jednocześnie technologią, która będzie potrzebna na frontendzie, jest obecnie JavaScript (w skrócie JS). Bez niego nie pójdziesz dalej. Musisz go poznać jak najszybciej i jak najlepiej potrafisz, gdyż obecny frontend opiera się głównie na JavaScripcie i to w nim jest najwięcej pracy.

JavaScript to skryptowy język programowania, który jest łatwy do nauki i ciężki do pełnego opanowania. Początkowo powstał, by dać ludziom możliwość jakiejś dynamicznej reakcji strony na działanie użytkownika. Z czasem jednak rozrósł się tak bardzo, że obecnie tworzy się przy użyciu JSa całe strony www. 

Podstawy nauki JavaScriptu

Na początku poznaj typy danych, podstawowe operacje na nich, funkcje, warunki, pętle oraz zasięgi. Kiedy to poznasz, idź dalej, ucząc się, czym jest drzewo DOM, jak JS może manipulować drzewem DOM i jak może używać i obsługiwać eventy w reakcji na akcje użytkownika, przykładowo kliknięcie przycisku. Kolejnym krokiem jest nauka tego, czym jest JSON, jak się z nim pracuje, oraz jak się pobiera dane z API jakiegoś serwera. W większości projektów się z tego korzysta, więc to jest ważny punkt. Na koniec poznaj, czym jest ES6 oraz jego najważniejsze nowości, czyli głównie funkcje strzałkowe, lety, consty, obietnice, async/await czy destrukcyjne przypisania.

Framework – VanillaJS, czyli czysty JS

Jeżeli chodzi o frameworki, to zacznij od VanillaJS, czyli od czystego JSa. Na frameworki przyjdzie czas, teraz skup się na poznaniu podstaw. Dobre nauczenie się podstaw opłaci się przez wszystkie kolejne lata, kiedy będziesz programował. Frameworki przychodzą i odchodzą, podstawy zawsze są takie same.

Dodatek do tworzenia stron – HTML i CSS

Niestety, poza JSem musisz też nauczyć się HTMLa i CSSa. HTML to język znaczników, który jest wykorzystywany do tworzenia tak jakby szablonu strony www. CSS to arkusze stylów, które są wykorzystywane, a jakże, do stylowania strony, nadawania jej wyglądu. Razem z JSem tworzą trójkę podstawowych technologii wykorzystywanych do tworzenia strony www. HTML tworzy szkielet strony, CSS jej wygląd, a JS jej mózg.

Podstawy nauki HTML i CSS

Najpierw poznaj najczęściej używane elementy HTML 5, np. <header>, <footer>, <body>, <div>, <span> itd. Później Podstawy stylowania, czyli najpopularniejsze atrybuty, ich możliwe wartości, czym są klasy i ID w HTMLu, jaka jest kolejność ładowania styli do elementu. Później poznaj pozycjonowanie elementu, czym jest box model, flex boxa i grida. Na koniec poznaj media query i responsive web design.

Podstawowe narzędzie – przeglądarka

W międzyczasie musisz poznać, jak używać przeglądarki podczas pracy z frontendem. Mówiąc krótko, musisz poznać narzędzia developerskie wbudowane w przeglądarkę (najpopularniejsze to chrome dev tools w przeglądarce chrome oraz firebug w przeglądarce firefox) oraz jak przeglądarka ładuje strony internetowe, jak się komunikuje z serwerem i jak używa się i jak działają funkcje przeglądarki w kodzie (np. setTimeout). 

Podstawowe narzędzie – IDE

Musisz poznać również swoje IDE. Ja polecam obecnie Visual Studio Code. Jest to darmowe IDE, które działa naprawdę dobrze, a dzięki możliwości dodawania paczek, możemy to IDE skonfigurować idealnie pod siebie i technologie, nad którymi obecnie pracujemy. Lubisz inny wygląd tekstu? Nie ma problemu. Obecnie pracujesz z czystym JSem? Spoko, można ściągnąć snippety. Wolisz, żeby kod sam się formatował? Też da się zrobić. Poznaj dobrze IDE, a będziesz pracować o wiele wydajniej.

Podstawowe narzędzie – konsola

Ostatnim podstawowym narzędziem jest konsola. Większość komend, czy do postawienia serwera developerskiego, czy do ściągania nowych bibliotek, wykonuje się w konsoli. Musisz nauczyć się w niej poruszać i wykonywać odpowiednie akcje. Pozwoli to nie tyle na efektywną pracę, ile na pracę przy nowoczesnym frontendzie w ogóle. Bez tego może być naprawdę trudno.

Co dalej?

Podstawy za nami. Jeżeli nauczysz się tego wszystkiego, o czym napisałem wyżej, czas na kolejne kroki. Tutaj jest już dowolność, jeżeli chodzi o frameworki czy biblioteki, ale ja polecałbym, żeby wybrać Angulara lub Reacta i skupić się tylko na jednym. Z dodatkowych narzędzi obowiązkowo GIT i podstawowy serwer gita, czyli Github, preprocesory CSSa, np. SASS, języki zamieniane na JS, czyli np. TypeScript (w skrócie TS) oraz podstawy wrzucania aplikacji na serwer.

Podsumowanie

Jak widzisz, nauki jest naprawdę sporo. Podstawą jest jednak JavaScript i to od niego musisz zacząć naukę. Jeżeli nie pracujesz jeszcze, rób wszystko po kolei tak, jak było we wpisie. Jest to dobra droga na początek. W międzyczasie oczywiście ucz się angielskiego.

Jeżeli już gdzieś pracujesz, skup się na perfekcyjnym poznaniu technologii, w których obecnie pracujesz i zarabiasz, a całą resztę odsuń w czasie. Dzięki temu będziesz coraz lepszym pracownikiem. 

Czy masz jakieś problemy podczas nauki frontendu? A może jest coś, o co chcesz zapytać? Zapraszam do komentarzy!