|
Web razvoj Sve u vezi sa razvojem Internet sajtova: programi, dizajn, usluge hostinga, administracija... |
|
Alatke vezane za temu | Vrste prikaza |
28.8.2020, 6:48 | #1 |
Član
|
Put učenja HTML/CSS
Počeo sam pre mesec dana da učim HTML i CSS. Ima dosta toga na YT, našao sam nešto i na udemy, ali pored dobrog tutorijla, mislim da je važna i metoda učenja. Šta i kako učiti. Zato sam hteo da pitam one iskusne koji su godinama u ovoj materiji za savet, na šta da se fokusiram i čemu prvo da posvetim pažnju?
Poslednja ispravka: DeCoy (28.8.2020 u 13:02) |
28.8.2020, 6:57 | #2 |
Deo inventara foruma
Član od: 29.1.2008.
Poruke: 20.482
Zahvalnice: 433
Zahvaljeno 4.007 puta na 3.729 poruka
|
Re: Put učenja HTML/CSS
počni prvo html, pa malo css, pa html5 i usavrši css
|
28.8.2020, 20:23 | #3 |
Član
|
Re: Put učenja HTML/CSS
@water wizard Hvala za savet.
Za proteklih mesec dana sam pohvatao dosta toga vezano za html i css. Osnove za skelet stranice u html, tagove, ubacivanje css u html i svašta nešto. Napravio sam landing page pristojnog izgleda. Sada počinju da se javljaju termini poput flexbox, grid, sass, bootstrap i počinjem da se gubim, jer krećem od svega po malo daučim ne znajući šta je primarno. Zato sam postavio pitanje o kretanju i metodiki učenja. |
28.8.2020, 20:43 | #4 |
Deo inventara foruma
Član od: 29.1.2008.
Poruke: 20.482
Zahvalnice: 433
Zahvaljeno 4.007 puta na 3.729 poruka
|
Re: Put učenja HTML/CSS
to su neke nadogradnje to ostavi za kasnije, jbg što više učiš više otvaraš nove puteve ka dinamičkoj stranici i nove teme za učenje
|
28.8.2020, 21:31 | #5 |
Deo inventara foruma
Član od: 17.6.2011.
Poruke: 7.336
Zahvalnice: 94
Zahvaljeno 3.334 puta na 2.010 poruka
|
Re: Put učenja HTML/CSS
Nemoj da ostavljaš Grid i Flexbox za kasnije već kreni odmah sada da ih učiš, da ne bi trošio vreme na arhaične stvari koje više niko živi ne koristi.
A Complete Guide to Flexbox A Complete Guide to Grid Spisak drugih korisnih tutorijala možeš naći ovde. Dobar izvor za sistematsko učenje web tehnologija je Mozilla Developer Network. HTML5 jeste HTML. Poslednji markup standard koji nije bio HTML je bio XHTML (baziran na XML-u) a njega već više od pola decenije niko živi ne koristi. |
28.8.2020, 22:06 | #6 |
Član
|
Re: Put učenja HTML/CSS
@Neutrino Hvala puno za linkove. Od sutra pa nadalje krećem sa učenjem flexbox i grid sistema dok ne savladam dobro.
Ono malo što sam video u flexbox, jeste da nema više muke oko upotrebe clear: both; i float. To verujem da jeste arhaična metoda, koja se sa pojavom flexbox i ne koristi. Hvala još jednom na linkovima i savetima. Iako imam 52, radujem se učenju i sticanju novog znanja. |
28.8.2020, 22:09 | #7 |
Deo inventara foruma
Član od: 29.1.2008.
Poruke: 20.482
Zahvalnice: 433
Zahvaljeno 4.007 puta na 3.729 poruka
|
Re: Put učenja HTML/CSS
html 4 je jednostavan za učenje a html 5 je nadogradnja i počinje da se komplikuje..
Ja polazim od toga da je on totalni početnik koji hoće da se upozna sa tehnologijom a ne da uči za developera da bi se time bavio, a tehnologija se stalno menja dok sve to nauči biće nešto novo bolje.. U svakom slučaju valjda prvo treba da razume šta je CSS da bi lakše razumeo i te naprednije layuot-e. |
28.8.2020, 22:23 | #8 | |||
Deo inventara foruma
Član od: 17.6.2011.
Poruke: 7.336
Zahvalnice: 94
Zahvaljeno 3.334 puta na 2.010 poruka
|
Re: Put učenja HTML/CSS
Citat:
Citat:
CSS Grid i Flexbox su standardi koji su nastali sa potrebama web developera na umu i neće nestati bar sledećih deset i kusur godina. Citat:
Sada kada se čak i Microsoft odrekao Internet Explorera a Firefox je sve bliži da ode u potpuni zaborav, ne postoji bolji trenutak da se počne sa zdravom osnovom a to podrazumeva preskakanje svih arhaičnih tehnika i fokus na sve ono što savremeni Web API nudi. |
|||
Sledeći korisnik se zahvaljuje korisniku Neutrino na korisnoj poruci: | ||
talicni67 (29.8.2020) |
28.8.2020, 22:24 | #9 |
Član
|
Re: Put učenja HTML/CSS
@Neutrino Hvala puno za linkove. Od sutra pa nadalje krećem sa učenjem flexbox i grid sistema dok ne savladam dobro.
Ono malo što sam video u flexbox, jeste da nema više muke oko upotrebe clear: both; i float. To verujem da jeste arhaična metoda, koja se sa pojavom flexbox i ne koristi. Hvala još jednom na linkovima i savetima. Iako imam 52 godine, radujem se učenju i sticanju novog znanja. |
28.8.2020, 22:39 | #10 | |
Deo inventara foruma
Član od: 17.6.2011.
Poruke: 7.336
Zahvalnice: 94
Zahvaljeno 3.334 puta na 2.010 poruka
|
Re: Put učenja HTML/CSS
Citat:
Druga stvar koju ćeš veoma brzo shvatiti je sa kojom lakoćom Flexbox omogućava vertikalno i horizontalno centriranje sadržaja - nešto sa čime su se web developeri borili skoro dve decenije i dovijali se raznim trikovima (postavljanje fiksnog line-height-a, negativne margine ukombinovane sa translacijom itd.). Recimo, skoro sva vertikalna i horizontalna navigacija je nekada rađena floatovima. Float kontejneri, obično unordered lista (<ul>) sa <li> elementima unutar tog kontejnera, bi bili "levo floatovani" i naslagani jedno na drugo. Međutim, stara izreka kaže "ako imaš problem sa layoutom, ubaciš float da ga rešiš... sada imaš dva problema" Flexbox model je tu legao kao budali šamar - nešto što se pre toga rešavalo satima, ili čak danima, sada se rešava za minut-dva. CSS Grid model sa druge strane cilja tzv. "top-down" pristup. To znači da sa njime u startu razlišljaš o generalnom rasporedu elemenata na stranici, pa se kasnije radi ostalo (detalji). Neke stvari na početku mogu da budu malo nejasne ali jednom kad ovladaš Grid-om nikada se više nećeš vraćati praistoriji. I za kraj ovog zida teksta jedan savet odmah od početka. Nemoj da posmatraš Flexbox i Grid kao nešto što treba isključivo odvojeno koristiti. Grid i Flexbox su predviđeni da se međusobno kombinuju! Recimo, zaglavlje, sidebar sa strane, footer i glavni sadržaj odradiš Grid-om, a horizontalnu ili vertikalnu navigaciju (recimo glavni meni) Flexboxom. Kombinacija kao iz raja zamišljena. I još jednom, nemoj da se bojiš da će Flexbox i Grid bilo gde nestati. Ova dva standarda se tek učvršćuju i biće tu bar još desetak godina. Plus podrška za oba standarda se već bliži procentu od 97%+ korisnika. EDIT: Evo jednog korisnog linka ka YouTube materijalu. Neću previše ulaziti u to ko je Jen Simmons ali njeni Grid tutorijali se još uvek smatraju jednim od najboljih na Webu. https://www.youtube.com/channel/UC7T...nbDalbHplROtag |
|
28.8.2020, 23:01 | #11 |
Deo inventara foruma
Član od: 29.1.2008.
Poruke: 20.482
Zahvalnice: 433
Zahvaljeno 4.007 puta na 3.729 poruka
|
Re: Put učenja HTML/CSS
hvala i od mene dugo se nisam time bavio uznapredovala tehnologija
|
29.8.2020, 7:20 | #12 |
Član
|
Re: Put učenja HTML/CSS
@Neutrino Mnogo mi znače saveti koje si mi dao, nešto poput mentora. Nisam za ovo malo vremena koliko učim, nigde naišao na informaciju da grid i flexbox koristim zajedno i na koji način. A i nisam znao gde da potražim pomoć. Setio sam se ovog foruma juče. Hvala još jednom za trud i vreme koje si odvojio.
|
30.8.2020, 0:45 | #13 |
Deo inventara foruma
Član od: 17.6.2011.
Poruke: 7.336
Zahvalnice: 94
Zahvaljeno 3.334 puta na 2.010 poruka
|
Re: Put učenja HTML/CSS
Evo par resursa koji ti mogu biti korisni u toku učenja jer su direktno ili indirektno vezani za web razvoj.
Linkovi su bez nekog preteranog reda. Smashing Magazine Guides - odličan izvor resursa za web dizajn, podeljen po kategorijama Can I Use - statistika i informacije i podržanosti funkcionalnosti u browserima Screensiz.es - pregled tehničkih specifikacija ekrana uređaja, kada kreneš da radiš responsive dizajn Stat Counter - globalna statistika na webu (najčešće rezolucije ekrana, browseri itd.) DevDocs - odličan agregator dokumentacije za veliki broj tehnologija (uključuje i detaljna objašnjenja CSS atributa itd.) W3C - World Wide Web Consortium, srce web standarda - ako pređeš u naprednije vode ovo će ti biti česta referenca Unicode - sve o Unicode standardu, različitim pismima, kolacijama itd. neophodnih za multijezičku podršku na Web-u (ovo je malo napredniji materijal) Google Fonts - univerzalna riznica fontova koji mogu odmah da se koriste u web dizajnu stranica (veoma često korišćen resurs) Simple Icons - ogromna riznica besplatnih SVG simbola, kada počneš da koristiš SVG resurse ovo će ti biti čest resurs CodePen - za inspiraciju i pregled šta drugi autori dizajniraju, veoma interesantan izvor inspiracije Coolors - generator kolornih šema za web sajtove i aplikacije, od komplementarnih do komplikovanijih Colorsinspo - slično kao prethodno learncssgrid - još jedan odličan resurs za učenje CSS Grid-a awwwards - sajt za pronalaženje inspiracije |
30.8.2020, 3:14 | #14 | |
Deo inventara foruma
Član od: 24.10.2005.
Lokacija: ************
Poruke: 8.660
Zahvalnice: 2.261
Zahvaljeno 1.921 puta na 1.404 poruka
|
Re: Put učenja HTML/CSS
Citat:
|
|
30.8.2020, 20:00 | #15 | |
Deo inventara foruma
Član od: 17.6.2011.
Poruke: 7.336
Zahvalnice: 94
Zahvaljeno 3.334 puta na 2.010 poruka
|
Re: Put učenja HTML/CSS
Citat:
Responsive web design basics - tekstualna verzija sa jednostavnim primerom responsive dizajna Responsive Web Design Patterns - odličan kratak pregled najčešćih tehnika koje se koriste za transformaciju rasporeda sadržaja na različitim uređajima u responsive dizajnu Resposive Images by Google - odličan besplatan kurs koji potpuno zaokružuje temu korišćenja slika u responsive dizajnu (kurs zahteva besplatnu registraciju naloga) Responsive Web Design Tutorial in Adobe XD - kako započinje dizajn responsive sajta/aplikacije, objašnjen sa dizajnerske strane (AdobeXD može potpuno besplatno da se skine sa sledećeg linka - izabere se XD Starter Pack) Microsoft Visual Studio Code - bez preteranog zalaska u razloge zbog čega, editor koji preporučujem kao zdravu osnovu za efektivno učenje kodiranja, posebno frontenda (CSS, JavaScript itd.) Visual Studio Code for PHP Developers - besplatan kurs na Laracast-u koji u sitna crevca objašnjava kako podesiti Visual Studio Code za frontend i backend razvoj (nisu neophodne sve lekcije, možda prvih par samo). Poslednja ispravka: Neutrino (30.8.2020 u 20:07) |
|
31.8.2020, 21:36 | #16 |
V.I.P. Recenzent
Član od: 8.11.2008.
Lokacija: XV535
Poruke: 3.198
Zahvalnice: 767
Zahvaljeno 1.024 puta na 568 poruka
|
Re: Put učenja HTML/CSS
Stara kajla istresao iz rukava.
Hvala i od mene. Ja sam posle skoro sto godina posegao za PHP jer mi trebalo nešto oko GET zahteva da prepravljam. |
3.9.2020, 12:59 | #17 |
Član
|
Re: Put učenja HTML/CSS
Hvala mnogo za linkove i trud. Verujem da će još nekome osim mene koristiti.
|
4.9.2020, 0:11 | #18 | |
Deo inventara foruma
Član od: 14.3.2008.
Lokacija: EHCPCGG
Poruke: 12.111
Zahvalnice: 4.319
Zahvaljeno 3.295 puta na 2.274 poruka
|
Re: Put učenja HTML/CSS
@Moderatori, treba pinovati ovu temu, Neutrino se ubio oko objašnjenja i linkova.
Citat:
Za početak - sa flexboxom može da se uradi faktički sve i za početnike je odličan, kad se savlada flexbox može da se baci na grid. Bitan je način razmišljanja, analiziranje layouta i rastavljanje na elemente, i odabir pristupa. Generalno, @OP, HTML i CSS možeš da savladaš u roku od 2-3 meseca sasvim dovoljno da nakon toga možeš da kreneš dalje sa Javascriptom - samo se mani starih tutorijala, nađi moderne i nove članke i koristi reputabilne izvore da proveravaš informacije i cepaj. Neutrino ti je već išibao silne linkove... A što se responzivnog dizanja tiče - prvo pravilo koje početnici uvek nekako zaobiđu a koje je ključno: uvek kodiraj prvo za najmanji ekran koji treba da podržiš - posle ćeš lako da dopišeš CSS za veće ekrane. |
|
4.9.2020, 1:35 | #19 | ||||
Deo inventara foruma
Član od: 17.6.2011.
Poruke: 7.336
Zahvalnice: 94
Zahvaljeno 3.334 puta na 2.010 poruka
|
Re: Put učenja HTML/CSS
Citat:
Citat:
To u praksi znači da za razliku od recimo CSS Grid-a koji nudi punu podršku za postavljanje layouta u dve dimenzije (po "x" i "y" osi, tj. širini i visini) Flexbox može da radi samo sa jednom dimenzijom (tzv. "main axis") dok je podrška za drugu (poprečnu) tj. tzv. "cross axis" dimenziju dosta limitirana. Citat:
Plus, učenje Javascripta kao ubedljivo najpopularnijeg jezika za izradu interaktivnih aplikacija otvara vrata u daleko uzbudljiviji ekosistem u kojem vladaju Node.js, Deno pa i izuzetno popularne biblioteke i framework sistemi kao što su Angular, React, Vue itd. Citat:
Međutim, u poslednjih nekoliko godina "mobile first" pristup se sve više zamenjuje sa tzv. "journey driven" dizajnom koji umesto generalizovanja sadržaja, na kojem "mobile first" princip praktično insistira uvodi nešto što taj pristup nikada nije imao - kontekst. Journey driven dizajn se u prevodi specifično koncentriše na jedan zadatakm na jednu priču, na jedno "putovanje". To u praksi znači da umesto recimo klasičnog "mobile first" dizajna koji je prepucan sadržajem koji niko neće da čita (ko je ikada čitao "About" sekciju kompanija?) i koji treba da bude dostupan na što je moguće većem broju uređaja, "journey driven" dizajn se fokusira na recimo jednu jedinu stranicu sa formom, ukoliko se "putovanje" stranice zasniva na tome da stranica treba da proda nekakav proizvod. To takođe znači da ako je pirmarni cilj usluga koja je recimo dostupna isključivo na mobilnim uređajima (nekakav SaaS i sl.) fokus u dizajnu je skoro potpun na mobilne uređaje. |
||||
4.9.2020, 2:57 | #20 |
Deo inventara foruma
Član od: 14.3.2008.
Lokacija: EHCPCGG
Poruke: 12.111
Zahvalnice: 4.319
Zahvaljeno 3.295 puta na 2.274 poruka
|
Re: Put učenja HTML/CSS
Zanimljivo ali u suštini kad radiš u enterprise sektoru a zahteva se da app bude responsive to često znači samo da klijent želi pre svega da na telefonu vidi sve što i na računaru bez obzira na konačni UX. Što se tiče mog stava o tome - svakako se slažem sa tom filozofijom.
Znam da je LESS praktično mrtav ali je bio u pitanju codebase koji već koristi LESS pa smo migrirali i refaktorisali deo aplikacije. |
Bookmarks sajtovi |
Alatke vezane za temu | |
Vrste prikaza | |
|
|
Slične teme | ||||
tema | temu započeo | forum | Odgovora | Poslednja poruka |
Redosled učenja web jezika | Schnak3 | Programiranje | 10 | 1.12.2011 10:16 |
Slideshow u html/css | MrDzeri | Web razvoj | 8 | 12.6.2011 0:37 |