Učenje: HTML/CSS


#1

Kako je učenje vještina i međusobno pomaganje jedna od tema kojoj bih volio da posvetimo prostora na forumu (a možda u budućnosti i na nekim open source statičnim stranicama), otvaram prvu temu u “učenje” serijalu. Počinjemo s HTML-om i CSS-om – osnovnim jezicima naših internetskih preglednika. Tema je početnička, ali nadam se da će i za iskusnije čitatelje biti korisnih informacija za +1 :up: :mushroom: :wink:

Znači da sasvim kratko definiramo, HTML je jezik za zadavanje sadržaja stranice (sam tekst, naslovi, podnaslovi, da li je nešto podebljano ili u kurzivu), a CSS je jezik za postavljanje izgleda tog sadržaja (koje je boje poveznica, kolika je margina…).

Zašto naučiti HTML/CSS?

Danas se puno cool projekata može pokrenuti već kao obična statična web stranica, pogotovo s lakim ugrađivanjem stvari poput YouTube videa, SoundCloud glazbe, Disqus komentara… Super mi je primjer stranica Prescious Plastic koja uči ljude kako reciklirati plastiku u upotrebljive predmete koristeći više-manje kućne materijale. Kod za tu stranicu je open source i dostupan na GitHubu (HTML/CSS je i inače dostupan ako desno-kliknete na bilo koju stranicu pa odaberete “pokaži izvorni kod stranice”, ali nekad je te stvari na Gici lakše čitati :slight_smile: ). Od web stranice i puno sadržaja, čovjek je napravio fenomenalnu stvar.

Web stranica može biti i neki aktivistički pokret ili super cool portfolio za dobivanje posla.

Također, to je dobar prvi korak prema programiranju nekih kompleksnijih aplikacija.

Kako naučiti HTML/CSS?

Prvo i osnovno – samo gradite stranice! (engl. just build websites!), što je ujedno i moto super podcasta o frontend web developmentu (koji uključuje i HTML/CSS) Shop Talk Showa (kojeg se isplati slušati i čak proći kroz poneku stariju snimku u arhivi). Ideja je, najbolje ćete učiti ako pokušavate izgraditi neki veći projekt, neku web stranicu za sebe, prijatelje, neku dobru svrhu… Takav će cilj usmjeriti vaše učenje na samo one stvari koje vam trebaju (jer se inače lako izgubiti u moru informacija).

Update: Mislim da novi tečaj “Interneting is hard” ipak zaslužuje prvo mjesto zbog zbilja prekrasno ilustriranih primjera i jasnih uputa koji uključuju sve od razumijevanje osvnovnih koncepata do savladavanja korištenja uređivača teksta i web preglednika za izradu web stranica.

Od svih besplatnih materijala za potpune početnike koje znam, CodeAcademyjev tečaj osnova weba mi se čini najpristupačniji (recite ako znate za nešto zabavnije).

Kao priručno sredstvo bih preporučio i video-serijal Don’t Fear the Internet za dizajnere koji žele razumjeti web, jer su objašnjenja dosta intuitivna. Ovo je npr. prva lekcija o raspoređivanju elemenata CSS-om:

Uz dobar tekst editor za pisanje HTML-a i CSS-a, gotovo je neophodno dobro znati koristiti alate za programiranje vašeg internetskog preglednika kako bi lako pronašli greške i igrali se s raznim opcijama. Za Chrome Dev Tools postoji odličan besplatan tečaj na CodeSchoolu kojeg svakako preporučam!

Dodatni materijali za učenje HTML-a i CSS-a (neki linkovi preuzeti s Awesome CSS-a, jedne grane Awesome projekta za prikupljanje “sjajnih” linkova):

  • Jako kvalitetni materijali mogu se pronaći na Mozilla Developer Network stranicama – upute za početnike, ali i reference za iskusne programere.
  • CSS Tricks je neka vrsta zajednice CSS stručnjaka koja pokriva puno tema u “almanaku” o pojedinim opcijama i nudi puno video primjera gdje Chris i ekipa objašnjavaju kako najbolje raditi web stranice. Jedan stari, ali još uvijek poučan serijal u tri dijela o pripremi dizajna u Photoshopu i pretvaranju u CSS (pa u Wordpress temu) mi je bio dosta zanimljiv.
  • CSS Zen Garden je odlična (nedavno modernizirana) kolekcija različitih CSS dizajnova primijenjenih na isti početni HTML.
  • izvrsni interaktivni tečaji/igrice za izvrsne nove CSS standarde – flexbox i CSS grid
  • Bootstrap je Twitterov kostur za brzo sastavljanje responzivnih stranica (koje dobro izgledaju i na mobitelima i na stolnim računalima) bez puno znanja o CSS-u – dovoljno je koristiti osnovni HTML.
  • Izbjegavajte w3schools, jer su im materijali zastarjeli (iako i dalje često još ispadaju na vrh pri googlanju).

Nekoliko naprednijih tema:

  • BEM i SMACSS su stilske preporuke za strukturiranje većih CSS projekata
  • Sass je vjerojatno najpopularniji pretprocesor koji podržava varijable za postavljanje sustava boja na samo jednom mjestu i ugnježđivanje pravila
  • Yeoman webapp je prilično dobar generator početne web stranice s puno cool alata za lakše programiranje – automatsko osvježavanje preglednika, lako dodavanje biblioteka koristeći Bower itd. Formula F1…

Imate li još neka pitanja ako ste početnik? Ako držite HTML/CSS u malom prstu, znate li još neke dobre materijale za učenje HTML-a/CSS-a? Kakva su bila vaša iskustva pri učenju? Kako obično pristupate dizajnu web stranice?


Učenje: JavaScript
Twitch.tv screencastanje
Gašenje Interneta 12.7