Sorry, nie mogłam się powstrzymać z tym tytułem 😀
Jak wiecie na blogu ukazuje się sporo materiałów w temacie nauki (i nie tylko) Front-endu. Cały czas brakowało mi jednak takiego jednego spinającego wpisu. Kiedy ktoś mnie pyta: „No dobra, chcę być Front-end Developerem. Co mam ogarnąć?” – odpisuje mu listą artykułów na ten temat co najmniej na start. A chciałabym wysłać jeden jedyny artykuł, który wszystko Mu streści.
To będzie ten artykuł 🙂
Chcę być Front-end Developerem! Od czego zacząć?
Dlaczego? Czy na pewno wiesz, co ten Front-end oznacza? Czy to hasło zasłyszane na ulicy albo na jakiejś grupie? Czy naprawdę wiesz na co się piszesz? Zajrzyj do artykułu Frontend Developer – co to właściwie znaczy? (blog Na Frontendzie) Poznasz różne oblicza Front-endu.
Wbrew pozorom to całkiem spora dziedzina, która ostatnio zaczyna się coraz bardziej rozbijać i specjalizować… ale o tym jeszcze będę pisać. Ty jesteś na początku swojej drogi.
Ok. Wiesz co to jest Front-end i dalej chcesz się w to pakować. Dlaczego?
Poważnie. Odpowiedz sobie na to pytanie. Odpowiedź zapisz gdzieś na boku. Nie zgub. Będziesz do niej wracać często, gdy już zajdzie Ci za skórę.
Front-end jest uważany za obszar z niskim progiem wejścia. Zwłaszcza dla osób nietechnicznych.
Coś w tym jest. Jednak przyznam, że tak jak dwa lata temu rynek był mega chłonny i dużo osób zaczynało z podstawową wiedzą. Tak w ciągu ostatniego roku coraz częściej docierają do mnie informacje, że już wcale nie jest tak łatwo.
Z drugiej strony wiem, że na rynku nadal są poważne braki. Problem w tym, że tak jak ilość osób, która stara się o pracę poszła w górę, tak i wymagania.
Pod kątem pracy nie powiedziałabym, że nadal ma najniższy próg wejścia.
Pod kątem wymaganej wiedzy – pewnie nadal tak. Z tym, że na start może najniższy próg wejścia, ale potem zaczyna się jazda bez trzymanki. Frameworki, frameworki, frameworki… Ciekawe czy ktoś wymyślił już zawód “prognozer trendów w Frontendzie”? Trochę przypomina wróżenie z kryształowej kuli. A może tylko dla mnie 😉
Także, jeśli Twoja motywacja brzmi: nie znoszę tego, ale ma najniższy próg wejścia, byle się zaczepić i pójdę dalej – zastanów się dwa razy.
Ale jeśli Twoja motywacja brzmi: kocham to, kręci mnie to, uwielbiam albo przynajmniej: wydaje się to czymś idealnym dla mnie – jedziem dalej 🙂
Oczywiście wiadomo, że nie dowiesz się czy to to, jeśli nie spróbujesz.
Jeśli już od początku interesuje Cię nauka Front-endu pod kątem pracy w zawodzie – zajrzyj do artykułu: Junior Frontend Developer – analiza ofert pracy pod kątem stawianych wymagań. Przeanalizowałam tam trzy różne oferty pracy i pokusiłam się o pewne podsumowanie wymagań MUST HAVE, GOOD TO KNOW, NICE TO HAVE.
Tak czy inaczej, Twoją lekturą obowiązkową niech będą artykuły:
Kierunek: Web Developer – Wstęp do serii + Frontend (cz. I)
Kierunek: Web Developer – Front-end (cz. II)
Nigdy nie dotarłam z serią do etapu Back-endu czy DevOps. Nadal liczę, że będę ją kontynuować.
Pierwsza część to Twoje pierwsze kroki w kierunku Front-endu. Druga skupia się na JavaScript’cie. Tak, jest tego tak dużo, że JavaScript ma swój własny artykuł.
Więc jak w skrócie wygląda Twoja ścieżka?
Zaczynasz od HTML i CSS.
I teraz tak: mniej istotne czy zaczniesz je równolegle, czy najpierw poznasz HTML, a potem CSS (może tylko niekoniecznie na odwrót). Więcej, możesz zacząć nawet od JavaScript. Da się. Przy czym łatwiej jednak ogarnąć podstawy HTML i CSS przed JavaScriptem.
Duża paka materiałów do nauki HTML5 i CSS (swego czasu zrobiła furorę)
Ok. Masz podstawy HTML5 i CSS? Sięgnij po JavaScript.
Kiedy uznać, że jesteś już gotowy? Sięgnij po prostu po JavaScript. Jeśli poczujesz, że czegoś Ci brakuje, nie rozumiesz co masz wyciągnąć z HTML – wróć do niego. Zazwyczaj potrzebujesz dużo mniej czasu niż myślisz na naukę samego HTML i CSS. Nie mówię o zgłębianiu JavaScriptu, to już potrwa.
Potrzebujesz materiałów do nauki JavaScriptu? Duża paczka materiałów do nauki JavaScriptu
Tag: javascript
Przypominam również, że artykuł Kierunek: Web Developer – Front-end (cz. II) w dużej mierze skupia się właśnie wokół JavaScriptu.
JavaScript będzie też głównym tematem poruszanym na blogu w tym roku 😉 (zgodnie z wynikami ankiety, którą przeprowadzałam na blogu w grudniu)
jQuery
Tutaj dużo zależy. Warto go znać. Dużo osób niestety zbyt szybko przeskakuje od nauki JavaScriptu do nauki jQuery lub wręcz stara się pominąć JavaScript. Uczenie się jQuery przed JavaScript może boleć. Więcej, jQuery swój szczyt popularności już miało. Coraz więcej osób stara się go unikać, wraca do czystego JavaScriptu.
Sięgnij po jQuery, ale najpierw skup się na JavaScript’cie.
Co dalej?
Praktyka. Spróbuj zakodować swój pierwszy projekt. Tutaj polecę po raz wtóry grupę Weekly WebDev Challenge. Znajdziesz tam zadania dotyczące kodowania stron. Zarówno zadania, w których możesz wykorzystać jakieś frameworki (np. Bootstrap), jak i wyłącznie HTML5, CSS, JavaScript. Zapoznasz się również z pojęciami typu: Responsive Web Design (termin obowiązkowy 😉 ).
Jeśli szukasz jeszcze innych przydatnych grup w temacie Web Developmentu – zapraszam do wpisu: Lista pomocnych grup dla (przyszłych) programistów (Web) (który czeka niedługo aktualizacja).
No i oczywiście zapraszam do założonej przeze mnie Programowanie – wsparcie na starcie, która przekroczyła niedawno 10 tys. osób 😉 Znajdziesz tam dział FAQ z najczęściej zadawanymi pytaniami (głównie jak zacząć?), a także np. Narzędzia pomocne w tworzeniu stron/aplikacji webowych (na blogu też niedługo pojawi się obszerniejszy wpis w tym temacie).
HTML5. CSS. JavaScript. jQuery. Oto początek Twojej Front-endowej ścieżki. To podstawy.
Gdzie się ich uczyć? Odsyłałam Cię już wyżej do konkretnych materiałów polecanych przeze mnie, ale są również platformy, które posiadają całe ścieżki nauki pod kątem m.in. Front-endu. W przypadku rozwiązań bezpłatnych polecam platformy wymienione TUTAJ. Część z nich oferuje właśnie takie ścieżki nauki. Tutaj polecałabym zwrócić uwagę np. na Free Code Camp (dużo osób zachwala sobie tą formę nauki).
W przypadku rozwiązań płatnych mocno polecane są:
- CodeCademy PRO – niestety sama korzystałam tylko z wersji darmowej, nie mam zdania, ale możecie o nim poczytać np. u Joanny z Wake Up & Code: Czy warto wykupić dostęp do Codecademy Pro?
- Code School – który oferuje całkiem fajne kursy i ścieżki, m.in. HTML/CSS, JavaScript, Git; nawiasem, co jakiś czas oferują dostęp do tych kursów za darmo w formie tzw. Free Weekends – jak coś trąbię o nich wtedy na Fanpage’u 😉
- PluralSight – również oferuje ścieżki, przy okazji na start możesz zbadać tzw. Skill IQ – Twój poziom umiejętności na start.
Pamiętaj, że język to jedno. Programowanie to rozwiązywanie problemów. Warto ćwiczyć również tą umiejętność. Umiejętność logicznego myślenia, algorytmy.
Tutaj na pewno mogę polecić Hackerrank. Inną opcją może być CodeWars. Codility for Programmers. Empire of Code. Wplecenie grywalizacji w naukę programowania to całkiem fajna opcja 😉 Jeszcze będę o tym pisać (w bliżej nieokreślonej przyszłości).
Masz tylko 5 minut, a chcesz poćwiczyć? Skorzystaj z darmowej aplikacji Enki.
Czy HTML5, CSS3, JavaScript i jQuery to wszystko? Nie. Jeśli zastanawiasz się co dalej, ponownie przypominam o artykułach:
Kierunek: Web Developer – Wstęp do serii + Frontend (cz. I)
Kierunek: Web Developer – Front-end (cz. II)
Tak jak wspominałam, w tym roku (2018) na blogu skupiam się na JavaScript’cie. Także każdy z tematów z drugiej części powyższej serii zostanie prawdopodobnie rozwinięty, rozbudowany, opisany bardziej szczegółowo.
Co jeszcze mogłabym zaoferować na chwilę obecną?
Kiedy już poznasz podstawy, przyjdzie czas na frameworki. Na temat części z nich pisałam już na blogu:
Framework CSS: Bootstrap – ścieżka nauki
Frameworki/biblioteki JavaScriptowe:
Jeśli zainteresuje Cię temat Angulara – zajrzyj do serii dotyczącej tworzenia aplikacji webowej z wykorzystaniem tego frameworka. Zwłaszcza jej drugiego sezonu (pierwszy skupiał się na wprowadzeniach do technologii, z których korzystamy). Ciężko będzie Ci się wtedy obyć bez znajomości TypeScriptu (materiały do nauki).
A jeśli interesuje Cię temat tworzenia aplikacji webowych, ale od samego pomysłu do realizacji – zapraszam Cię do wpisu w tym temacie. Znajdziesz tam również Live, który prowadziłam na Fanpage’u bloga jakiś czas temu. Sporo w ogóle opowiadam o Front-endzie na swoich Live’ach, więc jak coś zapraszam – tutaj znajdziesz nagrania z spotkań, które już się odbyły (oraz inne informacje). Tematy Live’ów wybierają Czytelnicy bloga 😉
Jeśli interesuje Cię proces praktycznego tworzenia aplikacji webowych, prawie rok temu realizowałam jedną aplikację, raportując co tydzień postępy. Było to w ramach konkursu Daj się poznać. Założenia projektu, stos technologiczny znajdziesz w pierwszym wpisie kategorii „Daj się poznać”. Ta aplikacja to Social Media Planner – wszystkie informacje, w tym DEMO, znajdziesz na stronie jej poświęconej.
I na koniec: Spis wszystkich treści na blogu, w temacie polecam zwłaszcza kategorię Front-end.
Jeśli ilość wiedzy w tym artykule Cię przeraża (ew. w linkowanych artykułach), nie załamuj się. Masz określoną ścieżkę. Zacznij. Zajrzyj do niego za kilka miesięcy, pół roku. Z miesiąca na miesiąc będziesz wiedział więcej i więcej. Aż zacznie być oczywisty, wręcz banalny 😉
I jeszcze na deser: agregator polskich treści i blogów nt. Front-endu – Polski Frontend.
Korzystając z okazji:
13.02.2018 o godz. 21:00, odbędzie się Live w temacie nauki Front-endu. Ogólny temat brzmi: Kierunek: Front-end. Częściowo będzie to powtórzenie dzisiejszych treści, omówienie tej ścieżki.
Z chęcią odpowiem też na Twoje pytania. Przygotowałam w tym celu specjalny formularz:
Postaram się na nie odpowiedzieć w trakcie, na koniec lub już po samym Live’ie, w formie wpisu. Oczywiście w trakcie Live’a też będę odpowiadać na pytania. Jednak poznanie ich wcześniej pozwoli mi lepiej wpleść je w treść samego Live’a.
Zapraszam!
Więcej info o NetteCode Live (oraz poprzednie nagrania)
Wiesz czego się uczyć. Wiesz z czego możesz skorzystać w tym celu. Wiesz jak możesz urozmaicić sobie naukę. Masz jeszcze jakieś wymówki czy siadasz do nauki? 😀
Masz do mnie jakieś pytania w temacie nauki Front-endu?
P.S. Notatki z Live’a + video dostępne tutaj.
