Jak zostać web developerem? Czego musisz się uczyć? Nauka Java Script

Jeśli chcesz zostać web developerem, ale nie wiesz jaką drogę obrać, to ten wpis jest dla Ciebie. Podam Ci kilka kroków, które musisz wykonać, aby stać się profesjonalnym web developerem.

Kroki te będą oparte na JavaScript. O innych technologiach opowiem Ci w innym wpisie.

To dlatego, że z JavaScriptem, nie musisz uczyć się jednego języka dla frontu swojej strony i innego języka dla backendu. JavaScript ma możliwość obsługi zarówno rozwoju frontendowego jak i backendowego.

Jest po prostu uniwersalny, a do tego bardzo popularny w ostatnich czasach!

Nauka HTML i CSS

HTML to skrót od Hyper Text Mark-up Language, natomiast CSS to skrót od Cascading Style Sheet. HTML jest językiem używanym do budowania struktury każdej aplikacji internetowej, podczas gdy CSS jest używany do stylizacji i dodawania piękna do aplikacji.

Pierwszym krokiem do zostania web developerem jest poznanie podstaw HTML i CSS. Aby nauczyć się ich za darmo, polecam wejść na stronę w3schools lub freecodecamp.org.

Te dwie strony są załadowane tutorialami, które pomogą Ci uzyskać wszystkie informacje potrzebne do rozpoczęcia nauki. Tam będziesz musiał nauczyć się różnych znaczników html, elementów i atrybutów.

Będziesz musiał również nauczyć się selektorów CSS, metod osadzania CSS w pliku html, zapytań o media i animacji.

Nauka JavaScript

Po poznaniu HTML i CSS, kolejną rzeczą do nauczenia się jest JavaScript, język programowania, który zasila frontend każdej aplikacji internetowej. JavaScript jest niezbędnym językiem w Twojej podróży do zostania web developerem. Jest to język używany do dodawania funkcjonalności do frontendu aplikacji internetowej.

Zacznij od nauki podstawowych pojęć, takich jak zmienne, warunki, pętle, tablice, obiekty i funkcje. Następnie możesz nauczyć się nowoczesnych funkcji, takich jak klasy, funkcja strzałki, operator rozprzestrzeniania, destrukcja obiektów i tablic.

Dobrą rzeczą jest to, że nie trzeba za to płacić. Istnieją spore zasoby do nauki kodowania: w3school, freecodecamp.org i MDN. A jeśli lubisz uczyć się za pomocą materiałów wideo, to polecam Ci również kursy video na YouTube.

Wybierz szkielet/bibliotekę

Frameworki to struktury, na których możesz budować swoje oprogramowanie. Sprawiają one, że tworzenie oprogramowania jest o wiele łatwiejsze. Na tym etapie swojej podróży musisz wybrać framework CSS i JavaScript, z którym będziesz pracować.

Zalecam, abyś wybrał Bootstrap jako framework CSS i React.js jako bibliotekę JavaScript. Z Bootstrapem możesz łatwo zbudować stronę, która jest responsywna i dobrze pasuje na urządzeniach mobilnych, komputerach stacjonarnych i laptopach. (Dobrą alternatywą dla Bootstrapa jest również UI Kit)

React.js to darmowa i open-source’owa biblioteka front-end JavaScript. Jest łatwiejszy do nauczenia i ma więcej możliwości pracy w porównaniu z innymi frameworkami, takimi jak Angular i Vue.

Musisz poznać środowisko programistyczne React, komponenty, routing i haki.

Nauka frameworków Node.js i Express

W tym momencie przechodzisz do rozwoju backendu. Pracując z Reactem musiałeś dowiedzieć się czegoś o Node.js. Jest tak dlatego, że musisz zainstalować Node, zanim będziesz mógł stworzyć środowisko programistyczne React.

Jednak tym razem wykraczasz poza zwykłe użycie Node do stworzenia środowiska programistycznego i używasz go wraz z Expressem do tworzenia aplikacji po stronie serwera. Node.js jest zbudowany na JavaScripcie; dlatego nauka go nie będzie trudna, ponieważ masz już wiedzę o JavaScripcie z etapu III.

Aby móc używać Node i Express do tworzenia backendu, musisz nauczyć się jak używać ich do zapisu i odczytu plików, tworzenia punktów końcowych REST API i routingu.

Nauka baz danych

Bazy danych są używane do przechowywania danych użytkowników i aplikacji. Istnieją zasadniczo dwa rodzaje baz danych: relacyjna baza danych i nierelacyjna baza danych.

Przykładem relacyjnej bazy danych jest MySQL, natomiast nierelacyjnej bazy danych jest MongoDB. W tym momencie Twojej drogi do zostania profesjonalnym web developerem musisz nauczyć się jak pracować z bazą danych.

Osobiście będę rekomendował, abyś zaczął od MongoDB. Oznacza to, że stajesz się programistą stron internetowych ze stosu MERN. Musisz więc nauczyć się, jak możesz podłączyć MongoDB do swojej aplikacji i jak przeprowadzać operacje CRUD.

Nauka deployu – wdrożenia

Twoja podróż do tworzenia stron internetowych nie będzie kompletna, jeśli nie wiesz, jak wdrożyć swoją aplikację na serwerze lub w chmurze. To ten moment, w którym warto poznać Heroku.

Heroku jest platformą w chmurze używaną do wdrażania aplikacji. Odwiedź ich stronę internetową i zarejestruj się, aby rozpocząć proces wdrażania. Istnieje wystarczająco dużo informacji na temat ich dokumentacji, która poprowadzi Cię, jak możesz wdrożyć swoją aplikację.

Zobacz również inne alternatywy do hostowania swoich aplikacji.

Nauka dodatkowych umiejętności

Jesteś teraz twórcą stron internetowych, ale jest jeszcze więcej koncepcji, których musisz się nauczyć w miarę postępów. Musisz nauczyć się takich rzeczy jak: jak dodać bramkę płatności do swojej aplikacji, jak przeprowadzić uwierzytelnianie/autoryzację używając aplikacji firm trzecich jak Gmail i Facebook czy Apple, jak używać systemów kontroli wersji jak GitHub.

Musisz także poznać struktury danych i algorytmy. Kiedy uczestniczysz w rozmowie kwalifikacyjnej jako programista, często będziesz otrzymywać pytania dotyczące struktury danych i algorytmów.

Wreszcie, musisz kontynuować naukę i budować projekty. Nauka jako programista nie ma końca.

Zobacz jakie projekty możesz stworzyć na początku swojej drogi programisty.

Portale warte uwagi Web Developera

Daily.dev – Platforma używana przez ogromne firmy technologiczne, takie jak Google, Apple, Netflix i inne, aby zlokalizować najbardziej popularne artykuły i zasoby na temat programowania komputerowego, technologii oprogramowania, tworzenia stron internetowych, uczenia maszynowego, androida, nauki o danych i wielu innych tematów.

MDN Web Docs – Web development to duży temat i nie sposób zapamiętać całej semantyki i wszystkich elementów każdego języka. Dokumenty online MDN (Mozilla Developer Network) są darmową i otwartą platformą wspieraną przez Fundację Mozilla do nauki web dev, z tematami od początkujących do zaawansowanych.

Web.dev – służy również jako repozytorium studiów przypadków, podcastów i artykułów na takie tematy jak Progressive Web Apps, Responsive Web Design, formularze HTML, wzorce układu, metryki wydajności i inne. Możesz również użyć ich narzędzia do oceny wydajności strony internetowej, co pomoże Ci w poprawieniu wydajności Twojej aplikacji.

Open base – W przypadku tworzenia nowej aplikacji lub dodawania nowej funkcji do istniejącej, wybór właściwego narzędzia jest bardzo ważny – warto polegać na wiedzy innych i w tym pomoże CI openbase. To zbiór bibliotek, API, baz danych, frameworków. Open Base jest podobne do Google. Wyświetla dane takie jak tygodniowe pobrania, gwiazdki na GitHubie, częstotliwość wprowadzania nowych zmian w pakiecie oraz, co najważniejsze, autentyczne oceny od innych deweloperów.

Podsumowanie

Wyrwij się z piekła tutoriali, nie oglądaj poradnika za poradnikiem, naucz się raz, a potem kontynuuj.

Buduj własne mini projekty! To jest najlepszy sposób nauki! Możesz budować ciągle jeden projekt i dokładać do niego kolejne elementy np: najpierw czysty HTML, potem HTML + CSS, potem HTML + CSS + JS + Mongo.

Zawsze pytaj o pomoc, czy to na forach internetowych takich jak StackOverflow czy reddit, jak również na kanałach Discord skupiających się na web dev, pytanie kogoś, kto jest bardziej doświadczony, nie jest powodem do wstydu!