Jak zostać Front-End Developerem? – wszystkie informacje 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. 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.

Co tak naprawdę potrzebujesz do pierwszej pracy?

Mijają ponad 3 lata odkąd trafiłam na pierwszy staż. 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 jedyni 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” gorąco polecam jego naukę „pod zlecenia”, ułatwia przyswojenie logiki programowania, korzysta z niego Bootstrap (framework css) i nadal przewija się w ofertach pracy.
  • Frameworki
    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: Fundation, Pure, Yaml CSS), a następnie dodać do tego, któryś z współcześnie popularnych frameworków JavaScript: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
  • poza kolejką : Git
    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: Git dla początkujących – ucz się interaktywnie.

To jest proponowanaprzeze mnie kolejność, oczywiście możesz to zrobić zupełnie inaczej: pominąć jQuery, 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.

Domowy, darmowy kurs front-end developer’a:

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ą.

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.

Kurs HTML5 front-end

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ć).

kurs front-end: tworzenie strony internetowej

Khan Academy, Codecademy i CodeSchool

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.

kurs front-end: podstawy

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:

kurs front-end: HTML i CSS

Code School – moim zdaniem najlepiej zorganizowane kursy. Składają się z filmików wideo + interaktywnej części z zadaniami. Pierwszy poziom każdego kursu jest darmowy, reszta niestety płatna. Jednak nawet dla samych tych darmowych cześci (zwykle ok. 1godzinnych) naprawdę warto tam zajrzeć.

kurs front-end: ścieżki

Jak wybrać kurs do przejścia?

Zobacz wszystkie trzy 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

Kolejny krok na naszej ścieżce. Niby mógłby istnieć kurs front-end developer’a bez jQuery. Zwłaszcza, że dzisiaj jest wiele nowych eksyctujących framworków Js, jednak przejrzałam oferty pracy i póki co nie można go pominąć.

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

kurs front-end: jQuery

Nauka frameworków

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 praniu”. 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 Js

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 Code School, poziom 1 jest darmowy (zawsze coś!). Bardzo bogaty zbiór darmowych materiałów znajdziecie na scotch.io.

kurs Vue.js

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:

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.

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ć.

kurs front-end challange

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 + 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.

PODSUMOWANIE:

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, a może jakiś temat pominęłam, a chcesz o nim przeczytać? Może polecisz komuś znajomemu, kto też planuje się przebranżowić?