webdesign / development + awesome
Videokurz Webrebel: HTML a CSS, Responzívny dizajn, Javascript a jQuery
napísal yablko, 3 Dec 2014
Nový kurz WordPress pre programátora
Posledné mesiace som v tichosti pracoval na velikánskom videokurze, ktorý by pokryl základy font-end developmentu. To sú všetky tie HTMLká a CSSká a Javascripty. Výsledkom spolupráce s learn2code.sk je videokurz, ktorý pozostáva z dobrých 20 hodín videa, rozdelených do cca 115 nových videotutoriálov.
Viac info a samotný kurz na webrebel.sk / cz.
Z mojim predošlých kurzov a videí viete, že s všetko snažím vysvetliť zrozumiteľnou, uvoľnenou slovenčinou, nechcem, aby to znelo ako nudná technická príručka. Snažím sa vysvetľovať tak, ako keby si bol môj kamarát, čo sedí vedľa mňa, čumí mi do monitora a pýta sa otázky. Chcem, aby to bolo pokiaľ možno humorné, pretože keď sa povie programovanie, ľudia si predstavia nudu:) A toto nie je nuda:)
Na týchto videách som si dal extra záležať. Žiadne pauzy, žiadne "hmmmm", žiadne čakanie, kým napíšem 20 riadkov kódu, tieto videá šlapú jak guľa, hodiny a hodiny seriózneho makania:) A majú lepší obraz a ešte lepší zvuk:)
Nebudem nikoho bullshitovať - tieto videá sa predávajú. Ale predtým, než poviete "pffft, to ti já akurát tak móžem", pozrite na to, čo obsahujú. Pretože je toho kurva veľa:)
HTML a CSS
- 00: Začiatok HTML/CSS kurzu
- 01: Úvod do HTML, HTML tagy a prvá stránka
- 02: Doctype a kostra HTML dokumentu
- 03: Formátovanie textu v HTML
Toto sú iba niektoré zo stránok, ktoré vytvoríme v rámci HTML a CSS kurzu.
HTML a CSS sú síce absolútny základ, pilier, na ktorom všetko stojí a treba ich mať zmáknuté odpredu-odzadu. Avšak bez responzivity a Javascriptu sa plnohodnotné stránky už nezaobídu. A preto..
Responzívny webdizajn
- 01: Úvod do responzívneho webdizajnu
- 02: Static vs Liquid vs Adaptive vs Responsive
- 03: CSS media queries
- 04: Prerábka statického blogu na adaptívny dizajn - hlavička
Do Responzívneho dizajnu som zakomponoval nielen zaužívané postupy, ale aj novinky v HTML a CSS, ktoré sa používať ešte len začínajú - Flexbox layout modul, obrázky cez <img srcset> alebo nový HTML <picture> element. Obrázkom je venovaných niekoľko videí, pretože s nimi je to v tejto dobe mobilov a retín veľmo komplikované.
Javascript a jQuery
- 01: Úvod do JavaScriptu a jQuery
- 02: Úvod do programovania - Javascript konzola a premenné
- 03: Úvod do programovania - čísla a reťazce
- 04: Úvod do programovania - polia a objekty
S tým, že počet JS/jQuery kapitol sa rozrastie minimálne na dvojnásobok. Všetky videá budú vypustené na v januári nového roka, tieto Javascriptové práve teraz dokončujem. To je tiež dôvod, prečo stránka webrebel.sk / cz hovorí o 15+ hodinách a ja tu hovorím o 20-tich. Ešte neviem, kam presne to padne, ale je to v tomto rozmedzí a v každom prípade je to hodín veľa:) Edit: je to 20 hodín;) Javascript videí je nakoniec 45.
Tieto Javascript videá majú zmysel aj pre tých, čo sledovali môj Nauč sa jQuery seriál. Pretože aj keď koncepty stále platia, už má chudák nejaký ten rôčik. Tento kurz sa venuje novinkám v jQuery, všetko ukazuje na kompletne nových príkladoch a ukazuje koncepty a pricípy, ktorým sa prvý seriál vôbec nevenoval. Cieľ bol nepoužiť z pôvodného seriálu nič, spraviť všetko na novo a inak. Rozhodne nechcem, aby ste platili za niečo, čo ste už videli zadarmo.
Kompletný balíček všetkých videí stojí 99 eur a dá sa kúpiť na webrebel.sk / cz. Existujú aj lacnejšie a drahšie verzie, takže preskúmajte stránku a vyberte, čo vám sedí. Hlásiť sa môžete okamžite, všetky videá sa odomknú 8. janára 2015 a zostanú vám naveky.
Edit: pridali sme verziu ZDARMA - prvých 15 kapitol a ostatné si môžete dokúpiť.
Viac info o free verzii.
Bolo to naozaj veľa roboty, a ak sa môžem sám pochváliť, je to fakt kvalitný materiál:) Sú to moje najlepšie videá. Tak sa netoto a dajte si vianočný darček a naučte sa robiť stránky, čo sa budete:) A ak nie, dajte vianočný darček niekomu inému! A ak ani to nie, veľmi ocením, aj keď budete tento článok (prípadne odkazy na webrebel.sk / cz) zdieľať po všetkých tých facebookoch a podobných veciach:) Beriem ktorúkoľvek formu pomoci:)
Keď si to tak vezmete, 100 videí za 99 eur, to je ani nie euro na video. To sú tak 4 videá na jeden hambáč v mcdonalde a garantujem vám, že tieto sú výživnejšie:)
Ok, tak veselé Vianoce a dúfam, že tento rok medzi Die Hard a Mrázika zaradíte aj Webrebel videá:)
Edit: pridal som ukážky z kurzu, celé videá, na ochutnanie tu Ukážka WEBREBEL kurzu a tu a tu a na youtube. Na stránke tiež pribudli odpovede na často kladené otázky.
Edit: do komentárov som pridal vysvetlenie, prečo je kurz časovo obmedzený
50 komentárov
[ 
]
]
Nové videotutoriály
napísal yablko, 6 Jan 2014
V krátkosti - začal som točiť nové videotutoriály. Chcem prejsť cez základy (HTML, CSS, PHP, MySQL) k ďaľším technológiám, možno jazykom, postupom. Chcem spraviť seriál pre PHP framework Laravel, chcem dokončiť WordPress. Niektoré seriály chcem vydať, až keď budú hotové celé. Čas od času možno vydám video samostatne.
Chcem, aby vychádzali na novej stránke. Začal som na nej pracovať. Neviem, kedy bude hotová. Snáď čoskoro. Neviem, v akom poradí, v akej forme a ako často budú videá a seriály vychádzať. Treba tomu dať čas, treba sa zamyslieť, treba skúsiť, všetko sa uvidí. Niektoré seriály budú možno platené.
Teší ma úspech predošlých seriálov a som veľmi rád, že napriek dlhej odmlke sa stále nájdu ľudia, ktorí chcú viac. Ja tiež chcem. Baví ma to. Zároveň však dúfam, že neutečiete, ak si občas vypýtam nejaký peniaz:) Nie za všetky videá. Za niektoré. Spraviť niečo a spraviť to dobre, stojí naozaj veľa času. A toho voľného moc nazvyš nie je. Snáď sa dohodneme:) Sľubujem, že spravím všetko pre to, aby sa to prípadným platiteľom oplatilo.
Ďakujem za čakanie.
A ďakujem za pozornosť.
Keď budú novinky, podelím sa o ne. Tu alebo na twitteri. Aj keď teda tam budete musieť znášať kopu tutoriálov-sa-netýkajúcich žvástov, takže je to vás:)
Držte palce, nech to ide rýchlo.
[ 
]
]
Ako na responsive design
napísal blade, 10 Apr 2012
Responsive design je v poslednej dobe je tak omieľaný trend, že o ňom hovorí pomaly aj moja babka. V zásade ide o fajn koncept. Namiesto kódenia a udržiavania niekoľkých samostatných verzií stránky (normálnej desktopovej verzie a mobilnej verzie) sa spraví jedna s pár dodatočnými informáciami, vďaka ktorým sa stránka prispôsobí akémukoľvek (rozumnému) rozlíšeniu. Od mobilu až po FullHD display.
Otvorte si demo, pohrajte sa so šírkou prehliadača a hneď pochopíte.
Skôr, ako prejdem ku konkrétnemu kódu, by bolo vhodné povedať, prečo uprednostniť responsive design pred starším trendom mobilných verzií.
Nuž. V ideálnom prípade stačí responsive design vytvoriť pridaním pár riadkov CSSka, v horšom aj pár riadkami JavaScriptu (tj. robota na pár hodín). Mobilná verzia je proste iná verzia generovaná serverom. Čiže má samostatné HTML, CSS a zrejme aj JavaScripty. Ak chcete niečo pridať, musíte prepisovať obe verzie.
[ ]
]
CSSkové trojuholníky a bubliny
napísal blade, 13 Jul 2011
Počul som, že horíš nedočkavosťou vedieť ako robiť takéto bubliny s trojuholníkmi v CSS bez použitia obrázkov!
Hm, to znie ako riadna kravina, povedz mi o tom viac.
Nuž.. všetko to začalo obyčajným štvorcom, ktorý mal "border"...
[ ]
]
Rozuzlenie záhady CSS (s cicíkmi™)
napísal blade, 25 Apr 2011
Ako keby nestačilo, že žiadny browser sa nespráva celkom podľa (chaoticky prekomplikovanej) špecifikácie CSSka, občas máte tú česť naraziť na divné správanie, ktoré zámerne vytvorili jeho autori. Dnešný príklad -keď dáte obrázok do vnútra div elementu, na spodku sa vytvorí medzera. Prečo sa to deje a prečo by mi to malo vôbec vadiť?
Strihal som CSSko s dizajnom, kde má byť pod obrázkom aktuálne veľmi obľúbené "zloženie" za pozadie (ako vidíte na obrázočku vľavo hore). Tak si hovorím, že šak pohoda, spravím div s paddingom na spodku, v ktorom bude ako pozadie ten šedý cicík™ a posuniem celý div doľava. V tomto div-e by potom mohol byť hocijaký obrázok a bol by pekne ocicíkovaný.
.obrazok_s_cicikom {
float: left;
padding-bottom: 5px;
margin-bottom: 8px;
position: relative;
left: -6px;
background: transparent url('cicik.png') 0% 100% no-repeat;
}
No a tu prichádza zrada, cicík je posunutý o 3 pixely nižšie! Pôvodne som myslel, že to je nejaký bug browseru, ale ukázalo sa, že sa rovnako správa vo Firefoxe, Chrome, Opere a dokonca aj IE. Obrázok mal veľkosť 83, div 86. Tak skúšam vypínať bordery, paddingy, marginy, aj keď viem, že tam aj tak nie sú. Zo zúfalosti nahodím celý CSS reset a stále nič.
Po chvíli hľadania som sa dopátral k zaujímavému zisteniu. Obrázok natiahne div preto, že je braný ako inline element, ktorý sa snaží byť zarovno základnej čiary textu (baseline). Text je ale beťár a niektoré znaky má pod touto čiarou (malé "p", "q", "g", ...), takže div sa pre istotu roztiahne.
Divné. Obrázok síce nie je zrovna text, ale v podstate to dáva zmysel.
Čo sa s tým dá teda robiť? Buď spraviť z obrázku "nie-text" (.obrazok_s_cicikom img { display: block; }) alebo, ešte lepšie, nastaviť ho na najspodnejšiu úroveň textu (.obrazok_s_cicikom img { vertical-align: bottom; }).
Tak, tam máš záhada, práve si bola objasnená! Nabudúce si povieme niečo o ešte väčšej a častejšej záhade, o margin collapsingu.
[ ]
]
Praktické CSS3 praktiky
napísal yablko, 22 Nov 2010
Najprv sme si ukázali Esenciálne CSS tipy a triky, nasledovali Užitočné CSS tipy a triky a dnes si povieme čo to o CSS3.
CSS3 je nová špecifikácia, ktorá do CSS pridáva kopu efektov a srandičiek. A mnohé z nich radikálne uľahčujú dizajnérom život. Zatiaľ to nie je oficiálny štandard, čo niektorí chápu ako povolenie vystupovať proti jeho používaniu. Kravina, CSS3 je awesome a je použiteľné už dnes.
Fun fact: aby sa špecifikácia stala oficiálnym štandardom, musia ju plne podporovať dva prehliadače. CSS2.1, ktoré používate, nie je plne podporované žiadnym. Najbližšie k tomu má IE8 ;) (zdroj: remy sharp)
Realita je taká, že moderné prehliadače podporujú mnohé z CSS3 atribútov už dnes a kľudne ich môžete používať. Staršie prehliadače neznáme atribúty jednoducho odignorujú a svet sa nezrúti keď v IE ten tieň nebude ;)
Noviniek v CSS3 je veľa, reálne použiteľných je ich menej a my si ukážeme tie, ktoré v rámci brm používame najčastejšie. Ak budem v texte používať výraz "moderné prehliadače", myslím tým Operu, Firefox, Chrome a Safari. Sorry ostatní :)
Pozor: v starých prehliadačoch nasledovné efekty nemusia byť viditeľné. Ak je toto váš prípad, stiahnite si najnovšiu verziu svojho prehliadača, v tomto prípade je novšie prakticky vždy lepšie ;)
text-shadow: [px] [px] [px] [farba]
Tieň pod písmom patrí medzi tie subtílne efekty, ktoré je fajn mať, ale ak nie sú, nič závažné sa nestane. text-shadow podporujú všetky moderné prehliadače bez problémov už nejakú tú dobu a funguje asi takto:
brm brm brm
text-shadow: 2px 2px 3px #317392;
bla bla bla
text-shadow: -1px -1px 0px #ccc;
[ ]
]
Užitočné CSS tipy a triky
napísal yablko, 15 Nov 2010
Nedávno sme si ukázali esenciálne css tipy a triky, teda veci, ktoré potrebujete vedieť. Dnes si ukážeme užitočné css tipy a triky, teda veci, ktoré je fajn vedieť.
CSS reset
Čo: CSS reset je CSSko obsahujúce nastavenia, ktoré pomáhajú zabezpečiť kompatibilitu prehliadačov.
Prečo: veci, ktorým presne neurčíte ako majú vyzerať, prehliadač vykreslí podľa vlastného uváženia. A každý z nich môže uvažovať inak. Medzery medzi <p> môžu byť rôzne, veľkosti písma v <h1>...<h6> môžu byť rôzne, niektoré prehliadače môžu okolo obrázkov zobrazovať border atď. Použitím CSS resetu vytvoríte pre všetky prehliadače rovnakú štartovaciu pozíciu.
<p> v <div>, firefox má odsadenie, IE nie... zdroj obrázku
Ako: toto Eric Meyer's Reset (prípadne upravenú verziu) hodíte do svojho HTML pred ostatné CSSká, prípadne stačí skopírovať kód na začiatok svojho CSS súboru.
Čo dodať: Existujú aj resety od iných autorov, tento je však zrejme najpoužívanejší. Je to obyčajné CSS a je teda dobrý nápad si ho upraviť podľa vlastnej potreby. Nie vždy budete používať všetky elementy, ktorých štýly sú "resetované", takže ich môžete kľudne z resetu odstrániť a vo všeobecnosti si to upraviť ako len chcete.
Môžno si práve hovoríte "Toto je všetko pekné a fajn, ale..." a ja to plne chápem. Možno vám vyhovuje spôsob, akým prehliadače vykresľujú veci. Možno vám nevadí, že niektoré veci vyzerajú v IE trochu ináč. Možno máte dojem, že je to plno zbytočného kódu a že ak vám aj niečo bude prekážať, upravíte si to sami. A to je v poriadku. Je však dobré vedieť, že možnosť ako CSS reset existuje.
[ ]
]
