Skoro wiemy, kim jest, czas dowiedzieć się jak zostać frontend developerem. Nie będzie to jednak ani szybkie, ani łatwe. Nagroda jednak jest tego warta, więc do dzieła!

Dlaczego Frontend?

Zanim zaczniemy naukę frontendu, musimy poruszyć parę kwestii. Przede wszystkim, zastanówmy się, dlaczego w ogóle chcemy poznać frontend. Ja, kiedy zaczynałem, próbowałem wszystkiego, i frontendu, i backendu, i testowania, i trochę dokumentacji, zarządzania i designu. I właśnie frontend spodobał mi się najbardziej. Plusy, które za tym przemawiały, to:

  • Szybko widać efekty – Przez większość czasu kiedy coś robisz, od razu widać zmiany. Cały czas widzisz, na żywo, jak rośnie twoja strona, a to bardzo, bardzo dobrze motywuje do dalszej pracy.
  • Średni próg wejścia – Nie jest bardzo prosto zacząć, ale jednak często, mimo tego, że pracy jest więcej, prościej jest zacząć programować we frontendzie niż w backendzie.
  • Dużo materiałów – Jest bardzo dużo materiałów, wiele jest darmowych i bardzo dobrej jakości. Można przebierać w kursach, blogach czy szkoleniach, co upraszcza naukę na początku.
  • Dużo ofert pracy – Naprawdę dużo. Dzięki temu, że frontend to nie tylko strony, ale głównie frameworki/biblioteki, lub mobilki, lub aplikacje desktopowe, frontendowców potrzeba coraz więcej.

Mity

Kolejna rzecz do omówienia to mity i prawda o nauce frontendu. Mitów jest wiele, więc nie rozprawię się z każdym po kolei, przedstawię za to najważniejsze punkty, jeżeli chodzi o naukę:

  • Dużo nauki – Jeżeli ktoś ci mówi, że frontendu nauczysz się szybko, łatwo, przyjemnie i bez problemów – kłamie. Nauki jest dużo, naprawdę dużo, i nie nauczysz się w miesiąc czy dwa. Żeby mieć ogólne zrozumienie wszystkich kwestii potrzebnych na stanowisko juniora oraz ucząc się po godzinach, myślę, że potrzebujesz około pół roku do roku.
  • Słabe zarobki na początku – Na samym początku nie licz na dobre pieniądze. Jak w każdym zawodzie, na początku, nawet jeżeli znasz podstawy, to i tak nie umiesz pracować, nie znasz zasad, dobrych praktyk, jak się współpracuje w zespole oraz wielu, wielu innych. Dlatego na początku dostaje się mało. Zapomnij niestety o wykopowych 5-10-15k, początek to minimalna krajowa. Zarabiasz mało, uczysz się dużo.
  • Trzeba robić projekty – Dużo projektów. Dobrych projektów. Trzeba robić i już. Jeżeli chcesz nauczyć się pływać, to nie oglądasz najlepszych pływaków na świecie, tylko idziesz na basen i pływasz. Jeżeli chcesz nauczyć się jeździć na rowerze, to nie oglądasz najlepszych rowerzystów, tylko siadasz na rower i jedziesz. Z programowaniem jest dokładnie tak samo – MUSISZ usiąść i zacząć programować. Dużo, często, i przede wszystkim systematycznie. Nie przeskoczysz tego, nie okłamuj siebie, mnie ani kogokolwiek – jeżeli nie programujesz, jeżeli nie masz kodu do pokazania, to nie ważne ile przeczytasz kursów, ile obejrzysz filmów, nie uczysz się. I cokolwiek teraz nie powiesz – taka jest prawda, której nie da się obejść.
  • Nie rób nudnych projektów – jeżeli rekruter widzi kolejny projekt to-do jak poprzednich dwadzieścia, a do tego wszystkie z tego samego tutoriala, to się poddaje. Nie rób typowych, zwykłych projektów, tego, co wszyscy. Jeżeli chcesz to-do to może jakaś aplikacja, gdzie to-do to tylko kawałek? Jeżeli chat, to może od razu naucz się node.js i postaw sam sobie backend? Pomysłów jest wiele, najważniejsze to nie robić prostych i nudnych projektów jak wszyscy inni.
  • Staże – Nie bój się staży. Staż to czas, kiedy się uczysz programować w firmie. Może cię po nim zatrudnią, a może nie. Pomyśl jednak o stażu jak o bootcampie, który jest za darmo. Staż, później praktyki, a później kto wie, może zatrudnienie :).

Chciałbym odnieść się jeszcze do zarobków. Słychać głosy mówiące, że “po co się uczyć frontendu, skoro po tym roku dostaje się najniższą krajową na początek”. Po pierwsze, taką kwotę dostaje się na początku. Jeżeli ma się głowę na karku, to w 5 lat można dojść do naprawdę dobrych pieniędzy. Bez problemu można zarabiać 2-3 średnie krajowe netto.

Po drugie, osoby, które tak myślą, nie są konkurencją dla osób, które uczą się programowania :) Skoro poddają się, nie zbadawszy tematu, można założyć, że podobnie nie będą badać tematu podczas nauki, a więc mają mniejszą szansę na znalezienie dobrej pracy, a więc większa szansa na pracę dla Ciebie :D

Planowanie zmiany pracy

Nie rzucaj się na programowanie jak na zbawienie. Zachowaj swoją obecną pracę, aby mieć wolność finansową i uniknąć problemów z pieniędzmi. Ucz się po godzinach, powoli, ale systematycznie. Niech to zajmie rok, ale niech to będzie rok, który nie jest zmarnowany. Ucz się w swoim tempie, ale cały czas idąc do przodu.

Jak się uczyć

Mam dla Ciebie również parę porad jak się powinno uczyć. Wszystkie są sprawdzone i pomogą Ci osiągnąć twoje cele. Tak więc zapraszam:

  • Ucz się w swoim tempie. Każdy uczy się inaczej, więc nie przejmuj się tym, że ktoś inny uczy się szybciej a ktoś wolniej. W końcu nie robisz tego dla innych, tylko dla siebie.
  • Ucz się programując. Pisałem już o tym w mitach, ale powtórzę jeszcze raz – jeżeli nie masz kodu, który możesz pokazać, nie uczysz się programować. Możesz obejrzeć tysiące filmików na YouTube i przejść milion kursów, ale jeżeli nie ma kodu – nie ma nauki.
  • To nie jest tak, że nie masz czasu. Masz czas, tylko robisz inne rzeczy. Nawet teraz czytasz ten wpis, a można by się uczyć programowania w tym czasie. Twoje życie się zmieni, to prawda, ale jeżeli chcesz naprawdę programować, i naprawdę ci na tym zależy, musisz decydować. Piątek wieczór to dobry czas na imprezę lub na naukę. Jasne, znajomi cię nie polubią za to, ale z drugiej strony to nie znajomi cię utrzymają, to nie znajomi ci pomogą w czasie kryzysu, to nie znajomi mają twoje życie, twoje problemy i twoje marzenia. W sobotę możesz odpoczywać cały dzień lub programować. Niedziela to samo. Patrząc na to czysto matematycznie, to w tygodniu roboczym codziennie godzinka + po 2H w weekend daje ci 9H czasu na naukę w tygodniu. Jeden roboczy dzień na naukę. Wybieraj mądrze.
  • Ucz się systematycznie i ciągle. Jeżeli pouczysz się przez 2 tygodnie, a później 2 tygodnie zrobisz przerwę, to możesz mieć problem z powrotem. Jasne, ostatecznie się wszystko przypomni, ale niepotrzebnie stracisz czas. Poza tym systematyczna nauka przyśpieszy to, kiedy będziesz już mieć wymarzoną pracę :)
  • W czasie, kiedy masz zajęcia niewymagające zaangażowania, jak zmywanie, sprzątanie itp., słuchaj podcastów. To świetna możliwość zdobycia nowej wiedzy czy poznania nowinek technicznych w czasie, który wydaje się stracony. Jeżeli ktoś dojeżdża do pracy autem, również może ten czas spędzić produktywnie z podcastem zamiast z radiem. Nie polecam tylko mocno technicznych tematów do auta, bezpieczeństwo przede wszystkim :)
  • Twórz projekty, które Cię uszczęśliwiają. Zamiast robić kolejną apke jak tysiące innych ludzi, stwórz coś, czego potrzebujesz. Zamiast kolejnego to-do może prosta strona do budżetu domowego? Może lubisz kwiaty, więc strona czy forum dla florystów. Może lubisz być w kontakcie ze znajomymi, więc stwórz prosty portal społecznościowy dopasowany do twoich potrzeb. Projekty nie muszą być wielkie i trudne, powinny za to sprawiać Ci przyjemność.
  • Każdy projekt powinien Cię czegoś uczyć. Każdego kolejnego dnia musisz być co najmniej o 1% lepszym programistą niż dzień wcześniej. Każdy dzień – coraz lepszy :)

No dobrze, znamy już teorię. Teraz czas na najlepszą i najtrudniejszą część – czego się uczyć. Poza opisaniem wszystkich potrzebnych rzeczy podam ci według mnie najlepsze darmowe źródła do nauki i do konkretnych zagadnień i całe kursy. Tak, żeby było nieco prościej :) A zatem – do dzieła!

Czego się uczyć – podstawy podstaw

Zacznijmy od podstaw. Poniższa lista to minimum, które musisz poznać, aby być junior frontend developerem. Może nie wygląda na dużo, ale uwierz mi – nauka tego zajmie ci sporo czasu. Większość rekomendowanych źródeł jest po angielsku, gdyż właśnie w tym języku jest najwięcej darmowych i dobrych źródeł. Rekomendacje pomogą ci w nauce, jednak ucz się tak, jak lubisz. Jeżeli masz jakiś kurs, który uważasz za lepszy – śmiało. Chodzi o dobrą, systematyczną naukę. Nie przedłużając – rekomendacje ogólne:

  1. Web Development Tutorial For Beginners 2018 / 2019 – how to make a website
  2. Intro to HTML/CSS: Making webpages

Angielski

Pierwszym językiem, jaki musisz w programowaniu poznać, jest angielski. Bez angielskiego jest bardzo, bardzo trudno, lub wręcz niemożliwe, uczyć się programowania i najnowszych zagadnień. Nie trzeba znać go perfekcyjnie, ale trzeba umieć czytać dokumentację techniczną. Tutaj rekomendacji nie mam – wybierz dowolną metodę nauki, która ci pasuje.

Jak działają przeglądarki.

Bardzo ważne zagadnienie na początku. Dowiedz się, czym jest HTML, CSS, JS, DOM, domeny, DNS, URL, HTTP, przeglądarka itd. Ogólnie rzecz biorąc – podstawy działania obecnego internetu, jak wszystko ze sobą działa i jak to się dzieje, że po wpisaniu www.facebook.pl widzimy stronę. Rekomendowane linki:

  1. How the Web works
  2. How Browsers Work: Behind the scenes of modern web browsers
  3. Getting started with the Web
  4. Web – Basic Concepts
  5. freeCodeCamp
  6. HTML and CSS Step by Step

Podstawy HTML (html to szkielet aplikacji)

HTML to podstawa, szkielet stron www. To tutaj umieszcza się strukturę strony, dodaje się style czy JavaScript. Nie ważne, czy będziesz używać reacta, czy ciąć PSD – HTML zawsze będzie z tobą. Rzeczy, których musisz się nauczyć, to:

  • Podstawy HTML
  • Semantyczny kod
  • HTML 5

Rekomendowane linki:

  1. Kurs HTML
  2. Introduction to HTML
  3. Interneting is hard (But it doesn’t have to be)
  4. Learning HTML: Guides and tutorials
  5. Learn Enough HTML to Be Dangerous

Podstawy CSS (CSS to wygląd aplikacji)

Tak jak HTML jest szkieletem strony, to CSS jest jego wyglądem. To tutaj stylujemy stronę, tworzymy animacje czy po prostu dostosowujemy ją do siebie. Bardzo ważny etap tworzenia strony i to, co użytkownik końcowy widzi. Najważniejsze zagadnienia to:

  • Podstawy stylowania
  • Flex, CSS Grid
  • Media Query
  • CSS3

Rekomendowane linki:

  1. Learn to style HTML using CSS
  2. A Complete Guide to Flexbox
  3. CSS Diner
  4. Style Fancy Buttons: CSS Tutorial
  5. Learn Enough CSS & Layout to Be Dangerous

JavaScript (mózg aplikacji)

JavaScript jest mózgiem strony. Pierwotnie powstał, by nadać stronom trochę dynamiczności. W obecnych czasach jednak używa się go często, aby tworzyć całe strony od zera. To właśnie z JSem spędzisz najwięcej czasu, więc dokładne poznanie podstaw jest bardzo ważne (co opisałem w artykule https://rwbit.pl/dlaczego-warto-poznac-podstawy-javascript/ )

Najważniejsze zagadnienia na teraz:

  • Podstawy języka (Pętle, warunki, funkcje itp.)
  • Manipulacja DOM
  • Asynchroniczność

Rekomendowane linki:

  1. Learn JavaScript – Full Course for Beginners
  2. Learn to code for free
  3. Javascript30
  4. You Don’t Know JS
  5. Learn Vanilla JS
  6. Learn Enough JavaScript to Be Dangerous
  7. Learn JavaScript

Czego się uczyć – kolejny krok

Teraz kiedy umiesz już podstawy, warto poznać poniższe zagadnienia. Są niezbędne do dalszej pracy, ale nie są to już podstawy – wchodzisz na nowy poziom :D

Command Line

Wiersz poleceń to podstawa nowoczesnego frontendu. W konsoli tworzymy podstawę projektu, używamy różnych narzędzi, budujemy aplikacje czy tworzymy wersje projektu gotową na wydanie na świat. Absolutnie musisz się go nauczyć. Rekomendowane linki:

  1. Learn Enough Command Line to Be Dangerous
  2. Windows Command Line Tutorial
  3. The Bash Guide
  4. COMMAND LINE POWER USER

GIT

Podstawa pracy zespołowej w większości firm na rynku. GIT jest systemem kontroli wersji i dba, by praca wielu ludzi nad jednym kodem przebiegała bez problemu. Rekomendowane linki:

  1. Getting Git right, with tutorials, news and tips
  2. Learn Enough Git to Be Dangerous
  3. Advanced Git Tutorials
  4. Git book
  5. Learn Git Branching
  6. Git cheatsheet
  7. Kurs Gita

Zaawansowany JavaScript

Wracamy do JSa, tym razem w nieco innym wydaniu. Nowe rzeczy to:

  • Zrozumienie zaawansowanych koncepcji jak Hoisting, Scope itp.
  • ES6+

Warto poznać zaawansowane koncepcje i jak JS działa pod spodem. Pomoże ci to w zrozumieniu jak działają frameworki i biblioteki, pozwoli tworzyć lepszy i wydajniejszy kod i ogólnie poprawi twoje umiejętności JS. ES6 z drugiej strony to nowy standard, który staje się popularniejszy z każdym dniem. Jego nauka nie będzie czasem straconym. Opis niektórych zaawansowanych rzeczy, jak i ES6 znajdziecie również na moim blogu. Rekomendowane linki:

  1. Rozmowa kwalifikacyjna #08 – Pytania – JavaScript
  2. Od ES6 do ESNext – Nowości w ES6
  3. 23-part course that will give you a strong foundation
  4. ES6 for everyone
  5. es6 katas
  6. The Modern JavaScript Tutorial
  7. 15 JavaScript concepts that every (JavaScript) Programmer must know

Preprocessor CSS, np. SASS

Preprocessory CSS to narzędzia, które dają nam nowy, prostszy i lepszy sposób tworzenia styli, a później zamieniają go w zrozumiały dla przeglądarek CSS. Wszystko, aby uprościć nam zadanie. Rekomendowane linki:

  1. Sass Basics
  2. Learn Sass

Biblioteka CSS np. Bootstrap

Biblioteki często ułatwiają ci życie. Nie musisz samodzielnie tworzyć całego wyglądu, a po prostu używasz tego, co już ktoś dobrze zrobił. Wymaga to, co prawda nauki samej biblioteki, ale jednak efekty są tego warte. Rekomendowane linki:

  1. Learn Bootstrap 4 in 30 minutes by building a landing page website
  2. Learn Bootstrap 4 for free
  3. Detailed Bootstrap Tutorial for Beginners

NPM

NPM jest managerem pakietów dla Node.js. Na razie warto dowiedzieć się jak działa i co nam oferuje. Rekomendowane linki:

  1. npm Documentation
  2. A Beginner’s Guide to npm — the Node Package Manager
  3. Introduction to npm and basic npm commands

Czego się uczyć – nowoczesny frontend

Czas na ostatni etap – naukę nowoczesnego frontendu. Poniższe punkty pozwolą Ci lepiej zrozumieć, jak obecnie tworzy się aplikacje. Są też często wymagane do pracy jako frontend developer, więc warto poświęcić na nie czas.

Nauka frameworka lub biblioteki

React i Angular to dwie najpopularniejsze obecnie technologie do tworzenia aplikacji internetowych. Vue jest tuż za nimi. Każde z nich wymaga oddzielnej nauki, każde z nich działa też inaczej, jednak to na nie jest największe branie na rynku pracy, więc warto się ich uczyć. No i bardzo upraszczają tworzenie stron :) Rekomendowane linki:

  1. Tutorial: Intro to React
  2. The Beginner’s Guide to React
  3. React JS – React Enlightenment
  4. REACT JS TUTORIAL
  5. React Patterns
  6. 8 Key React Component Decisions
  7. React – Basic Theoretical Concepts
  8. Learn Vue.js – Full Course for Beginners

Nauka zarządzania stanem aplikacji np. Redux/Mobx

Od zawsze aplikacje miały problem z przechowywaniem danych, jednak pojawienie się bibliotek do zarządzania stanem aplikacji sprawiło, że tworzenie stron stało się jeszcze prostsze i przyjemne. Rekomendowane linki:

  1. State management in JavaScript
  2. Redux Tutorial
  3. MobX tutorial

Lintery i Formattery np. ESLint

Lintery i formattery pozwalają na sprawdzanie twojego kodu i poprawianie błędów oraz składni. Czasami, gdy wiele osób tworzy jeden kod, ciężko zachować jego ładny wygląd, jednak te narzędzia w tym pomagają. Rekomendowane linki:

  1. Getting Started with ESLint
  2. ECMAScript code beautifier/formatter
  3. JavaScript Standard Style

Task runnery np. Gulp

Task runnery pozwalają nam zautomatyzować wszystkie zadania i uruchamiać je tylko jedną komendą. Bardzo przydatne i bardzo często używane. Rekomendowane linki:

  1. Super simple Gulp tutorial
  2. Gulp for Beginners
  3. Gulp Quick Start

Bundlery np. Webpack

Bundlery pozwalają nam wziąć cały nasz projekt i stworzyć z tego parę małych paczek, gotowych do wysłania na serwer produkcyjny. Po drodze mogą zrobić również wiele rzeczy jak zamiana ES6 na JS, SASS na CSS, dodanie zdjęć czy zmiana konfiguracji. Również często wykorzystywane narzędzie. Rekomendowane linki:

  1. Webpack Getting Started
  2. Webpack Introduction

Node.js

Node.js jest to JS po stronie backendu. Dzięki niemu możemy na przykład tworzyć aplikacje, które działają po stronie serwera. Posiada również wiele bibliotek, pozwalających nam jeszcze bardziej rozbudować nasze aplikacje. Rekomendowane linki:

  1. Learn Node.js – Full Tutorial for Beginners
  2. The Art of Node
  3. Learn You The Node.js

Testowanie aplikacji

Testowanie wytworzonego kodu to bardzo ważny temat. Pozwala uniknąć wielu problemów oraz mieć pewność, że to, co teraz zrobiliśmy nie popsuło nic, co już istnieje. Niestety, nie spotkacie tego we wszystkich firmach, jednak nie martwcie się tym, tylko pisz testy, gdy tylko możesz. Rekomendowane linki:

  1. JavaScript Testing
  2. Introduction to Front End Testing
  3. Mocha
  4. Jest

Podsumowanie

Jak widzisz, nauka frontendu nie jest szybka. Jest długa i trudna, a ilość rzeczy do nauki przeraża. Właśnie dlatego nie wszyscy się do tego nadają. Frontendowcy uczą się całe życie, bo to, co widzisz na górze, to dopiero początek.

Jeżeli jednak cię to nie przeraża – ucz się, zostać frontendowcem i zdobądź wymarzony zawód :) A jeżeli masz jakieś pytania – daj znać w komentarzu!

 

10 sposobów na motywację do nauki programowania