Jak zostać Front-End Developerem? – Kurs front-end dla początkujących

Ostatnio mam wrażenie, że każdy chce programować 😀 Jeszcze nie wie w czym, nie wie jak zacząć, ale branża IT jest tym o czym aktualnie marzy. Dla wielu osób pierwszym krokiem do wejścia w ten obcy świat są właśnie stanowiska typu Webdeveloper czy Junior Front-End Developer czyli to podstawowe tworzenie stron www. Jednak zanim znajdzie się wymarzone stanowisko trzeba jakoś zacząć. Zapraszam na kompedium wiedzy dla początkujących, po garść odpowiedzi: Czy istnieje darmowy kurs front-end developer? Jak uczyć się samodzielnie online, gdzie szukać materiałów do nauki, by opanować HTML, CSS i JavaScript.

Kim jest front-end developer?

Wejście w branżę IT dla osób zupełnie nowych bywa trudne. Jest ogrom pojęć, które brzmią obco i stają się problematyczne już na etapie zapisu. Jak prawidłowo zapisać: front end developer czy jednak frontend developer? może front-end developer czy bardziej programista front-end engineer? Najpowszechniejszy zapis to jednak ten z myślnikiem, ale nie język polski jest tutaj najważniejszy.

Front-end developer to osoba odpowiedzialna za warstwę wizualną aplikacji (to co widzimy, my = użytkownicy strony).

Zazwyczaj front-end developer współpracuje z grafikiem (webdesignerem), który dostarcza projekt graficzny. Często front-end developer ma okazję współpracować z UX designerem, który proponuje i tworzy prototyp interakcji jakie będą zachodziły na stronie. Rolą front-end developer’a jest zebrać to w całość. Popularnie mówi się, że front-end developer ma za zadanie „pociąć projekt graficzny” chociaż mało to precyzyjne określenie – podzielić projekt na mniejsze części i zakodować (HTML i CSS) do postaci strony www, z której ostatecznie korzystają użytkowonicy.

Następnie za pomocą JavaScriptu są dodawane wspomniane wcześniej interakcje. O ile CSS3 pozwala nam na tworzenie płynnych przejść, podstawowych i zaawansowanych  animacji, to JavaScript wprowadza wszelkie zaawansowane interakcje strona – użytkownik. Za pomocą JavaScriptu dodamy rozwijane menu, slider na stronie, walidację formularzy, przejścia między podstronami czy zaawansowane animacje i gry 3D (np. za pomocą babylonjs).

Dane do logiki w JavaScripcie tej na frontendzie brane są z back-end’u aplikacji, stąd współpraca front-end – back-end developer.

Stanowiska typu front-end developer będą się mocno różnić od firmy. Inaczej będzie wyglądała praca front-end developer’a w agencji interaktywnej, kreatywnej, front end developer’a w firmie typu software house, a jeszcze inaczej osoby pracującej nad rozwojem start-up’u czy jednego produktu.

Front-end developer, który zaczyna od wdrażania projektów graficznych może rozwijać się w kierunku JavaScript Developera – programisty zajmującego się głównie pisaniem logiki aplikacji i zaawansowanymi operacjami w JavaScripcie. Dalej specjalizując się we frameworki takie jak React, Angular czy Vue. Ponadto front-end developer często (tak samo jak back-end developer) musi planować archintekturę js-ową aplikacji i świadomie dobierać frameworki i biblioteki do projektu.

Front-end: pierwsza praca

Mijają ponad 3 lata odkąd trafiłam na pierwszy staż. (W momencie, gdy dodaję poprawki mija 9 lat!)
Przestraszna wizją siebie na stanowisku stażysty webdevelopera, a później dalszego rozwoju na stanowisku Junior Front-end Developer.

Hmmm czy było warto się bać?

Nie.

Praca okazała się najlepszą nauczycielką. Szybko zaczęłam widzieć swoje braki, to czego do tej pory nie znałam – a można to było podsumować jako „wszystkiego”. Uzupełnianie wiedzy czy rozwiązywanie problemów przychodziło mi łatwiej niż w domu, bo musiałam na bieżąco się z nimi mierzyć mając przed sobą praktyczne przykłady.

Czy miałam w tym kierunku skończone drogie kursy, postawione własne portfolio i 10000 aplikacji za sobą? Nie.

Jeśli chcesz się nauczyć tworzyć strony internetowe nic cię nie ogranicza. Dużo materiałów dostępnych jest zupełnie za darmo – w języku polskim i po angielsku. Nie ma więc powodu, by nie spróbować, a satysfakcja z własnego kawałka kodu jest ogromna!

Dlaczego nauka Front-End’u?

1. Szybko widać efekt – w przeciwieństwie do nauki programowania / backendu, tworzenie kawałków kodu nawet w czystym HTML od razu daje nam efekty wizualne, a to motywuje do dalszej pracy.
2. Niski próg wejścia – na samym początku  potrzeba stosunkowo nie wiele umiejętności, by zacząć karierę zawodową na stażu czy stanowisku juniorskim.
3. Dużo ofert pracy dla juniorów – zwłaszcza, gdy zbliżają się wakacje pojawia się sporo ofert wakacyjnych staży.
4. Niezależność – możemy zająć się stworzeniem strony internetowej dla siebie, a później łapać zlecenia jako freelancer. W końcu w podstawowym zakresie powinniśmy umieć postawić prostą stronę www od A do Z.

W każdym razie, nauka podstaw pozwalających na zadowalający poziom, by zacząć karierę zawodową, powinna Ci zająć od kilku do kilkunastu tygodni. Jeśli nie masz codziennie np. 5 godzin, a jedynie kilka godzin w weekendy to minimum pół roku się przyda. Zapewnisz sobie swój własny kurs front-end developer’a.

I tak, to naprawdę dość, by porządnie podejść do tematu.

Ile kosztuje kurs front-end developer’a?

Nic. Poza twoim czasem.

Darmowych materiałów jest więcej niż wystarczająco, by dobrze poznać podstawy. Będziesz wstanie tworzyć własne strony www, proste aplikacje czy gry.

Czego się nauczyć?

Oto przepis na sukces. Do stworzenia strony www potrzebujesz:

• HTML + CSS
  Są to podstawowe składniki do budowy stron internetowych. HTML udostępnia strukturę witryn internetowych – opisywane elementy, a CSS informuje przeglądarkę, jak te elementy powinny wyglądać. Gdy opanujesz HTML i CSS, możesz odtworzyć dowolny projekt (graficzny) i zmienić go w stronę WWW.
• JavaScript
  Język programowania do tworzenia stron internetowych. Dzięki JavaScript dodajesz interaktywność swojej witrynie, tj. rozwijasz strony www reagujące na działania użytkownika. Możesz nawet zbudować gry. Polecam opanowanie przynajmniej podstawowego kodu JavaScript, aby zrozumieć sposób działania języka czy logikę programowania. Następnie można przejść do jQuery.
• jQuery
  Technicznie nie jest to język, ale biblioteka JavaScriptowa. Jakby pośrednik, który pozwala zapisywać JavaSript prościej i szybciej. Podajesz kod w jQuery, biblioteka martwi się za ciebie i bawi w tłumacza, by przekazać sens na nieco skomplikowany JavaScript do przeglądarki. Mimo, że dziś jQuery jest „trochę stary” polecam jego naukę „pod zlecenia”, ułatwia przyswojenie logiki programowania, korzysta z niego Bootstrap (framework css) i nadal przewija się w ofertach pracy.
  Obecnie nauka jQuery nie ma już praktycznie żadnego sensu, chyba że pracujecie w projekcie legacy i wówczas nauczą was w pracy 😉
• Frameworki CSS i Frameworki JS
  Ich zadaniem jest uproszczenie procesu tworzenia strony www, aplikacji poprzez udostępnianie gotowych rozwiązań najczęściej spotykanych problemów. Dodatkowo dają wzorzec jak w sposób uprzątkowany rozwijać swój kod. Na początek proponuję wybrać jeden framework CSS np. Bootstrap (inne opcje to: Tailwind, Fundation, Pure), a następnie dodać do tego, któryś z współcześnie popularnych frameworków JavaScript: Angular , ReactS, Vue.js, Svelte, Ember.js, Meteor.js.
• poza kolejką : Git
  A nawet im szybciej tym lepiej. Nie jest bezpośrednio związany z kodowaniem, przez co zdaję sobie sprawę często jest odkładany na samiutki koniec – niesłusznie im szybciej zaczniesz korzystać z Git’a, czyli systemu kontroli wersji, tym lepiej. Czym jest i jak nauczyć się korzystać z Gita pisałam tutaj:  kurs git dla początkujących.

To jest proponowanaprzeze mnie kolejność, oczywiście możesz to zrobić zupełnie inaczej: pominąć JavaScript, nauczyć się Bootstrap’a zaraz po opanowaniu podstaw HTML i CSS (jednak odradzam tego, by aż za bardzo nie iść w upraszczanie i odcinanie się od poszukawnia rozwiązań napisanych samodzielnie, a nie użytych gotowców z frameworka) czy nauczyć się frameworków Js’owych ledwo potrafiąc linijkę w czystym Javascripcie. Możesz, nic nie musisz, to twój własny kurs na front-end developer’a.

Twój domowy, darmowy kurs front-end developer:

Rady na start:

Ucz się regularnie, a każdą nową umiejętność staraj się stosować w praktyce, nawet w maleńkich fragmentach kodu mających tylko jeden cel – pokazać co właśnie udało Ci się opanować. Udostępnij je w sieci.

Ogranicz grupy motywujące na facebooku. Grupy są super, wiem. Tylko, że po 3 godzinach czytania motywujących historii bardzo często nie jesteś 3 razy bardziej zmotywowana. Zazwyczaj za to masz o 3 godziny mniej na własną naukę.

Obserwuj rynek, czytaj wymagania w ofertach pracy. One się zmieniają! Piszę tego posta dzisiaj i pewnie za rok będę musiała dokonać update, gdyż technologia się zmienia. Po opanowaniu podstaw: HTML / CSS / JavaScript na pewno coś nowego będzie trendy – aktualizuj swoją listę „do nauczenia się”.

Szukaj darmowych warsztatów (by się nauczyć od mentorów i przy okazji nawiązać ciekawe znajomości) oraz stażu w branży najszybciej jak się da. Praca okaże się najlepszą nauczycielką.

Kurs front-end: gdzie się uczyć kodowania?

Uwaga – polecam tylko te kursy, które spróbowałam. Jeśli znasz inne ciekawe źródła podziel się nimi w komentarzu 🙂

HTML + CSS

Po polsku: How2HTML Kurs HTML5 i The Awwwesomes

Oba tutoriale są tekstowe i w całości po polsku. How2HTML przedstawia najważniejsze zagadnienia związane ze strukturą HTML5. Porusza kwestie tworzenia strony www i tematy pojawiające się w około – więc przeczytacie trochę o podziale front-end backend, czym jest HTTP czy SEO. Dawka wiedzy jest duża i dobrze poukładana, mniej o samym CSS, a więcej o tym jak prawidłowo pisać kod.

Jeśli chcecie krok po kroku przejść z tutorialem postawienie własnej strony www. Jeśli chcecie kawałki kodu kopiować i widzieć efekt to warto sprawdzić kurs The Awwwesomes. Podczas stawiania strony przyswoicie sporą dawkę wiedzy (proponowany czas to 9 x 2 godz., ze spokojem może zając dwa razy więcej i nie ma co panikować).

Khan Academy, Codecademy i inne

Trzy, chyba najbardziej znane strony z kursami interaktywnymi. Bezpłatne, dobrze zorganizowane, bardzo przystępnie przekazują wiedzę dla początkujących. Interaktywne kursy odbywają się w przeglądarce, nie musimy nic instalować u siebie po prostu robimy kurs i od razu są mierzone nasze postępy.

Khan Academy ma całkowicie bezpłatne materiały, a do tego ma wersję po polsku (yay yay yay!). To platforma edukacyjna nie tylko dotycząca kodzenia. Możecie przejść cykl zadań od podstawowych elementów, po bardziej zaawansowane tworzenie skryptów w JavaScript.

Codecademy dużo materiałów za darmo i sporo ciekawych gotowych ścieżek rozwoju, które są dostępne tylko dla użytkowników pro (yay, ale nie tak yay). Poniżej przykładowe darmowe kursy:

Inne ciekawe platformy mające też część materiałów za darmo to: Pluralsight, TeamTreehouse, Udacity czy edX

Jak wybrać kurs front-end do przejścia?

Zobacz różne platformy.  Tematy na siebie nachodzą, ale warto przejść niektóre tematy w wersji zdupliowanej. Po pierwsze powtarzanie utrwala wiedzę, a po drugie każda z tych platform ma trochę inne podejście do nauczania. Wybór należy do ciebie.

Ooo matko i córko, dużo tych materiałów, a to dopiero początek.

Tyle ludzi chce płacić za miesięczny bootcamp czy kurs front-end developer’a, jak ma wszystko za darmo w zasięgu ręki.

Nic dziwnego.

Najgorsze jest to, że materiałów mamy dużo, a chcemy nauczyć się wszystkiego co potrzeba, szybko, bez sprawdzania czy wybierania – po prostu dostać wszystko na tacy i przejść już krok dalej, poza materiały podstawowe.

Rozumiem, dlatego, jeśli jednak nie masz czasu na wszystkie kursy, a podejmowanie decyzji nie jest twoją mocną stroną to sięgnij po Khan Academy: Wstęp do HTML/CSS – Tworzenie stron internetowych.

JavaScript

Czym byłby nasz kurs Front-End Developer’a bez sięgnięcia po JavaScript?

Powyższe interaktywne strony są super. Mają dla nas kursy Js – przyjemne, proste, niestety niezbyt kompleksowe, ale dobre na rozgrzewkę. Jeśli masz już jako takie podstawy HTML i CSS, nie musisz zaczynać od wcześniejszych propozycji.

Na początek 9 krótkich zadań z Wstęp: JavaScript, możesz rozbudować te same zagadnienia z Udacity: JavaScript Intro, a potem (lub od razu) przejdź do większej paczki zadań: HTML/JS: Tworzenie interaktywnych stron internetowych.

jQuery – tylko jeśli bardzo potrzebujesz np. do pracy

Kolejny krok na naszej ścieżce, ale mocno opcjonalny. Obecnie kurs front-end developer’a obejdzie się bez jQuery. Zwłaszcza, że dzisiaj jest wiele nowych eksyctujących wyborów dla frontendowców.

Tak, Khan Academy and Codecademy, mają kursy jQuery. Jednak w tym wypadku chcę polecić – godzinny i całkowicie darmowy kurs Try jQuery Pluralsight (dawne Code School).

Frameworki CSS

Na tym etapie jesteś już wstanie samodzielnie wybierać materiały i oceniać ich przydatność do twojej wiedzy.

Jeśli chodzi o framework Bootstrap tworzenie strony www opiera się o siatkę składającą się z 12 kolumn i ta wiedza, jest bazową, by resztę zrozumieć w praktyce. Bootstrap umożliwia szybkie tworzenie responsywnych stron (RWD) – czyli takich, które są przystosowane na urządzenia mobilne. O co chodzi z tym Bootstrapem zobaczysz w mniej niż 15min w tym filmiku, a o każdym elemencie możesz przeczytać z dokumntacji Get Bootstrap.

Jeśli preferujesz naukę w formie tutoriala, to na CodeCademy jest dostępny kurs Make a Website: Bootstrap, a z DailyWeb stworzysz swój pierszy bootstrap slider w 30 min.

Framworki JavaScript

Obecnie porządny kurs front-end na pewno powinen wprowadzać współczesnie używane frameworki Js, a prznajmniej jednego uczyć 😉

Interaktywne kursy z frameworkami znajdziecie na Pluralsight (dawne Code School), który na 14 dni jest darmowy (zawsze coś!).

Bardzo bogaty zbiór darmowych materiałów znajdziecie na scotch.io.

Darmowy kurs Vue.js ma na swoim kanale Hello Roman.

Z drugiej strony wypisywanie, gdzie znajdziecie darmowe kursy każdego frameworka to temat na osobny post 🙂

Jest ich dużo, wybór trudny, a poznanie wszystkich niemożliwe. Niezależnie, który wybierzesz na początek po prostu się go trzymaj. Nie skacz z kwiatka, na kwiatek, bo ktoś Ci po tygodniu nauki powie, że inny jest lepszy. Naucz się pierwszego, napisz w nim prostą aplikację. Zazwyczaj na start polecane są aplikacje typu: planner, to-do lista, rank news. Wystarczy nazwa frameworka + nazwa aplikacji jaką chcemy stworzyć.

Przykładowe darmowe kursy:

• Learn Angular from Scratch
• Hacking with React
• Vue.js – podstawy po polsku z kanału YT Hello Roman
• Vue.js
• Ember.js i jego dokumentacja

Czy to koniec? Zdecydowanie nie! To bardzo dobry początek i mocne podstawy dla Junior Front-End Developera.

Co dalej po tych kursach?

Zacznij od pracy nad własnymi projektami. Tak, jak pisałam na początku, od pierwszych kroków dokumentuj swoją pracę. Wrzucaj kod na githuba, nawet jeśli daleko mu do ideału (jeszcze).

Chcesz się sprawdzić?

Najlepszym sposobem na utrwalenie tego, czego się nauczyło to praktyka. Przejście przez kurs front-end’u to jedno, ale dopiero praca nad  własnymi projektami uczy kodowania – samodzielnego rozwiązywania napotykanych problemów.

Utwórz formularz (landing page), przez który można wysłać maila do autora strony. Stwórz własną stronę wizytówkę – portfolio. Pomyśl o napisaniu za pomocą JavaScriptu wypełnania tabeli ciągiem Fibbonaciego, własny slider czy prostą grę od podstaw.

Wydaje Ci się, że masz już umiejętności kodowania, ale nie masz zdolności graficznych, więc wszystko co robisz jest „brzydkie”? Nie ma sprawy! Wybierz gotowy projekt graficzny np. z Weekly Dev Challange i spróbuj go zakodzić.

przykładowe zadanie Weekly Dev challange

Jak długo zajmuje nauka podstaw?

To zależy od ciebie. Najważniejsza jest dyscyplina. Dla większości osób trudność sprawia nie tyle nauka programowania, co poświęcenie czasu na kursy, które nic nie kosztowały.

Opanowanie podstaw wystarczających do postawienia pierwszej strony www może zająć Ci około 1-3 mies w zależności od tego jak ambitnie podejdziesz do tematu. Dla opanowania Js dodałabym kolejne 3 miesiące wytrwałej nauki. Zakładam, że pracujesz, więc na naukę poświęcisz ok. 5-10 godzin w tygodniu czyli przynajmniej 1 godzinę dziennie.

W pół roku nie zostaniesz specjalistą, ale to wystarczająco dużo czasu, by stworzyć bazę do dalszej nauki.

Szukaj pomocy

Nie raz w trakcie nauki będziesz mieć problemy: Jak wypośrodkować element? Czemu ten skrypt nie działa? CSS inaczej wygląda na Chromie, a inaczej na Firefox’ie? To normalne, ale kto pyta nie błądzi.

• Google – pytaj wujka Google, najlepiej po angielsku.
• Stack Overflow – prawdopodnie jako pierwsze wyniki wyskoczą odpowiedzi ze strony StackOverflow. To portal dla developerów, gdzie użytkownicy publikują pytania związane z programowaniem, a inni (zazwyczaj bardziej doświadczeni programiści) próbują dać odpowiedzieć. Najlepszym rozwiązaniom dawne są punkt, a autor pytania, może oznaczyć komentarz, który rozwiązał jego problem. Rozwiązań czasem jest kilka-kilkanaście, dlatego warto czytać wszystkie i sprawdzać u siebie. Jeśli, któreś z rozwiązań pomogło i Tobie, zagłosuj – daj mu strzałkę w górę 😉
• Facebook – grupy na fb dla początkujących mogą Ci sporo pomóc, zwłaszcza, gdy już naprawdę nie wiesz jak zapytać o swój problem. Wrzuć screena i swój kod. Nie oczekuj, że ktoś napisze to za Ciebie, ale komentarze na pewno naprowadzą Cię na dobrą drogę. Niestety przy banalnie prostych pytaniach zawsze znajdą się osoby, które napiszą coś niemiłego – trudno, uzbrój się w cierpliwość.
  Osobiście polecam grupę Programowanie – wparcie na starcie najlepsza do zadawania pytań związanych z początkami, a moderatorzy pilnują, by nie było hejtu.
• CanIUse – jeśli twój problem dotyczy niedziałającego CSS na jednej z przeglądarek koniecznie sprawdź, czy to czego używasz jest wsprane dla wersji, którą sprawdzasz, w ten sposób unikniesz długich i żmudnych poszukiwań problemu widmo.

Własny kurs front-end?

Jak widzisz, by nauczyć się kodowania nie potrzeba wydawać kilku tysięcy na drogi kurs front-end’u. Można to zrobić skutecznie samodzielnie i za darmo. Najgorsza jest jednak nasza wytrwałość, zdyscyplinowanie i skoncentrowanie na realizacji planu.

Tak mógłby wyglądać twój własny, domowy i darmowy kurs front-end online (wybierz z listy):

Na naukę potrzebujesz około:

To była duża dawka informacji. Jeśli udało Ci się doczytać do końca dziękuję!
Zostaw jeszcze po sobie ślad. Jak Ci się podobał post? Będzie miło jak dasz znać czy pisać więcej w tym typie postów. Może jakiś temat pominęłam, a chcesz o nim przeczytać? Może polecisz komuś znajomemu, kto też planuje się przebranżowić?