Izrada web stranice Front-end development - besplatni tečaj Dječje online škole programiranja Hello World, obuka 44 sata, Datum: 03.12.2023.
Miscelanea / / December 06, 2023
Kako radi Internet
Razgovarajmo o osnovnim konceptima Interneta i njegovoj arhitekturi. Otkrijmo što je domena, hosting, klijent-poslužiteljska arhitektura. Postavimo radno okruženje i razgovarajmo o tri stupa Front-end razvoja - HTML, CSS i JavaScript.
HTML
Struktura HTML dokumenta
Kreirajmo prve HTML stranice i pogledajmo primjere jednostavnih i složenih web stranica. Hajde da shvatimo koji bi blokovi trebali biti na našoj stranici. Učinimo da se naše stranice povezuju jedna s drugom, saznajmo kako se tekst razlikuje od hiperteksta i što su oznake i atributi.
Rad s tekstom
Naučimo kako ispravno raditi s tekstom u HTML-u: podijelimo ga na odlomke, označimo naslove i podnaslove. Naučimo kako napraviti numerirane i označene popise i citirati klasike.
Linkovi i slike
Upoznajmo se s vezama detaljnije, a također naučimo kako umetnuti slike i koristiti ih kao veze.
Izgled tablice
Kreirajmo našu prvu tablicu i saznajmo od kojih se oznaka sastoji. Naučimo kako spojiti ćelije, promijeniti broj redaka i stupaca, poravnati tekst i još mnogo toga. Od dizajnera ćemo naučiti i osnovne savjete kako svoj stol učiniti lijepim.
Uvod u forme
Kreirajmo naš prvi obrazac, naučimo kako raditi s poljima za unos, padajućim popisima, potvrdnim okvirima i, naravno, gumbima. Proučimo druge elemente oblika koji će nam biti korisni u budućnosti.
CSS
Uvod u CSS
Prisjetimo se što je CSS i kako ga koristiti. Naučimo kako koristiti CSS pri radu s HTML stranicama. Proučimo sintaksu CSS-a i što su selektori, nasljeđivanje i s kojim se prioritetom naši stilovi primjenjuju na HTML dokument.
Selektori
Proučimo selektore detaljnije. Naučimo kako pristupiti jednom ili više elemenata, koja je razlika između klase i pseudoklase i elementa od pseudoelementa. Pogledajmo smjernice za CSS i saznajmo što ljudi vole pitati o CSS-u na intervjuima.
Nasljeđivanje, kaskadiranje i prioritet
Saznajemo da kaskaderstvo i kaskaderi nisu iz istog područja. Hajdemo razumjeti principe po kojima se CSS stilovi primjenjuju na HTML elemente.
Dekoracija teksta
Vratimo se tamo odakle smo krenuli – na tekst. Naučimo kako naš tekst učiniti lijepim i prilagođenim korisniku koristeći CSS svojstva: podebljanost, kurziv, veličinu, boju, pozadinu i druga.
Model blok dokumenta
Naučimo div i span oznake, kao i kako postaviti veličine elemenata, ispune i obrube. Shvatimo kako se formira blok model dokumenta i koje mogućnosti imamo za pozicioniranje elemenata.
JavaScript
Predstavljamo JavaScript
Upoznajmo se s trećim stupom Front-end razvoja – JavaScriptom. Otkrijmo što su varijable, tipovi podataka i zašto su potrebni. I naravno da ćemo napisati naš prvi program.
Uvjeti
Prisjetimo se logike, logičkih operacija i njihovih kombinacija. Neka snaga i kontrola budu s nama.
Ciklusi
Naučimo kako učiniti puno dok pišemo malo koda. Da shvatimo da je ciklus unutar ciklusa jednostavan, ali morate biti oprezni.
Nizovi
Postoje ledene mase, šume, a postoje i nizovi u programiranju. Što im je zajedničko, a po čemu se razlikuju, proučit ćemo u ovoj lekciji. Savjet - petlje iz prethodne lekcije će nam puno pomoći.
Funkcije
Ako su varijable i pravo ime za njih abeceda programiranja, onda je sposobnost rada s funkcijama i odabir prikladnih imena za njih već recept. Naučit ćemo kako rastaviti program na logičke blokove i zašto je to važno u ovoj lekciji.
Predmeti
Upoznat ćemo se s konceptom objekata, metoda i započeti upoznavanje s principima OOP-a.
Uvod u DOM
JavaScript bi bio beskoristan ako ne bi mogao komunicirati s HTML dokumentom. Naučit ćemo što je DOM (Document Object Model), ali što je još važnije, naučit ćemo kako raditi s HTML-om i CSS-om kroz JavaScript.
Rukovanje događajima
Sada ćemo to podići na višu razinu i naučiti kako reagirati i komunicirati s korisnikom koristeći JavaScript. Također ćemo naučiti zašto JavaScript događaji mogu mjehurići i potonuti.
HTML5 i CSS3
HTML5: što je novo i zašto?
Otkrijmo koje su se promjene dogodile u HTML5 i zašto. Proučimo nove elemente i analiziramo slučajeve njihove ispravne upotrebe.
Elementi pozicioniranja i rešetka
Pogledajmo nove načine strukturiranja stranica i pozicioniranja elemenata na njima.
HTML5 obrasci
Istražimo mračnu stranu moći i vježbajmo s novim oblicima u HTML5, kao i s promjenama starih. Poradimo na novim vrstama polja za unos datuma, boja, brojeva i kako potaknuti korisnika da si malo olakša život.
Audio i video
U ovom tutorialu, vi ste DJ, ali i urednik. Tijekom ove lekcije nećemo imati vremena za izradu vlastitog Youtubea, ali ćemo se jako potruditi stvoriti prototip s osnovnom funkcionalnošću.
Rad s tekstom u CSS3
Otkrijmo koje mogućnosti postoje i preporuke za oblikovanje teksta u najnovijoj verziji standarda.
Efekti prijelaza i transformacije u CSS3
Naučimo kako stvoriti animaciju i razne efekte pomoću CSS3. Upoznajmo se sa zamkama pri stvaranju takvih efekata.
Adaptivni izgled
Otkrijmo zašto vam je potreban prilagodljiv izgled, a kada je nepotreban i može naštetiti. Pogledajmo osnovnu sintaksu i, naravno, vježbajmo prilagodljivi izgled.
Flexbox & CSS Grid
Saznat ćemo koji su suvremeni pristupi rasporedu blokova, kao i koje poteškoće postoje u njihovom korištenju.
CSS predprocesori: LESS i SASS
Želite koristiti varijable u CSS-u? Lako! Saznajte koje zanimljive stvari možete učiniti pomoću CSS predprocesora.
JavaScript na novoj razini
ES-2015+
Što je moderni JavaScript, "strict mode" i kako živjeti sa svime time.
OOP u JavaScriptu
Proučimo kako su klase strukturirane u modernom JavaScriptu i zašto se koriste ako se sve može učiniti pomoću funkcija. Kako funkcionira nasljeđivanje i koji drugi načini za stvaranje klasa postoje u JS-u.
Funkcije u detalje
Otkrijmo što su deklaracija funkcije i izraz funkcije, naučimo kako pozvati funkciju bez imena. Pogledajmo izraz "kontekstno vezivanje".
AJAX i JSON
Pređimo na novu razinu kao programeri, naučimo kako postavljati HTTP zahtjeve i naučimo kako poslužitelj i klijent mogu međusobno komunicirati, a ne svađati se.
Regularni izrazi
"Ako imate problem i namjeravate ga riješiti regularnim izrazima, onda već imate dva problema." Naučimo kako izbjeći pucanje sebi u nogu korištenjem uobičajenih izraza.
Graditelji, pokretači zadataka i upravljanje ovisnostima
Bower, npm, gulp, Grunt, webpack i co. U ovome nema ništa komplicirano, ali morat ćete to shvatiti.
Testiranje u JavaScriptu
Gdje ima koda, uvijek ima grešaka. Naučit ćete kako minimizirati njihov broj i koje će nam prakse i alati u tome pomoći.
Algoritmi
Naučit ćemo kako napisati kod kako kasnije procesor i preglednik ne bi doživjeli nesnosne bolove prilikom pokretanja vašeg programa.
ReactJS
Uvod u ReactJS
Upoznajmo ReactJS, naučimo kako pisati jednostavne komponente i usporedimo ga s drugim popularnim okvirima. Upoznajmo se s konceptom virtualnog DOM-a.
Arhitektura i konfiguracija React aplikacija
Saznajmo koje radnje moramo izvršiti kako bismo ne samo pisali u Reactu, već i da bismo to činili što učinkovitije i praktičnije.
Izrada prve aplikacije u ReactJS
Pogledajmo pobliže JSX, ReactComponent, ReactDOM.render, Render funkciju. Konfiguriramo i pokrećemo prvu aplikaciju, uspostavljamo odnose među komponentama i obrađujemo događaje.
Usmjeravanje i ReactJS
Što je usmjeravanje; Upoznajmo se s ReactRouterom i njegovom funkcionalnošću; Usmjeravanje organiziramo u našoj aplikaciji.