We współczesnym świecie coraz więcej osób chce nauczyć się programować, natomiast nie wie od czego zacząć, ale jednocześnie branża IT jest tym, o czym marzą, ponieważ bycie programistą internetowym jest teraz modne. Dla wielu osób, to pozycje pierwszy krok do tego cudownego świata, takie jak programiści stron internetowych lub junior front-end developerzy, podstawowy front-end development. Jednak zanim znajdziesz swoją wymarzoną pracę, musisz gdzieś zacząć. Oto książka wiedzy dla początkujących, aby uzyskać kilka odpowiedzi: Czy istnieje darmowy kurs dla front-end developerów? Jak uczyć się samodzielnie online, gdzie znaleźć materiały do nauki opanowania HTML, CSS i JavaScript. Jeśli znasz HTML i CSS, możesz już ubiegać się o stanowisko projektanta układów stron internetowych.
Jakie są podstawy front-end developmentu?
Wejście w świat programowania stron internetowych może być trudne dla zupełnie nowych osób. Tak wiele pojęć brzmi dziwnie i staje się problematyczne na etapie pisania. Jak napisać: software developer czy front-end developer? Może front-end developer, a może raczej front-end software engineer? Jednak najczęściej spotykany jest zapis z myślnikiem. Front-end developer- osoba odpowiedzialna za wizualną część aplikacji (to co widzimy, my = użytkownicy strony).
Zazwyczaj front-end developer współpracuje z grafikiem (web designerem), który zapewnia projekt graficzny. Często front-end developerzy mają możliwość współpracy z projektantem UX, który proponuje i tworzy prototyp interakcji, które będą miały miejsce na stronach internetowych. Rolą front-end developerów jest złożenie tego wszystkiego w całość. Popularnie mówi się, że zadaniem front-end developera jest pocięcie projektu graficznego - podzielenie go na mniejsze części i zakodowanie (HTML i CSS) w strony internetowe, z których ostatecznie korzystają użytkownicy.
Następnie, za pomocą JavaScript, dodaje się wspomniane wcześniej interakcje. Podczas gdy HTML i CSS3 pozwalają nam tworzyć płynne przejścia i podstawowe animacje, JavaScript wprowadza wszystkie zaawansowane interakcje strona-użytkownik. Za pomocą JavaScript dodamy m.in. rozwijane menu, slider na stronie, walidację formularzy, przejścia między podstronami czy zaawansowane animacje oraz gry 3D (np. z wykorzystaniem Babylon-JavaScript). Dane do logiki w JavaScript z back-endu aplikacji, stąd współpraca front-end-back-end developer.
Stanowiska front-end developera będą bardzo zróżnicowane. Inaczej będzie wyglądać praca front-end developera w agencji interaktywnej i kreatywnej, inaczej front-end developera w firmie typu software development house, a inaczej praca osoby zajmującej się front-end developmentem w start-upie.
Front-end developer od cięcia projektów graficznych może rozwijać się w kierunku JavaScript Developera - programisty internetowego zajmującego się głównie pisaniem logiki aplikacji i zaawansowanymi operacjami JavaScript. Dodatkowo, front-end developer często (podobnie jak back-end developer) musi zaplanować architekturę JavaScript aplikacji i świadomie wybrać frameworki i biblioteki dla projektu.
Czy rozwój frontendu jest łatwy?
- Efekt widać szybko; w przeciwieństwie do nauki web developmentu/back-end developmentu, tworzenie kawałków kodu nawet w czystym HTML-u od razu daje nam efekty wizualne, co motywuje do dalszej pracy.
- Niski próg wejścia - stosunkowo niewiele umiejętności front-endowych jest wymaganych, aby na samym początku rozpocząć karierę zawodową na stażu lub stanowisku juniorskim.
- Dużo ofert pracy dla juniorów-szczególnie gdy zbliżają się wakacje, a letnich staży jest dużo.
- Samodzielność- możemy sami zająć się tworzeniem stron internetowych, a potem łapać zlecenia jako freelancer. Przecież w podstawowym zakresie powinniśmy umieć założyć proste strony internetowe od A do Z.
Co jest nam potrzebne do front-end developmentu?
Oto przepis na sukces. Aby stworzyć stronę internetową, potrzebujesz:
HTML + CSS
Są to podstawowe składniki do budowy strony internetowej. HTML zapewnia strukturę strony - opisane elementy, a CSS mówi przeglądarce jak te elementy powinny wyglądać. Gdy opanujesz HTML i CSS, możesz odtworzyć dowolny projekt (graficzny) i zamienić go w stronę internetową.
JavaScript
Język programowania webowego typu front-end służący do tworzenia stron internetowych. Dzięki JavaScriptowi dodajesz do swojej strony interaktywność, czyli tworzysz strony, które reagują na działania użytkownika. Możesz nawet budować gry. Zalecamy opanowanie przynajmniej podstawowego kodu JavaScript, aby zrozumieć, jak działa ten język lub logika języka programowania internetowego. Następnie możesz przejść do jQuery.
jQuery
Technicznie rzecz biorąc, nie jest to język, ale biblioteka JavaScript. Jak pośrednik, który pozwala ci pisać JavaScript łatwiej i szybciej. Wprowadzasz kod jQuery; biblioteka martwi się o ciebie i bawi się w tłumacza, aby przekazać znaczenie nieco skomplikowanego JavaScriptu do przeglądarki. Choć dziś jQuery jest "trochę stary", polecamy uczyć się go "na zamówienie" ułatwia naukę logiki programowania stron internetowych i Bootstrapa (wykorzystywany framework CSS) i wciąż pojawia się w ofertach pracy.
Frameworki
Ich zadaniem jest uproszczenie procesu tworzenia stron internetowych i aplikacji poprzez dostarczenie gotowych rozwiązań najczęściej występujących problemów. Dodatkowo dostarczają wzorca, jak w uporządkowany sposób rozwijać swój kod. Na początek proponujemy wybrać jeden framework CSS, np. Bootstrap (inne opcje to: Foundation, Pure, YAML CSS), a następnie dodać jeden z popularnych obecnie frameworków JavaScript: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Nie jest to bezpośrednio związane z kodowaniem stron internetowych, które jak rozumiemy często jest odkładane na sam koniec. Błędnie, im szybciej zaczniesz używać Git, czyli systemu kontroli wersji, tym lepiej.Taką kolejność zaproponowaliśmy. Oczywiście można to zrobić zupełnie inaczej: pominąć jQuery i nauczyć się Bootstrapa zaraz po opanowaniu podstaw HTML-a i CSS-a; radzimy jednak nie iść zbyt daleko w uproszczeniach i odciąć się od szukania rozwiązań pisanych ręcznie, a nie używanych prefabrykatów z jakiegoś frameworka czy uczyć się frameworków JavaScript z ledwością zdobywając linijkę w czystym JavaScripcie.
Od czego zacząć przygodę z front-end developmentem?
Ucz się regularnie i staraj się stosować każdą nową umiejętność w praktyce, nawet w malutkich kawałkach kodu, które mają tylko jeden cel - pokazać, co właśnie opanowałeś. Dziel się nimi w sieci. Ogranicz grupy motywacyjne na Facebooku. Po zaledwie 3 godzinach czytania motywacyjnych opowieści, często nie jesteś 3 razy bardziej zmotywowany. Zwykle masz 3 godziny mniej na naukę.
Obserwuj rynek i czytaj wymagania w ofertach pracy. One się zmieniają! Piszemy ten post dzisiaj i pewnie za rok trzeba będzie go zaktualizować, bo technologia się zmienia. Kiedy już opanujesz podstawy: HTML CSS JavaScript, coś nowego na pewno będzie trendy - aktualizuj swoją listę "do nauczenia". Szukaj darmowych warsztatów (by uczyć się od mentorów i jednocześnie nawiązywać ciekawe kontakty) i stażu branżowego jak najszybciej. Praca okaże się najlepszym nauczycielem.
Co to jest front-end development przykład?
HTML + CSS
Trzy to chyba najbardziej znane strony z interaktywnymi kursami web front-end development. Darmowe, dobrze zorganizowane, bardzo łatwo przekazują wiedzę początkującym. Prowadzą interaktywne kursy w przeglądarce. Nie musimy nic instalować w domu, po prostu robimy kurs, a nasze postępy są mierzone natychmiast.
Khan Academy, Codecademy i Homeschool
Khan Academy posiada całkowicie darmowe materiały, a także możliwość korzystania z innych języków internetowych. Jest to platforma edukacyjna, nie tylko o tworzeniu stron internetowych. Możesz przejść przez różne zadania, od podstawowych elementów, w tym HTML i CSS, do bardziej zaawansowanych skryptów JavaScript.
Codecademy ma wiele darmowych rzeczy i ciekawe prefabrykowane ścieżki rozwoju front-end, które są dostępne tylko dla profesjonalnych użytkowników.
Code School - naszym zdaniem najbardziej zorganizowany kurs. Składają się z filmów + części interaktywnej z zadaniami z zakresu front-end developmentu. Pierwszy poziom każdego kursu jest darmowy, za resztę niestety trzeba zapłacić. Jednak nawet te darmowe części (zwykle około 1 godziny) są warte obejrzenia.
Jak wybrać kurs, w którym warto wziąć udział?
Zobacz wszystkie trzy platformy internetowe. Tematy się pokrywają, ale warto przejść przez kilka zdublowanych tematów. Po pierwsze powtórka utrwala wiedzę, a po drugie każda platforma front-endowa ma nieco inne podejście do nauczania. Wybór należy do Ciebie. Tak wiele osób chce płacić za miesięczny Bootcamp czy kurs web developmentu, bo wszystko mają za darmo na wyciągnięcie ręki. Nic w tym dziwnego.
Najgorsze jest to, że my mamy wiele materiałów i chcemy nauczyć się wszystkiego, czego potrzebujemy szybko, bez sprawdzania i wybierania - dostać wszystko na tacy i wyjść o krok dalej poza podstawowe materiały. Dlatego rozumiemy, że jeśli nie masz czasu na wszystkie kursy front-endowe, a podejmowanie decyzji nie jest Twoją mocną stroną, sprawdź Khan Academy: Wprowadzenie do HTML CSS-Web Development.
JavaScript
Czym byłby nasz kurs rozwoju front-endu bez użycia JavaScript? Powyższe interaktywne strony są świetne. Mają dla nas kursy JavaScript - ładne, proste, niestety niezbyt obszerne, ale dobre na rozgrzewkę. Jeśli masz już jako takie podstawy HTML i CSS, nie musisz zaczynać od poprzednich propozycji.
Aby zacząć od 9 krótkich ćwiczeń rozwojowych we wstępie: przez JavaScript, możesz oprzeć się na tych samych tematach w Udacity: JavaScript Intro, a następnie (lub od razu) przejść do większego zestawu zadań: HTML / JavaScript: Tworzenie interaktywnych stron internetowych.
jQuery
Jeszcze jeden krok na naszej front-endowej drodze, ale niezwykle opcjonalny. Obecnie kurs rozwoju front-end może obejść się bez jQuery. Zwłaszcza, że dziś jest wiele nowych, ekscytujących opcji dla front-end developerów, przejrzeliśmy oferty pracy i nadal warto mieć ją w zapasie.
Tak, Khan Academy i Codecademy mają kursy jQuery. Jednak w tym przypadku chciałbym polecić - godzinny i całkowicie darmowy kurs jQuery Pluralsight (dawniej Code School) dotyczący rozwoju front-end.
Nauka frameworków
Na tym etapie możesz sam wybrać materiały front-endowe i ocenić ich przydatność do swojej wiedzy. Jeśli chodzi o framework Bootstrap, to budowanie strony internetowej opiera się na 12-kolumnowej siatce, a ta wiedza jest fundamentalna dla zrozumienia reszty w praktyce. Bootstrap pozwala na szybkie tworzenie stron responsywnych (RWD) - czyli dostosowanych do urządzeń mobilnych. Jeśli wolisz naukę w formie tutoriala: Kurs bootstrap jest dostępny w Code academy, a z Daily Web stworzysz swój pierwszy bootstrapowy slider w 30 minut.
Frameworki JavaScript
Obecnie porządny kurs front-end developmentu z pewnością powinien przedstawiać aktualnie używane frameworki JavaScript i przynajmniej uczyć jednego. Na Pluralsight (dawniej Code School) znajdziesz interaktywne kursy z frameworków, które są darmowe przez 14 dni. Bardzo bogaty zbiór darmowych materiałów znajdziesz na scotch.io. Natomiast wypisanie, gdzie znajdziesz darmowe kursy front-end developmentu dla poszczególnych frameworków to temat na osobny post.
Jest ich bowiem bardzo dużo. Wybór jest trudny, a poznanie ich wszystkich niemożliwe. Niezależnie od tego, który wybierzesz na początek, po prostu się go trzymaj. Nie skacz z kwiatka na kwiatek, bo po tygodniu nauki web developmentu; ktoś powie Ci, że inny jest lepszy. Naucz się pierwszego i napisz na nim prostą aplikację internetową. Zazwyczaj na początek polecane są aplikacje takie jak planery, listy rzeczy do zrobienia czy rankingi wiadomości. Wszystko czego potrzebujesz to nazwa frameworka i nazwa aplikacji internetowej, którą chcesz stworzyć.
Przykłady darmowych kursów:
- AngularJS
- Angular 2+ (obecnie 6- ale 4/5 to po prostu kolejna wersja front-end development)
- ReactJS
- Vue.js
- Ember.js
Czy to już koniec? Nie!!! To doskonały początek i solidne podstawy dla Junior Front-End Developera.
Co dalej po tych kursach?
Zacznij od pracy nad swoimi projektami internetowymi. Tak jak pisaliśmy na początku, dokumentuj swoją pracę już od pierwszych kroków front-end developmentu i umieszczaj kod na GitHubie, nawet jeśli jest on daleki od ideału.
Czy chcesz się przetestować?
Najlepszym sposobem na utrwalenie tego, czego się nauczyłeś, jest praktyka. Przejście przez kurs front-endu to jedno, ale dopiero praca nad projektami webowymi uczy Cię kodowania - samodzielnego rozwiązywania problemów. Stwórz formularz (landing page), przez który można wysłać e-mail do autora strony.
Stwórz stronę wizytówkę - portfolio - pomyśl o wykorzystaniu JavaScript do wypełnienia tabeli ciągiem Fibonacciego, swoim sliderem, czy prostą grą od podstaw. Myślisz, że posiadasz już umiejętności kodowania, ale nie masz umiejętności graficznych, więc opracowanie, które wykonujesz jest "brzydkie"? Nie ma za co! Wybierz gotowy projekt graficzny, np. z Weekly Dev Challenge i spróbuj go stworzyć.
Jak długo trwa nauka podstaw?
To zależy od Ciebie. Najważniejsza jest dyscyplina. Większości osób trudniej jest nauczyć się języka programowania webowego, ale poświęcić czas na kursy, które nic nie kosztują. Opanowanie podstaw do postawienia swojej pierwszej strony internetowej może zająć około 1-3 miesięcy, w zależności od tego, jak ambitnie podchodzisz do rozwoju front-endu.
Aby opanować JavaScript, dodałbym kolejne 3 miesiące ciężkiej nauki. Zakładam, że pracujesz, więc poświęcisz około 5-10 godzin tygodniowo na naukę, czyli co najmniej 1 godzinę dziennie. Nie staniesz się specjalistą od front-endu w pół roku, ale to wystarczający czas na stworzenie bazy do dalszej nauki.
Szukaj pomocy w sieci
Nie raz podczas nauki będziesz miał problemy: Jak wyśrodkować element? Dlaczego ten skrypt nie działa? HTML i CSS wyglądają inaczej na Chrome niż na Firefoxie. Jak zostać profesjonalistą w tworzeniu front-endów?
To normalne, ale ten kto pyta nie błądzi.
- Google-zadajpytanie wujkowi Google, najlepiej po angielsku.
- Stack Overflow-prawdopodobniejako pierwsze wyskoczą odpowiedzi ze Stack Overflow. Jest to portal dla programistów internetowych, gdzie użytkownicy zamieszczają pytania związane z językami programowania internetowego, a inni (zazwyczaj bardziej doświadczeni programiści internetowi) próbują udzielić Ci odpowiedzi na temat front-end development. Pierwsze najlepsze rozwiązania są punktowane, a autor pytania może zaznaczyć komentarz, który rozwiązał jego problem. Czasami rozwiązań jest kilka lub kilkanaście, więc warto przeczytać wszystkie i sprawdzić je u siebie. Jeśli któreś z rozwiązań Ci pomogło, zagłosuj - daj mu strzałkę w górę.
- GrupyFacebook-frontenddevelopment na FB dla początkujących mogą Ci bardzo pomóc, szczególnie gdy nie wiesz jak zapytać o swój problem. Wrzuć screen i swój kod. Nie oczekuj, że ktoś napisze to za Ciebie, ale komentarze na pewno naprowadzą Cię na właściwą drogę. Niestety, przy banalnie prostych pytaniach ludzie zawsze napiszą coś nieprzyjemnego - trudno, bądź cierpliwy. Polecamy grupę Web-start support jest najlepsza na pytania związane ze start-upami, a moderatorzy dbają o to, aby nie było nienawiści.
- CanIUse - jeślitwój problem jest związany z CSS nie działającym na jednej z przeglądarek, upewnij się, że to czego używasz jest wspierane dla wersji, którą sprawdzasz. W ten sposób unikniesz długich i żmudnych poszukiwań problemów z front-endem ducha.
Podsumowanie
Tak więc, w tym artykule dowiedziałeś się więcej o świecie IT i bylibyśmy szczęśliwi, gdybyśmy mogli pomóc ci w kierunku. Świat front-endu jest ogromny i początkującemu może być łatwo się w nim zgubić, ale my skupiamy się na pomaganiu ludziom wejść na właściwą ścieżkę. Ale zwróć też uwagę, że oprócz tradycyjnych języków webowych, istnieje bezkodowy język programowania webowego. Dopóki narzędzia bezkodowe nie stały się powszechnie dostępne, tworzeniem aplikacji internetowych zajmowali się wyłącznie programiści internetowi.
Na szczęście czas się skończył i teraz każdy student obeznany z materiałem może stworzyć swoją aplikację internetową lub landing page. Po opanowaniu podstaw, nawet na poziomie wiedzy, HTML, i CSS, można już znaleźć wymarzoną pracę. Wielu naukowców zauważyło, że język programowania webowego poprawia zdolności człowieka i przyczynia się do rozwoju umiejętności miękkich. W końcu jest to Twoja niezależność finansowa. Znamy różnych facetów ze świata front-end, którzy uruchomili swoje start-upy i robili niezbędne rzeczy dla dobra naszej planety.
I oczywiście takie podejście ma zalety:
- Łatwość obsługi i duża moc.
- Świetna biblioteka szablonów.
- Obsługa ustawiania różnych parametrów.
No-code czyli wizualny język programowania to świeże podejście, w którym nie trzeba pisać kodu od podstaw. Zachęcamy do korzystania z narzędzi z interfejsem graficznym, który jest przyszłością tworzenia stron internetowych. Tradycyjne aplikacje internetowe typu front-end to fajne rzeczy, ale uważamy, że trzeba wprowadzać innowacje, więc nasz produkt może być dla Ciebie przydatny. Szczerze życzymy znalezienia właściwej ścieżki do opanowania zawodu programisty. Ta ścieżka jest ciernista, ale jeśli ją opanujesz, zadowoli cię całe życie, które spędziłeś w tym czasie.
