Starter Front-Endowca (tworzenie stron www)

[3D3N 2]

Pewnie znajdzie się tutaj kilka osób które chciałyby rozpocząć swoją pracę w zawodzie twórcy stron, ale od strony wizualnej. Zajmuję się tym praktycznie od dziecka. Zawsze jarało mnie tworzenie multimediów którymi mogłem coś przekazać swoim rówieśnikom. Dziś pracuję w jednym z najlepszych polskich studiów interaktywnych i realizuję projekty dla marek dobrze znanym wam z reklam w telewizji.

Od czego zacząć?
Podstawą jest znajomość HTML i CSS. Oba języki "obcych" to dość łatwa sprawa i przyswoicie je w maksymalnie miesiąc. Tutaj pomocne będzie dla was:
https://www.w3schools.com/
https://www.codecademy.com/

codecademy jest idealnym rozwiązaniem, ponieważ uczycie się w środowisku które prowadzi was przez lekcje, z wyznaczonymi zadaniami, i podglądem live tego co piszecie. Tak na prawdę nie macie szans zapamiętać wszystkiego, sensownym jest zapamiętanie logiki a później posługiwanie się w3schools w celu znajdowania odpowiedniego taga czy atrybutu. Najważniejszym jest aby zapamiętać podstawowy szablon, czym jest tag, metadane, klasa, id czy atrybut.

Jeżeli przyswoicie już podstawy, przechodzicie do nauki JS (javascript).
Tutaj poraz kolejny przyda wam się codecademy, posiada on 2 kursy dla podstawowego js oraz dla jquery. Ucząc się dawno temu nie używałem takich narzędzi i wszystko robiłem "na czuja". Kopiowałem cześci kodu znalezione na stackoverflow czy codepen gdy chciałem stworzyć konkretną funkcję. Możecie działać w taki sposób, ale gwarantuje wam że nie będziecie rozumieć nic z wklejanych odów i prędzej czy później natkniecie się na kłopoty nie do obejścia.

Po co wam JS i JQ? A chociażby do walidacji formularzy, do tworzenia paralax, animacji (tak w css oczywiście macie możliwość tworzenia animacji lecz są biedne), przejść lub chociażby opóźniania przeładowania się na inną podstronę co jest fajnym rozwiązaniem gdy chcecie aby strona nie była ciężka, a posiadała złudzenie strony typu onepage.

 

Narzędzia

Tutaj macie wiele wyborów. Jeśli piszecie prostą wizytówkę bez CMS typu Wordpress, Joomla czy Drupal wystarczy wam pakiet klienta ftp oraz edytora.

Edytory kodu:
- Brackets (który serdecznie polecam bo uważam że jest obecnie najlepszym darmowym edytorem)
- Notepad++
- Atom (prawdopodobnie płatny jednak nie jestem pewien)
- Webstorm (płatny)
- Zwykły notatnik systemowy (dla masochistów ale da się używać)

Klient FTP:
- Filezilla
- Total Commander
- Notepad ++ z pluginem do edycji pliku bezpośrednio na ftp jednak tycyz się to jedynie plików tekstowych.

Tak czy siak zostaniesz grafikiem!
Nie masz wyjścia, Front-End developer to programista i grafik w jednym, dopnij do tego umiejętności w javie, php i mysql a staniesz się Full-Stackiem
Często będziesz tworzyć szablony graficzne stron, bannerym ikony i wiele innych materiałów graficznych używanych na stronach internetowych.

Oczywiście możecie robić to wszystko w gimpie, ale z takim programem nie dostaniesz pracy. Znajomość Adobe Photoshop i InDesign (w dobie grafik wektorowych) to mus. Bardzo ciekawą alternatywą z której korzystam jest Affinity Designer, jest o wiele tańszy bo płacicie tylko raz za wieczny support. Czemu AD? Pracuję głównie z tabletem graficznym a posiada on o wiele lepsze wsparcie dzięki współpracy z firmą wacoom. Co więcej, jest elastyczny ponieważ w tej wersji możecie bez problemu tworzyć grafikę rastrową jak i wektorową przełączając się dowolnie między tak zwanymi "personami". Nie będę już bardziej rozwijał tematu persony eksportu w której bez problemu wyplujecie swoją grafikę do formatu .psd lub .eps.

 

Nieustanna nauka

Taki to już zawód, będziecie uczyć się do końca swojego życia :P. Ale nie przejmuj się, każdy język programowania działa tak samo, ma podobną składnie (o ile nie używacie języka Brainfuck xd) posiada jedynie inny zakres funkcji. Po nauce podstaw szlifujecie już tylko umiejętności w JS JQ lub we frameworkach typu bootstrap, isotope czy foundation. Kolejnym stopniem może być nauka Angular/Angular2 (który  co prawda powoli umiera ale wiele firm nadal z niego korzysta, tak samo jak php ponoć umarło 5 lat temu....), jest to też idealny moment na nauke React.js oraz Node.js.

 

Praca w grupie

Dowiedz się czym jest SCRUM system, pod kogo będziesz podlegać i jakie tak naprawdę obejmiesz stanowisko. Zapewne zostaniesz przydzielony do grupy która ma wykonać daną ilość "tasków". Zapoznaj się z programem JIRA, poczytaj o nim. Darmową wersją takiego systemu jest Trello. Pomagajcie sobie nawzajem, wiem że w polskich realiach o to ciężko, dlatego polska scena frontendu to dno. Próbujcie zmienić to nastawienie, działacie w grupie i jako grupa będziecie oceniani.

 

Sledź trendy

Jeśli nie będziesz przeglądać awwwards.com lub pinteresta przynajmniej raz w tygodniu to zostaniesz w tyle. Musisz się czymś inspirować, musisz wiedzieć wszystko aby nie zostać w tyle. Trendy zmieniają się średnio co 2 miesiące. Dojdziesz do momentu w którym będziesz wiedział jaka paleta kolorów w tym roku dominuje, co więcej zagniesz swoją dziewczynę znajomością kolorów - dowiesz się jaki to Królewski błękit, lub burgundowy. Pamiętaj że słoneczny nie jest równy żółtemu!

 

Nie wspominałem o zarobkach, ponieważ uważam że każdy potrafi odnaleźć się na takich portalach jak linkedin.cs pracuj.pl lub praca.pl. oferty pracy znajdziecie nawet na zwykłym OLX.
Dzięki za przeczytanie tych wypocin, mam nadzieje że pomogę komukolwiek w starcie, planuję też napisać troszkę więcej o samym programie brackets. Czekam na wasze uwagi oraz pytania :)!
btw. temat piszę będąc w pracy już po wykonanych zadaniach, mam jeszcze kilka pomysłów więc będę rozwijać ten post jeśli tylko będziecie chętni.

Spis linków: codecademy.com w3schools.com stackoverflow.com codepen.io nafrontendzie.pl polskifrontend.pl awwwards.com pexels.com pixabay.com gratisography.com

 

24.01.2018r.

Podział Front-end / Back-end / Full-Stack.

Front-End Developer
Osoba zajmująca się "frontem" czyli zewnętrzną stroną aplikacji internetowej. Do jego zadań należy tworzenie strony wizualnej projektu, bardzo często zaczynając od projektów graficznych a następnie wykorzystuje je przy tworzeniu prawdziwej strony. F-ED wykorzystuje narzędzia stworzone przez Back-end Developerów, a razem uzupełniają się i tworzą nierozłączny zespół. Front-endowiec nie zrobi portalu takiego jak ten na którym się znajdujemy, a backendowiec nie sprawi że strona będzie przyjemna dla oka. Zadaniem F-ED jest także przystosowanie strony do jak największej liczby urządzeń, za pomocą CSS/LESS/SASS musi przystosować stronę do wyświetlania jej na ekranach 4k jak i na telefonach z wyświetlaczami 320px szerokości.

 

Back-End Developer
To ta strona musi posiadać umięjetności w takich językach jak java php czy mysql (nie c# czy c++ bo one budują aplikacje desktopowe a cały czas mówimy o stronach internetowych). Wordpress, Joomla czy Drupal, ich funkcje to właśnie dzieła B-ED'a. Tworzenie całego procesu zakupu przez internet, przechowywania twoich przedmiotów w koszyku, tworzenie funkcji newsletterowych to tylko małe piwo. Gdyby nie B-ED, to F-ED nie mógłby wykonywać swojego zawodu (w prawdzie można tworzyć strony wizytówki, ale tak szczerze ile firm na te chwile chce stronę której nie będą w stanie edytować bez znajomości kodu?).

 

Full-Stack Developer
To tak zwany kombajn, robi i jedno i drugie. Tacy ludzie zarabiają grube dziesiątki tysięcy złotych. Jeśli pochłonie informacje na temat UX/UI to działa jako 1-osobowy zespół. Jest to bardzo chętnie witana grupa, bo rozumiecie? Po co mam zatrudniać 3 osoby skoro mogę zatrudnić jedną, płacąc mu za 2 osoby, zamiast płacić osobno trzem.

 

[ManoTM 7]

Dobry poradnik, leci plus