Webrebel 1: HTML, CSS & Javascript

Zpět na kurzy

Všechny ONLINE kurzy

od 649,00 KČ / měsíc


nebo

4.9 z 5

Hodnocení

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

Všechny online kurzy za 7 690 KČ

Více info

Course duration 23h 19m 36s
Course chapters 164 kapitol
Course difficulty Začátečník

Popis kurzu

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

  • HTML a CSS,
  • Responzivní webdesign,
  • JavaScript/jQuery.

Všechny tyto technologie jsou potřebné pro 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čí kliknout 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:

  • Začátek HTML/CSS kurzu
  • Úvod do HTML, HTML tagy a první stránka
  • Instalujeme Sublime Text 3
  • Doctype a kostra HTML dokumentu
  • Formátování textu v HTML
  • Developer Tools a správně strukturovaný HTML kód
  • HTML seznamy – uspořádaný, neuspořádaný, definiční a šafrán
  • Odkazy, linky, emaily a telefonní čísla
  • Obrázky, rozměry obrážků, obrázky v lincích, hotlinking
  • Formáty obrázků, které, kdy a jak použít a redukce velikosti obrázků
  • Jak funguje načítání a zobrazení internetové stránky
  • Úvod do CSS, CSS vlastnosti, CSS selektory a deklarace
  • Specifické CSS selektory, používání Class a ID v CSS
  • Úvod do typografie a kompletní redesign stránky bez dotyku HTML souboru
  • CSS box model a všechno je krabice
  • Block level elementy, element DIV a skutečná šířka elementu
  • Inline elementy, inline-block elementy, element SPAN
  • 3 Způsoby přidávání barev v CSS
  • Typografie, webové fonty a stylování textu v CSS
  • Základní struktura HTML stránky a validace HTML kódu
  • Design blogu - základní layout a hlavička
  • Design blogu - hlavní obsah
  • Design blogu - patička a finální úpravy
  • CSS kaskáda, specifika selektorů
  • Tok dokumentu, pozice elementů v dokumentu a CSS clear float
  • Layout stránky pomocou CSS float, CSS float contain
  • Pozice elementů pomocí CSS position: relative a position: absolute
  • Z-index, position: fixed a jak vycentrovat position: absolute element
  • CSS background, base64 zakódované obrázky
  • Úvod do CSS3, CSS3 prefixy a CSS3 gradienty
  • CSS sprites a CSS3 multi-background
  • Stylování HTML seznamů
  • CSS reset, CSS normalize, úvod do HTML formulářů
  • Stylování HTML formulářů
  • Stylování HTML tabulek
  • Zpětná kompatibilita se starými vyhledavači
  • Finální projekt - designování stránky portfolia - 1. část
  • Finální projekt - designování  stránky portfólia - 2. část
  • Facivons, další HTML meta tagy
  • Konec HTML/CSS kurzu

+ BONUSová videa

Část Responzivní design:

  • Úvod do responzivního webdesignu
  • Static vs Liquid vs Adaptive vs Responsive
  • CSS media queries
  • Předělávka statického blogu na adaptivní design - hlavička
  • Předělávka statického blogu na adaptivní design - hlavní obsah
  • Předělávka statického blogu na adaptivní design - patička a finiš
  • Viewport, meta viewport na nastavení šířky zařízení
  • Box-sizing: border-box, CSS funkce calc()
  • Revoluční vzorec pro responzivní revoluci, mockups, designování v prohlížeči
  • Jednotka em, responzivní typografie
  • Layout pomocí jednotky em
  • Mobile First přístup a responzivní obrázky
  • Dokončení mobile first stránky a 3 praktické tipy pro responzivní kód
  • Redesign statického portfólia do responzivního layoutu - úvodní nastavení
  • Redesign statického portfólia do responzivního layoutu - elastická hlavička
  • Redesign statického portfólia do responzivního layoutu - elastický obsah a patička
  • Redesign statického portfólia do responzivního layoutu - media queries part 1
  • Redesign statického portfólia do responzivního layoutu - media queries part 2
  • Responzivní navigace, používání jQuery pluginů na stylování formulářů
  • CSS3 Transforms, CSS3 Transitions
  • CSS Bootstrap Part 1
  • CSS Bootstrap Part 2
  • Úvod do CSS Grid systémů, Bootsrap Grid CSS
  • Dokončení Bootstrap gridu, tvorba vlastní CSS grid systému
  • CSS display: table
  • Flexbox, CSS display: flex
  • Flexbox, responzivní layout přes display: flex
  • Obrázky v době responzivního designu a Retiny
  • Vektorové obrázky, nový img srcset atribut, nový HTML picture element
  • Best practices pro responzivní obrázky, figure a figcaption HTML elementy
  • Background stránky přes responzivní obrázek, Background stránky přes video
  • Konec Responsive Webdesign kurzu

+ BONUSová videa

Část JavaScript/jQuery:

  • Úvod do JavaScriptu a jQuery
  • Úvod do programování - Javascript konzole a proměnné
  • Úvod do programování - čísla a retězce
  • Úvod do programování - pole a objekty
  • Úvod do programování - funkce a metody
  • Document Object Model, reprezentace HTML kódu v prohlížeči, vztahy mezi elementy
  • jQuery, přidání knihovny do stránky lokálně nebo přes CDN
  • Úvod do jQuery animací a řetězení metod
  • jQuery metody, getter/setter princip
  • Vlastní jQuery animace
  • Javascripty v hlavičce vs. na konci HTML body elementu
  • Document ready funkce, kompatibilita jQuery s jinými Javascript knihovnami
  • Úvod do Javascript eventů / událostí
  • Traverzování po DOM (Document Object Model)
  • Akordeón efekt, jQuery event object
  • Manipulace s DOM, vytváření a mazání HTML elementů
  • Manipulace s DOM část druhá, pokročilé jQuery selektory
  • Eventy, event listener, event handler, vybublávání, delegace
  • Event object, podmínky, ternární operátor, zastavení animací, příprava na Lightbox 20: jQuery Image Lightbox #1
  • jQuery Image Lightbox #2
  • Animace scrollování #1
  • Animace scrollování #2, Javascript callback funkcie
  • Zpět na vrch jako pán!
  • jQuery image slider, měnič obrázků
  • jQuery image slider, část druhá
  • Javascript object literal pattern
  • Slider ako object literal pattern s nastaveními od uživatele přes jQuery.extend()
  • Pokročilé jQuery animace #1 - spolupráce jQuery a CSS3
  • Pokročilé jQuery animace #1 – animování barev
  • Galerie obrázků rozdělená na více stran
  • CSS3 animovaná galerie, HTML5 data atributy, práce se stringy v Javascripte
  • Dokončení galerie, Javascript Prototype, tajné data přes jQuery.data()
  • Vícestránková galerie přes AJAX, princip Request-Response
  • AJAXová galerie pomocí jQuery.load() metody
  • Vylepšení AJAX galerie cez jQuery.ajax() metodu
  • Pokročilý AJAX - asynchronní javascript, JSON, princip promises a metoda jQuery.each()
  • Interface knihovna jQuery UI, jej metody a eventy
  • jQuery UI Slider, Tooltip, pokročilé používaní UI komponentů a komunikace mezi nimi
  • Úvod do jQuery pluginů
  • Vlastní jQuery lightbox plugin
  • Dokončení jQuery pluginu, aby měl schopnost přijímat nastavení od uživatele
  • jQuery Parallax efekt
  • jQuery Parallax efekt, část druhá a též poslední
  • Závěr webdesigner kurzu

+ BONUSová videa

Kurz je možné vyzkoušet i zdarma!