Frontend Starter Kit – Vodič za učenje

Zajedničkim snagama, naši frontend developeri pripremili su ovaj dokument čija je svrha usmjeriti sve zaljubljenike u web development prema znanjima koja je potrebno steći kako bi postali kandidati za takvu poziciju kod nas.

Ovaj vodič namijenjen je svima onima koji počinju učiti programirati, onima koji već imaju iskustva u frontend developmentu te se smatraju potencijalnim developerom za Inchoo.

Internet

Prije nego što zaronimo u tehničke detalje i alate koji će ti pomoći da postaneš vješt frontend developer, važno je razumjeti osnove tehnologije koja sve to omogućuje – internet.

Kao frontend developer, tvoja je uloga stvoriti korisničko sučelje koje je privlačno, funkcionalno i intuitivno. No, prije toga, potrebno je razumjeti kako internet funkcionira. Ovo osnovno razumijevanje omogućit će ti da bolje shvatiš kako tvoji web projekti komuniciraju s korisnicima, kako se podaci prenose, te kako optimizirati svoje stranice za brzinu i učinkovitost.

U ovom poglavlju istražit ćemo temeljne principe rada interneta, uključujući kako se podaci prenose između klijenata i servera, kako funkcionira DNS sustav, te koje su ključne komponente koje čine mrežnu infrastrukturu. Ovo će ti znanje poslužiti kao čvrst temelj za sve daljnje korake u tvojem obrazovanju i karijeri frontend developera.

Korisni resursi:

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
https://www.youtube.com/watch?v=7_LPdttKXPc&ab_channel=Aaron
https://www.youtube.com/watch?v=x3c1ih2NJEg&ab_channel=Lesics

HTTP / HTTPS

HTTP (HyperText Transfer Protocol) je glavna i najčešća metoda prijenosa informacija na webu. Osnovna namjena ovog protokola je omogućavanje objavljivanja i prezentacije HTML dokumenata, tj. web stranica.

HTTPS (HyperText Transfer Protocol Secure) je internetski protokol nastao kombinacijom HTTP-a i SSL/TLS protokola. On omogućava kriptiranu komunikaciju i sigurnu identifikaciju web poslužitelja mreže. HTTPS se često koristi za novčane transakcije na World Wide Webu i ostale povjerljive transakcije u korporativnim informacijskim sustavima.
Frontend developer mora biti upoznat sa HTTP-om i HTTPS-om jer su to osnovni protokoli koji omogućavaju komunikaciju između web preglednika i servera. Razumijevanje ovih protokola pomoći će ti u rješavanju problema sa performansama i sigurnošću aplikacija, kao što su optimizacija učitavanja resursa i zaštita podataka korisnika putem enkripcije u HTTPS-u.

Korisni resursi:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
https://www.youtube.com/watch?v=iYM2zFP3Zn0&ab_channel=TraversyMedia

Internetski preglednik

Internetski preglednik (web preglednik, web browser, internet browser) je program koji korisniku omogućuje pregled web stranica i multimedijalnih sadržaja vezanih uz njih. Razumijevanje kako on radi nije samo tehnička vještina, to je temeljno znanje koje će te osnažiti da postaneš učinkovitiji, kreativniji i sigurniji frontend developer.

Za ovu poziciju bitno je poznavati različite internetske preglednike i njihove rendering enginee, budući da se web stranice mogu ponašati različito na svakom od njih. Njihovu doslijednost, bez obzira na korisnikov odabir preglednika, osigurat ćemo testiranjem.

Korisni resursi:

https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
https://www.youtube.com/watch?v=WjDrMKZWCt0&ab_channel=DaveXiang

Domena

Domena je, jednostavno rečeno, adresa na internetu, odnosno jedinstvena adresa određenih internetskih stranica. Svaka web stranica na internetu mora imati svoju domenu, odnosno svoju adresu. Bitno je znati da je svaka domena jedinstvena i da ne postoje dvije iste.

Za ovu poziciju moraš biti upoznat s domenom jer je to ključni dio URL-a koji identificira web lokaciju. Također, ona će ti omogućiti rad s kolačićima i lokalnom pohranom na način koji je specifičan određenoj domeni, što je važno za sigurnost i performanse web aplikacija.

Korisni resursi:

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name
https://www.youtube.com/watch?v=Y4cRx19nhJk&ab_channel=CreateaProWebsite

Web hosting

Hosting (ili web-hosting) je usluga zakupa prostora na internetskom poslužitelju (serveru) na kojem će biti smještene web stranice. Svaka web stranica ima svoj smještaj na nekom serveru, bilo da se taj server fizički nalazi u Hrvatskoj (rjeđe) ili pak u ostatku Europe i Americi (češće).

Kao frontend developer, moraš biti upoznat s web hostingom jer je to usluga koja omogućava objavljivanje web stranica na internetu. Razumijevanje web hostinga pomoći će ti kod odabira odgovarajuće hosting usluge koja zadovoljava potrebe njihove aplikacije, poput performansi, skalabilnosti i sigurnosti. Poznavanje web hostinga ključno je kako bi osigurali da web aplikacije budu dostupne korisnicima u svakom trenutku.

Korisni resursi:

https://www.youtube.com/watch?v=AXVZYzw8geg&ab_channel=CraylorMade
https://www.ibm.com/topics/web-hosting

DNS (domain name system)

DNS (Domain Name System) je hijerarhijski distribuirani sustav imenovanja za servise te računala i ostale uređaje spojene na internet ili privatnu mrežu. On povezuje različite informacije s domenskim imenima pripisanim svakom od subjekata u domeni. Prije svega, on prevodi lako pamtljiva domenska imena (www.facebook.com) u brojčane IP-adrese (157.240. 20.35.) koje su potrebne za lociranje računalnih servisa i uređaja širom svijeta. Kao osnovni element funkcionalnosti interneta, DNS omogućava globalno rašireno usmjeravanje prema ključnim riječima.

Korisni resursi:

https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/
https://howdns.works/ep3/
https://www.youtube.com/watch?v=UVR9lhUGAyU

HTML (HyperText Markup Language)

HTML je kratica za HyperText Markup Language, što znači prezentacijski jezik za izradu web stranica. Hipertekst dokument stvara se pomoću HTML jezika, a prikaz hipertekst dokumenta omogućuje web preglednik. HTML jezikom oblikuje se sadržaj i stvaraju se hiperveze i hipertekst. HTML je jednostavan za uporabu i lako se uči, što je jedan od razloga njegove opće prihvaćenosti i popularnosti. Svoju raširenost zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao besplatan i tako dostupan svima.

Zbog toga ćeš se na poziciji frontend developera upoznat s HTML-om, osnovnim jezikom za izradu strukture i sadržaja web stranica. Razumijevanje HTML-a omogućit će ti pravilno oblikovanje elemenata na stranici, kao što su naslovi, paragrafi, slike i poveznice. Također, poznavanje HTML-a biti će ključno za stvaranje semantički ispravnih dokumenata, što će poboljšati pristupačnost i SEO optimizaciju. Uz to, HTML je temelj za integraciju drugih tehnologija, poput CSS-a i JavaScripta, koje zajedno omogućuju stvaranje interaktivnih i vizualno privlačnih web aplikacija.

Korisni resursi (basic):

https://htmlreference.io/
https://www.youtube.com/watch?v=mJgBOIoGihA&ab_channel=DaveGray
https://web.dev/learn/html

Savladavanjem HTML-a lakše će se usvojiti teme vezane uz A11y i SEO, no ostavljamo poveznice ispod za dublje shvaćanja onih koji žele znati više.

Korisni resursi (A11y) – za one koji žele znati više:

https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/

Korisni resursi (SEO) – za one koji žele znati više:

https://mangools.com/blog/seo-html-tags/
https://www.youtube.com/watch?v=-B58GgsehKQ&ab_channel=Fireship

CSS (Cascade StyleSheet)

CSS je kratica od Cascading Style Sheets. Radi se o stilskom jeziku koji se rabi za opis prezentacije dokumenta napisanog pomoću markup (HTML) jezika.

Frontend developer mora biti upoznat s CSS-om zato što se on koristi za oblikovanje i raspored elemenata na web stranici. Razumijevanje CSS-a omogućuje developerima stvaranje vizualno privlačnog i responzivnog dizajna koji se prilagođava različitim veličinama ekrana i uređajima.

Korisni resursi (basic):

https://www.youtube.com/watch?v=n4R2E7O-Ngo&ab_channel=DaveGray
https://web.dev/learn/css/
https://cssreference.io/
https://web.dev/articles/animations-guide

Korisni resursi (layout):

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://cssgridgarden.com/

Korisni resursi (responzivni dizajn):

https://web.dev/learn/design/
https://www.youtube.com/watch?v=srvUrASNj0s&ab_channel=freeCodeCamp.org

JavaScript

JavaScript je skriptni programski jezik koji se izvršava u web pregledniku na strani korisnika. Izvorno ga je razvila tvrtka Netscape. JavaScript je primjena ECMAScript standarda.

JavaScript s AJAX (Asynchronous JavaScript and XML) tehnikom omogućuje web stranicama komunikaciju sa serverima, što čini web aplikaciju interaktivnijom i lakšom za korištenje.

Razumijevanje JavaScripta omogućit će ti izradu interaktivnih elemenata, poput izbornika, animacija i formi koje reagiraju na korisničke akcije. Također, JavaScript je ključan za upravljanje podacima u stvarnom vremenu, izvođenje API poziva i manipulaciju DOM-om (Document Object Model). Poznavanje JavaScripta pomoći će ti u stvaranju naprednih funkcionalnosti i poboljšanju korisničkog iskustva, te bogatijih i učinkovitijih web aplikacija.

Korisni resursi (basic):

https://web.dev/learn/javascript

Korisni resursi (dive deep):

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/
https://javascript.info/
https://www.youtube.com/watch?v=1uYQRG5csT8&list=PLOmL3sL-afbRVTvedkIrQcDwg2UY0JGTF

GIT & GITHUB

Git je distribuirani sustav za upravljanje izvornim kodom nastao 2005. godine.

GitHub je platforma za programere koja omogućuje programerima da kreiraju, pohranjuju, upravljaju i dijele svoj kod te koristi Git softver.

Git omogućuje praćenje promjena u kodu, povrat na prethodne verzije i upravljanje granama razvoja. GitHub, kao platforma za hosting Git repozitorija, omogućuje suradnju više developera, pregledavanje koda, praćenje problema (issues) i upravljanje projektima kroz funkcionalnosti poput pull requestova. Poznavanje Git-a i GitHuba pomaže developerima u organizaciji i efikasnom upravljanju kodom, olakšava timsku suradnju te pruža alate za praćenje i upravljanje razvojem projekata.

Korisni resursi:

https://www.youtube.com/watch?v=SWYqp7iY_Tc&ab_channel=TraversyMedia
https://git-scm.com/docs
https://www.atlassian.com/git

NPM (node package manager)

Node Package Manager (NPM) je važan alat u arsenalu svakog frontend developera. Razumijevanje kako koristiti NPM pružit će ti moćnan alat za upravljanje paketima, automatizaciju zadataka i održavanje projekta. Ovo znanje je ključno za moderni razvoj web aplikacija, omogućavajući efikasniji rad i brže vrijeme isporuke.

Korisni resursi:

https://www.youtube.com/watch?v=jHDhaSSKmB0&ab_channel=TraversyMedia
https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/
https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/

Iako niže navedene tehnologije nisu obavezne niti nužne za rješavanje zadatka, poznavanje istih može biti dodatni bonus zato što se koriste u našem svakodnevnom radu i svakako ćete ih trebati naučiti ako postanete Inchooer.

Tailwind CSS

Tailwind CSS je framework koji koristi utility klase bez potrebe za napuštanjem HTML-a.

Razumijevanje Tailwind CSS-a omogućit će ti brzo oblikovanje elemenata koristeći set predefiniranih klasa koje pokrivaju česte stilizacijske potrebe, poput margina, paddinga, boja i fontova. Osim toga, Tailwind CSS omogućava razvoj dosljednih i prilagodljivih dizajna putem konfigurabilnih tema i prilagođenih stilova. Poznavanjem Tailwind CSS-a smanjuje se potreba za pisanjem prilagođenog CSS-a i ubrzava razvojni proces frontend aplikacija.

Korisni resursi:

https://tailwindcss.com/docs/installation
https://www.youtube.com/watch?v=lCxcTsOHrjo&ab_channel=DaveGray

Alpine JS

Alpine JS je minimalistički framework koji služi da se interaktivnost piše izravno u HTML-u.

Razumijevanje Alpine.js-a omogućit će ti da jednostavno manipuliraš DOM-om (Document Object Model) i upravljaš stanjem aplikacije putem deklarativne sintakse u HTML-u. Ovaj framework pruža mogućnost brzog razvoja funkcionalnosti kao što su prikazivanje/sakrivanje elemenata, manipulacija podacima i upravljanje eventima koristeći samo HTML i JavaScript.

Korisni resursi:

https://www.youtube.com/watch?v=5ILDMMLgX0E&ab_channel=TheCodeholic
https://alpinejs.dev/start-here

Linux

Linux je ime za jezgru (engl. kernel) računalnog operativni sustava sličnog Unixu, ali najčešće i za cijeli operativni sustav utemeljen na toj jezgri. Linux je slobodan softver. Za njegov spontani razvoj zaslužni su brzi razvoj globalne komunikacijske mreže i GPL licenca za korištenje. To je omogućilo stvaranje i rast globalne zajednice suradnika – korisnika i programera, koji su omogućili da Linux dođe na naslovne stranice i postane prepoznatljivo ime.

Kao frontend developer, trebaš biti upoznat s Linuxom jer je to operativni sustav koji često koriste backend developeri i sistem administratori za razvoj i održavanje web aplikacija. Razumijevanje Linuxa omogućit će ti da efikasno komuniciraš s tim timovima, razumiješ osnovne koncepte kao što su terminal, datotečni sustav i mrežno konfiguriranje te olakšati suradnju na razvojnim projektima. Također, poznavanje Linux terminala omogućit će ti korištenje moćnih alata za automatizaciju, debugging i upravljanje verzijama koda, što doprinosi efikasnijem i produktivnijem razvoju aplikacija.

Korisni resursi:

https://www.youtube.com/watch?v=ROjZy1WbCIA&ab_channel=freeCodeCamp.org
https://ubuntu.com/tutorials/command-line-for-beginners#1-overview

Frontend zadatak

Na osnovu ovog dizajna i ovog prototipa u Figmi, potrebno je napraviti web stranicu. To uključuje kreiranje markupa koristeći HTML, stiliziranje stranice koristeći CSS (vanilla), i dodavanje funkcionalnosti koristeći JavaScript (vanilla). U svijetu frontend razvoja, izraz “vanilla” se koristi za opisivanje koda koji je napisan u čistom, standardnom obliku, bez upotrebe dodatnih biblioteka, okvira ili dodataka.

Opis zadatka:

• Napravi zadatak koristeći “mobile-first approach”. To znači da se prvo uzima u obzir mobilni dizajn, zatim tablet dizajn, a na kraju desktop dizajn.
• U dizajnu su napravljeni header i glavni sadržaj, a dodatni bonus je ako napraviš footer koji prati dizajn (ne mora biti ništa specijalno, a možeš nas ugodno iznenaditi).
• Što se tiče navigacije u prototipu, možeš vidjeti kako navigacija funkcionira. Na mobilnim uređajima koristi se off-canvas navigacija, dok se na desktopu pritiskom na stavku menija otvara padajući meni. Važno je napomenuti da treba implementirati overlay, i pritiskom na njega navigacija se treba zatvoriti.
• U headeru se nalazi i “Account” meni, a pritiskom na njega trebaš implementirati standardno ponašanje dropdowna.
• Kada je riječ o košarici, trebaš je implementirati kao off-canvas i implementirati dva stanja: prvo kada je košarica prazna, a drugo kada u njoj postoji proizvod.
• Implementiranje produkt galerije sa čistim Vanilla JavaScriptom je bonus, ali također možeš koristiti i neki JavaScript library za isto.
• Što se tiče dijela sa informacijama o proizvodu, trebaš implementirati funkcionalnost “Dodaj u košaricu”, gdje se pritiskom na gumb proizvod dodaje u košaricu s osnovnim informacijama (imenom, količinom, cijenom i slikom). Input polje za količinu treba biti interaktivno.
• U košarici, klikom na ikonu “delete”, proizvod treba biti uklonjen iz košarice, a korisniku treba biti prikazano da je košarica prazna ako je to slučaj.
• Tekst “x items in cart” treba dinamički generirati tako da x odražava stvarni broj proizvoda u košarici.
• Također, subtotal u košarici: x, x treba biti dinamički, što znači da se subtotal treba ažurirati kada se promijeni količina proizvoda.
• Iako dizajn prikazuje više proizvoda u košarici, radite samo s jednim proizvodom.

Naglasak stavljamo na izradi HTML-a i CSS-a kako bismo postigli željeni dizajn i strukturu. Što se tiče JavaScript funkcionalnosti, prioritet je prilagoditi ih vašim mogućnostima. Ne očekujemo da se sve funkcionalnosti izvedu.

Sve dodatne funkcionalnosti i poboljšanja ćemo uzeti u obzir kao dodatni napor, te će i to biti evaluirano.

Kako se prijaviti za posao u Inchoou?

Prođi gore navedena područja i riješi zadatak, te podijeli s nama svoju zamolbu, CV i zadatak kao attachment, GitHub ili StackOverflow profil kroz slijedeću formu: https://inchoo.along.co/listings/frontend-developer-fbdfe714/form. (preferirano na GitHubu). Mi ćemo ti se povratno javiti s osvrtom na prijavu i, ovisno o tome kakva je bila, možda te pozvati na razgovor u naš ured.

Sretno!