Webrebel 1: HTML, CSS & Javascript

Zpět na kurzy

Cena

4 849,00 KČ


nebo

4.9 z 5

Hodnocení

5x
93%
4x
4%
3x
4%
2x
0%
1x
0%

Všechny online kurzy za 6 699 KČ

Více info

Popis kurzu

Online kurz Webrebel 1 je první kompletní online kurz webdesignu. Kurz se skládá ze 3 modulů:

  1. HTML a CSS,
  2. Responzivní webdesign,
  3. JavaScript/jQuery.

Všechny tyto technologie jsou potřebné na tvorbu každé moderní webové stránky. Shlédni úvodní video kurzu, ve kterém ti lektor kurzu Webrebel Roman Hraška alias Yablko poví, co to je HTML a CSS, responzivní design, JavaScript a co všechno se v kurzu naučíš.

Co se naučím?

HTML a CSS jsou základem každého webu a jejich prostřednictvím tvoříme strukturu, obsah a design webu. Bez znalosti těchto dvou technologií není možné stát se plnohodnotným webdesignerem. HTML a CSS část kurzu Webrebel tvoří více než 40 videí a množství zadání a příkladů na doma. Tuto část kurzu od nás získáš zadarmo, stačí kliknou na “Vyzkoušej zdarma!” a dostaneš se k videím o HTML a CSS.

Druhá část kurzu Webrebel se věnuje responzivnímu designu. Díky responzivnímu designu budeš umět optimalizovat stránku pro mobilní zařízení. Stránky se budou uživatelům zobrazovat přehledně i na menších obrazovkách, na tabletech, nebo mobilech, a tím budou dostupnější. Responzivní design je dnes pro kvalitní weby standardem, protože již skoro polovina lidí navštěvuje stránky na svém mobilu nebo tabletu. Navíc Google ve svém algoritmu vyhledávání upřednostňuje webové stránky optimalizované pro mobily.

JavaScript a jQuery tvoří poslední modul kompletního kurzu webdesignu Webrebel. V této části kurzu se naučíš, jak svým webovým stránkám dodat interaktivitu, dynamiku přes animace a zjistíš, jak zvýšit jejich použitelnost. Kurz obsahuje úvod do programování v JavaScriptu, naučíš se co jsou proměnné, pole, objekty, funkce a metody. Naučíš se rozumět DOM modelu, naprogramuješ svůj vlastní jQuery plugin, budeš umět na svoji webovou stránku přidat Image Lightbox plugin, image slider nebo Prallax efekt. JavaScript a jQuery jsou technologie, které se staly nevyhnutelnou součástí moderních profesionálních webových stránek plných animací, vyskakovacích oken a interaktivity.

Co všechno dostanu?

  • Víc než 120 kvalitně zpracovaných video tutoriálů, což je víc než 25 hodin učiva
    • 40+ videí v části HTML a CSS,
    • 30+ videí v části Responzivní design,
    • 45+ videí v části JavaScript/jQuery,
  • Množství domácích úkolů, zadání a příkladů na procvičení jednotlivých témat,
  • Zdrojové kódy ke stažení,
  • Diskuzní fórum, ve kterém na tvé otázky ohledně kurzu odpovídá přímo lektor a tví spolužáci,
  • Časově neomezený přístup ke kurzu, můžeš studovat, kdy chceš a jak dlouho chceš,
  • 3 GB hosting The Hosting od WebSupportu na 3 měsíce zadarma,
  • Certifikát o absolvování kurzu akreditovaný Ministerstvem školství SR,
  • Garanci vrácení peněz, když nebudeš s kurzem spokojený/á.

Seznam kapitol kurzu Webrebel 1:

Část HTML a CSS:

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

+ BONUSové videá

Část Responzívny dizajn:

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

+ BONUSové videá

Část JavaScript/jQuery:

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

+ BONUSové videá