Webařina je poměrně zábavná činnost, pokud se nebojíte číst manuály, tutoriály a pokud si ty rady umíte vzít k srdci (případně ke klávesnici). Po internetu se povaluje množství zajímavých zdrojů, z nichž se můžete poměrně dobře vzdělat. Člověk, který se do tvorby webů chce pustit, by měl mít vytrvalost, měl by být kreativní v pátrání po odpovědích na otázky a měl by poznat, který článek mu přinese potřebné informace a který jen plácá bahno a obsahuje chyby v kódu. Nebojte se procházet fóra a vyhledávat odpovědi na váš dotaz a doporučuji číst komentáře pod článkem, kde se mnohdy dozvíte ještě něco navíc, nebo třeba jen to, že autor je další lempl, který text jenom zkopíroval, ale už nezkoušel funkčnost svého ukradeného řešení.

Než někdo z vás začne s webem, měl by si uvědomit, že to chce čas na pochopení jazyka, kterému se bude chtít věnovat. Já třeba neprogramuji tak, jak to znáte. Jenom si patlám své starodávné html, css, sem tam php a nějaký ten javascript. Už teď vím, že mi to přestává stačit. Vy, pokud teprve přistupujete ke svému prvnímu tagu, rozhodně neopomeňte základy. Základem myslím prosté html, které je dostatečně jednoduché na vstřebání a až tohle zvládnete, začněte s CSS, protože bez externího stylopisu se u větších webů neobejdete. Jsou lidé, kteří rovnou skočí např. k php a pak se nachytají u toho, že vlastně nerozumí naprosto ničemu. Nebudu vás zbytečně vodit za ručičku. Další kroky zvládnete levou zadní.

Předhodím vám sem pár nástrojů, které se vám možná budou hodit. Každému však může vyhovovat něco jiného a tak to neberte dogmaticky.

Edit: časem se může úroveň webů měnit a některé samozřejmě mohou i zmizet v propadlišti internetu. Zde uvedené informace tedy platí v době uvedení článku.

Notepad++

Textový editor nabízející poměrně dobré featurky. Co vše obsahuje najdete přímo na domovské stránce. Použila jsem ho jako náhradu za PSPad v době, kdy nebylo třeba nějakého zvláštního počítačového voodoo k upravování staré verze webu.

Aptana Studio

Free editor na úrovni PHPEditu (subj. názor). Kompletní vývojářské prostředí pro náročnější uživatele. K tomuto programu existuje množství pluginů, které vám umožní pracovat například i s jQuery (javascriptový framework), Pythonem, Ajaxem, Ruby on Rails, PHP atd. Ostatně přesvědčit se můžete sami, minimálně zkouknutím domovské stránky. Hodí se v případě, že nemáte v kapse potřebný peníz na licenci pro komerční software (tedy např. freelancerům do začátků), ale nutně potřebujete vyvíjet pro klienty.

NetBeans

V roce 2010 jsem objevila síťové fazolky. Protože mohu soubory upínat přímo přes ně, netáhnou se tak jako Aptana a mají vše, co zatím potřebuji, nechala jsem si je.

Firebug

Je rozšíření pro Firefox, díky němuž budete moci procházet strukturu kódu a odhalovat chyby. Využívám ho celkem často při zkoumání struktury webů od profíků a vybíráním bugů z kožichu kódu.

Web Developer

Další z kvalitních rozšíření pro váš prohlížeč, který bych vám ráda doporučila, je Web Developer. Umožní vám měnit velikost okna pro náhled webu v nižším rozlišení, zobrazovat zdrojový kód, orámovat různé prvky designu, zkoumat layout a jeho strukturu od A do Z, pracovat s cookies, formuláři, obrázky apod. Umí toho hodně a může být tedy dobrou náhražkou různých pluginů.

Učíme se datlovat srozumitelný kód:

Nyní by to chtělo pár zdrojů pro pochopení samotného kódu, struktury webu a hlavně jakousi knihovnu tagů, kde bude vše přehledně uspořádáno a vysvětleno. Začnu webem, který možná už znáte. Jedná se o W3 Schools a obsahuje tutoriálové seriály pro HTML, CSS, XML a další, pěkně řazené dle obtížnosti. Věřím, že by vám tato stránka mohla dát do začátku množství informací. Dále přijde nostalgické vzpomenutí na Jak psát web (pozor, informace zde uvedené jsou již notně za zenitem, dnes tu máme HTML5 a CSS3, ale jsou užitečné), znovuseznámení s českým portálem Tutorials.cz a potom se budu zabývat trošku náročnějšími weby, věnujícími se řešení konkrétních elementů na vaší nové stránce. Jsou to zdroje, které sem tam navštívím a použiji některé jejich techniky u svého vlastního webu. Nikde neříkám, že tohle musíte procházet a vše číst, ale pokud shledáte některou stránku užitečnou, autoři budou rádi, že si jejich dílo hoví ve vašich záložkách.

W3 Schools

Tutoriály, které vás naučí „chodit“.

Jak psát web

Starodávný web, který jsem četla ve svých kodérských začátcích a díky skleróze čtu i dnes.

Tutorials.cz → TutoriArts.cz (2011)

Seriály o tvorbě webu, kódování layoutu a spousta dobrých rad.

CSS Tricks

Web nejen o CSS. Tematické články a programování included. Zdrojové soubory ke stažení.

CSS Play

Efektivní layouty a menu za pomoci kaskádových stylů, odladěná řešení.

Zdroják

Český portál pro vývojáře.

Ajaxian

Množství témat nejen z webdeveloperského prostředí. Kvanta tutoriálů a informací.

Net tuts +

Kvalitní tutoriály z různých oblastí programování.

Build !nternet

Tutoriály a praktické rady jak vylepšit design a kód.

Smashing magazine

Inspirativní články, sbírky designů, logotypů, nápadů. Tutoriály a grafika ke stažení a volnému použití.

jQuery

Javascriptový framework, který dodá vašemu webu potřebnou šťávu, určitě ho neváhejte prozkoumat blíže.

Janko at warp speed

Tutoriály převážně pro CSS a jQuery javascriptový framework. Najdete zde i recenze a hlavně tipy a triky pro vaše stránky.

Snipplr

Repozitář zdrojových kódů.

Závěrem:

Neřadím odkazy podle relevance, ale spíše od úplných základů, přes stylopisy až po rozsáhlé portály o věcech tajemných. Ke konci najdete i nějaký ten blog. Repozitář výstřižků kódů je jen taková drobná třešínka, kterou pravděpodobně využijete, až budete něco umět, nevím, jestli u takových repozitářů existuje nějaká kontrola vkládaných scriptů atd. tudíž tady doporučuji rozvahu. Co se týká Smashing magazínu, nepatří mezi stránky, ze kterých bych byla takříkajíc vedle (stejně jako mě neoslňuje mnohými opěvované Abduzeedo), ale občas tam najdu něco, co se mi hodí do krámu. Časem budete mít vlastní sbírku oblíbených stránek, které vám pomáhají při webařině a třeba tam nebude ani jedna z výše zmíněných. I tohle je dost individuální, tak to tak berte. A jinak – enjoy.