Jak nauczyć się frontendu

pytanie zadane 27 sierpnia 2018 w Rozwój zawodowy, nauka, praca przez hayasugiru Nowicjusz (160 p.)

Jestem studentem kierunku niezwiązanego z IT. Jednak mimo to od wielu miesięcy łapię się na tym, że chciałbym umieć sam dla siebie tworzyć portale i różne ciekawe strony. Wszystko zaczęło się od tego gdy przeglądając internet natknąłem się na stronę z pewnymi produktami. Animacje, powiększane grafiki wywarły na mnie spore wrażenie. Później co chwila gdzieś wchodząc jarałem się możliwościami widocznymi na stronach. Zacząłem się zastanawiać jak oni to robią. Po czasie tak mi się to spodobało, że chciałbym się tego nauczyć.

Nie chodzi mi o klasyczne aplikacje i programy, a umiejętność tworzenia stron naładowanych ciekawymi rozwiązaniami, najedziesz myszką coś się powiększy, klikniesz na coś pojawia się animacja, a do tego budowa sklepów internetowych, to takie fajne się wydaje, baza danych, rejestracja, skrypt umożliwiający złożenie zamówienia, liczenie dostępnych towarów. Wisienka na torcie to budowa stron typu xhamster, czy tych z kamerkami, gdzie można nadawać video, audio, działa system żetonów. Jak oni to zrobili? Albo wasze forum. Chciałbym posiąść tę wiedzę.

Niestety nie jestem studentem informatyki, więc w grę wchodzi nauka w domu. Pytanie, czy robiąc to sam mogę się czegoś nauczyć? Jeśli tak to od czego zacząć? Czy potrzebuję książek do algorytmów? Czy wystarczy html, css, javascript, msql, php? Jakie książki lub kursy możecie polecić na start?
I czy regularnie się ucząc będę to potrafił robić? Po lekturze forum odniosłem wrażenie że javascript jest językiem mało przyjaznym, nielogicznym i frustrującym. To prawda?

4 odpowiedzi

odpowiedź 27 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Po lekturze forum odniosłem wrażenie że javascript jest językiem mało przyjaznym, nielogicznym i frustrującym. To prawda?

Gdybym był adminem to za taki tekst poszedłby ban na wieki :) JavaScript to piękny język!

A tak na serio to JS to język jak każdy inny. Musisz na początek poznać podstawy programowania, zmienne, pętle itp. Proponuję zacząć od http://kursjs.pl/ jeśli chodzi o JavaScript, a do html i css to najlepiej poczytaj sobie różne blogi, kursy online itp. i zacznij pomału robić pierwszą stronkę.

Jak czegoś nie wiesz to szukaj w google, na forach itp. i idź dalej z tematem. Z czasem dojdziesz do etapu, że coraz więcej będziesz wiedział i nauczysz się korzystać z dokumentacji itp.

Jest też fajna stronka polskifrontend.pl gdzie są linki do wielu polskich blogów o front-endzie (w tym i mój mały blog o JS na poradnik.drogimex.pl :)

A co do kierunku niezwiązanego z IT... to ja jestem z wykształcenia mgr inż. budownictwa, więc spoko, też nie ma to wiele wspólnego z programowaniem :)

komentarz 27 sierpnia 2018 przez CenterPL Pasjonat (19,070 p.)

JavaScript to piękny język!

Ehm, rzecz gustu - mnie się on nie podoba kompletnie, znam go nieźle, rozumiem co tam się dzieje et cetera - to żeby nie zarzucił mi ktoś, że po prostu go nie znam. Po prostu subiektywnie go nie lubię. Tak samo jak pythona, bo nie ma klamer :)

Ogólnie, to nie znam pięknego języka, każdy ma swoje wady. Ale mimo to uważam, że programowanie to sztuka! :D

komentarz 27 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Zgadzam się, to akurat napisałem tak trochę ironicznie :)

Chyba każdy ma języki, które lubi bardziej i mniej. Ja na przykład mam parę starszych projektów w PHP i przyznam, że niechętnie siadam gdy muszę coś w nich zmienić bo PHP po prostu nie lubię, ot tyle i aż tyle, nie lubię :)

Ale na początku najważniejszy chwycić zasady w jednym języku, a kolejne nie będą już dużym problemem.

komentarz 27 sierpnia 2018 przez Kamil Łydka Stary wyjadacz (13,600 p.)

JavaScript to piękny język!

~ bez ironii.

odpowiedź 27 sierpnia 2018 przez Zaqu93 Gaduła (4,850 p.)

odpowiedź 27 sierpnia 2018 przez velaro Użytkownik (950 p.)

Napisałeś "baza danych, rejestracja, skrypt umożliwiający złożenie zamówienia, liczenie dostępnych towarów" - no to już jest backend a nie frontend. Frontend to tylko warstwa wizualna aplikacji, a backend to logika, obliczenia, bazy danych itp.

Jeśli chcesz iść w front to zacznij od łatwego html i css (koniecznie do css naucz się bootstrapa aby szybko budować responsywne stronki), potem przejdziesz do javascript, który jest o tyle trudniejszy, że ma pełno bibliotek, frameworków i dużo do nauki (Angular, jQuery, VUE, React itp.). Dzięki javascript nauczysz sie robić intereakcje po stronie klienta, choć wiedz, że wiele animacji można w samym css zrobić. Nawet robienie animacji bardziej mi podpasowało w css niż js.

komentarz 27 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

koniecznie do css naucz się bootstrapa aby szybko budować responsywne stronki

a to bez bootka już nie da się zrobić strony...? :( Jasne... najlepiej od razu startować z frameworkami, jQuery i może w ogóle od razu wejść w generator www bo po co się uczyć podstaw i zrozumieć co i jak....

To jest właśnie błąd wielu początkujących... chcą szybko nawet już pierwszego dnia zrobić drugie wp.pl... programowanie wymaga cierpliwości i na prawdę dużo nauki, a do frameworków należy siadać dopiero po opanowaniu podstaw aby wiedzieć co one robią, a nie żyć w świecie gdzie bootstrap to magia do rwd...

komentarz 27 sierpnia 2018 przez velaro Użytkownik (950 p.)

Nie miałem na myśli, żeby jednocześnie uczyć się frameworków z językami, najpierw składnia potem frameworki i biblioteki. Ale też nie warto odkładać tego etapu w nieskończoność i zostawać przy samej składni języka bo ani się nic większego i zaawansowanego nie stworzy ani się pracy w żadnej firmie nie dostanie.

komentarz 27 sierpnia 2018 przez Spierdolix Nowicjusz (100 p.)

Ekspertem nie jestem ale zawsze sądziłem, że dobry projekt napisany bez albo z własnym frameworkiem zrobi większe wrażenie na pracodawcy niż znajomość frameworków. Przykładowo takie własne responsywne portfolio napisane od zera z dobrymi praktykami CSS, jakąś metodologią typu BEM itp. raczej wypadnie lepiej niż wyklepane na bootstrapie. Wydaje mi się, że lepiej nauczyć się porządnie czystego języka i trochę się nim pobawić, porobić coś i dopiero potem zainteresować się frameworkami żeby w pełni zrozumieć ich sens i korzyści wynikające z zastosowania.

komentarz 27 sierpnia 2018 przez niezalogowany

Frontend to tylko warstwa wizualna aplikacji

Nie do końca, w SPA spora część logiki przeniesiona jest na front. Patrz na przykład routing lub state management.

odpowiedź 27 sierpnia 2018 przez hayasugiru Nowicjusz (160 p.)

Dziękuję za odpowiedzi.

A zatem tworzenie sklepów internetowych nie jest domeną fronetendu? Sądziłem że korzystanie z baz danych przypada php, które w moim odczuciu należy do frontendu.

Kiedyś uczyłem się programowania, tak dla siebie, z ciekawości. Opanowałem podstawy, inicjacje zmiennych, tworzenie pętli, tworzenie funkcji, trybów warunkowych itp. Wszedłem też w dział obiektowego. Wymiękłem jednak na pisaniu programów typu wylicz silnię, albo wypisz jakieś tam liczby. Nie radziłem sobie z tzw algorytmiką. Nie wiedziałem co z czym połączyć. Pytanie czy ta umiejętność jest niezbędna w przypadku frontendu?

W bibliotece mogę wypożyczyć książki o html. Sądzę że najlepiej od tego zacząć.

Tylko którą z tych najlepiej wybrać?

Freeman E. - HTML5. Rusz glowa

Duckett J. - HTML i CSS. Zaprojektuj i zbuduj witryne WWW

Danowski B. - HTML5. Ćwiczenia praktyczne

Danowski B. - Tworzenie stron WWW w praktyce Wydanie II

Danowski B. - Wstęp do HTML5 i CSS3

Ch.Hudson, T.Leadbetter - HTML5. Podręcznik programisty

Damian Wielgosik - Moja pierwsza strona internetowa w HTML5 i CSS3

komentarz 27 sierpnia 2018 przez Secrus Nałogowiec (32,880 p.)

Frontend to HTML, CSS i JS (lub jego dialekty). PHP to backend, ale nie jest to jedyny język, który możesz do tego wykorzystać. Java, C#, Python, Ruby... Jeśli spodoba ci się JS to backend możesz napisać również w tym języku, dzięki node.js.

Rozróżnienie front/backend jest z początku trudne. W skrócie można to określić tak: Frontend to to, co możesz zobaczyć w przeglądarce jak naciśniesz ^U (ctrl+u). Backend jest niewidoczny. przetwarza dane, zapisuje je do bazy itp.