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

1. 00: Začiatok HTML/CSS kurzu
2. 01: Úvod do HTML, HTML tagy a prvá stránka
3. 02: Doctype a kostra HTML dokumentu
4. 03: Formátovanie textu v HTML

rozbaliť zvyšných 36 epizód

1. 04: Developer Tools a správne štruktúrovaný HTML kód
2. 05: HTML zoznamy - usporiadaný, neusporiadaný a definičný a šafrán
3. 06: Odkazy, linky, emaily a telefónne čísla
4. 07: Obrázky, rozmery obrázkov, obrázky v linkoch, hotlinking
5. 08: Formáty obrázkov, ktoré, kedy a ako použiť a redukcia veľkosti obrázkov
6. 09: Ako funguje načítanie a zobrazenie internetovej stránky
7. 10: Úvod do CSS, CSS vlastnosti, CSS selektory a deklarácie
8. 11: Špecifické CSS selektory, používanie Classov a IDčiek v CSS
9. 12: Úvod do typografie a kompletný redizajn stránky bez dotyku HTML súboru
10. 13: CSS box model a všetko je škatuľa
11. 14: Block level elementy, element DIV a skutočná šírka elementu
12. 15: Inline elementy, inline-block elementy, element SPAN
13. 16: 3 spôsoby pridávania farieb v CSS
14. 17: Typografia, webové fonty a štýlovanie textu v CSS
15. 18: Základná štruktúra HTML stránky a validácia HTML kódu
16. 19: Dizajn blogu - základný layout a hlavička
17. 20: Dizajn blogu - hlavný obsah
18. 21: Dizajn blogu - pätička a finálne úpravy
19. 22: CSS kaskáda, špecificita selektorov
20. 23: Tok dokumentu, pozícia elementov v dokumente a CSS clear float
21. 24: Layout stránky pomocou CSS float, CSS float contain
22. 25: Pozícia elementov pomocou CSS position: relative a position: absolute
23. 26: z-index, position: fixed a ako vycentrovať position: absolute element
24. 27: CSS background, base64 zakódované obrázky
25. 28: Úvod do CSS3, CSS3 prefixy a CSS3 gradienty
26. 29: CSS sprites a CSS3 multi-background
27. 30: Štýlovanie HTML zoznamov
28. 31: CSS reset, CSS normalize, úvod do HTML formulárov
29. 32: Štýlovanie HTML formulárov
30. 33: Štýlovanie HTML tabuliek
31. 34: Spätná kompatibilita so starými prehliadačmi
32. 35: Finálny projekt - dizajnovanie stránky portfólia - 1. časť
33. 36: Finálny projekt - dizajnovanie stránky portfólia - 2. časť
34. 37: Facivons, ďalšie HTML meta tagy
35. 38: Koniec HTML/CSS kurzu

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

1. 01: Úvod do responzívneho webdizajnu
2. 02: Static vs Liquid vs Adaptive vs Responsive
3. 03: CSS media queries
4. 04: Prerábka statického blogu na adaptívny dizajn - hlavička

rozbaliť zvyšných 28 epizód

1. 05: Prerábka statického blogu na adaptívny dizajn - hlavný obsah
2. 06: Prerábka statického blogu na adaptívny dizajn - pätička a finiš
3. 07: Viewport, meta viewport na nastavenie šírky zariadenia
4. 08: Box-sizing: border-box, CSS funckia calc()
5. 09: Revolučný vzorec pre responzívnu revolúciu, mockups, dizajnovanie v prehliadači
6. 10: Jednotka em, responzívna typografia
7. 11: Layout pomocou jednotky em
8. 12: Mobile First prístup a responzívne obrázky
9. 13: Dokončenie mobile first stránky a 3 praktické tipy pre responzívny kód
10. 14: Redizajn statického portfólia do responzívneho layoutu - úvodné nastavenia
11. 15: Redizajn statického portfólia do responzívneho layoutu - elastická hlavička
12. 16: Redizajn statického portfólia do responzívneho layoutu - elastický obsah a pätička
13. 17: Redizajn statického portfólia do responzívneho layoutu - media queries part 1
14. 18: Redizajn statického portfólia do responzívneho layoutu - media queries part 2
15. 19: Reponzívna navigácia, používanie jQuery pluginov na štýlovanie formulárov
16. 20: CSS3 Transforms, CSS3 Transitions
17. 21: CSS Bootstrap Part 1
18. 22: CSS Bootstrap Part 2
19. 23: Úvod do CSS Grid systémov, Bootsrap Grid CSS
20. 24: Dokončenia Bootstrap gridu, tvorba vlastného CSS grid systému
21. 25: CSS display: table
22. 26: Flexbox, CSS display: flex
23. 27: Flexbox, responzívny layout cez display: flex
24. 28: Obrázky v dobe responzíveho dizajnu a Retiny
25. 29: Vektorové obrázky, nový img srcset atribút, nový HTML picture element
26. 30: Best practices pre responzívne obrázky, figure a figcaption HTML elementy
27. 31: Background stránky cez responzívny obrázok, Background stránky cez video
28. 32: Koniec Responsive Webdesign kurzu

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

1. 01: Úvod do JavaScriptu a jQuery
2. 02: Úvod do programovania - Javascript konzola a premenné
3. 03: Úvod do programovania - čísla a reťazce
4. 04: Úvod do programovania - polia a objekty

rozbaliť zvyšných 41 epizód

1. 05: Úvod do programovania - funkcie a metódy
2. 06: Document Object Model, reprezentácia HTML kódu v prehliadači, vzťahy medzi elementami
3. 07: jQuery, pridanie knižnice do stránky lokálne alebo cez CDN
4. 08: Úvod do jQuery animácií a reťazenie metód
5. 09: jQuery metódy, getter/setter princíp
6. 10: Vlastné jQuery animácie
7. 11: Javascripty v hlavičke vs. na konci HTML body elementu
8. 12: Document ready funkcia, kompatibilita jQuery s inými Javascript knižnicami
9. 13: Úvod do Javascript eventov / udalostí
10. 14: Traverzovanie po DOM (Document Object Model)
11. 15: Akordeón efekt, jQuery event object
12. 16: Manipulácia s DOM, vytváranie a mazanie HTML elementov
13. 17: Manipulácia s DOM časť druhá, pokročilé jQuery selektory
14. 18: Eventy, event listener, event handler, vybublávanie, delegácia
15. 19: Event object, podmienky, ternárny operátor, zastavenie animácií, príprava na Lightbox
16. 20: jQuery Image Lightbox #1
17. 21: jQuery Image Lightbox #2
18. 22: Animácia scrollovania #1
19. 23: Animácia scrollovania #2, Javascript callback funkcie
20. 24: Späť na vrch, ako pán!
21. 25: jQuery image slider, menič obrázkov
22. 26: jQuery image slider, časť druhá
23. 27: Javascript object literal pattern
24. 28: Slider ako object literal pattern s nastaveniami od usera cez jQuery.extend()
25. 29: Pokročilé jQuery animácie #1 - spolupráca jQuery a CSS3
26. 30: Pokročilé jQuery animácie #1 - animovanie farieb
27. 31: Galéria obrázkov rozdelená na viac strán
28. 32: CSS3 animovaná galéria, HTML5 data atribúty, práca so stringami v Javascripte
29. 33: Dokončenie galérie, Javascript Prototype, tajné dáta cez jQuery.data()
30. 34: Viacstránková galéria cez AJAX, princíp Request-Response
31. 35: AJAXová galéria pomocou jQuery.load() metódy
32. 36: Vylepšenie AJAX galérie cez jQuery.ajax() metódu
33. 37: Pokročilý AJAX - asynchrónny javascript, JSON, princíp promises a metóda jQuery.each()
34. 38: Interface knižnica jQuery UI, jej metódy a eventy
35. 39: jQuery UI Slider, Tooltip, pokročilé používanie UI komponentov a komunikácia medzi nimi
36. 40: Úvod do jQuery pluginov
37. 41: Vlastný jQuery lightbox plugin
38. 42: Dokončenie jQuery pluginu, aby mal schopnosť prijímať nastavenia od usera
39. 43: jQuery Parallax efekt
40. 44: jQuery Parallax efekt, časť druhá a taktiež ba priam posledná
41. 45: Záver webdesigner kurzu

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ý