Nebo objednat jen tento kurz za 4 849,00 Kč

Webrebel 1: HTML, CSS & Javascript

28h 49m 18s
Čas
230
Kapitol
24 316
Studentů
4.9
Hodnocení
Začátečník
Level
slovenský
Jazyk kurzu

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š,
  • Garanci vrácení peněz, když nebudeš s kurzem spokojený/á.
Online kurz Webrebel 1: HTML, CSS & Javascript je možné

Seznam kapitol

Úvod HTML/CSS
00: Začiatok HTML/CSS kurzu
Dostupné v ukážke kurzu
01: Úvod do HTML, HTML tagy a prvá stránka
Dostupné v ukážke kurzu
Tipy, rady a pravidlá pre každý kurz
Dostupné v ukážke kurzu
Sublime Text - nastavenia, časté otázky
Nepoužívaj Sublime Text
Dostupné len po zakúpení prístupu
Inštalujeme Sublime Text 3
Dostupné v ukážke kurzu
Sublime Text 01: Ak ti Sublime robí problémy a rady na úvod
Dostupné len po zakúpení prístupu
Sublime Text 02: Ak ti nastavenia a package fungujú inak ako mne
Dostupné len po zakúpení prístupu
Sublime Text 03: Ak ti package vôbec nejdú nainštalovať, klávesové skratky, mágia
Dostupné len po zakúpení prístupu
HTML
02: Doctype a kostra HTML dokumentu
Dostupné v ukážke kurzu
03: Formátovanie textu v HTML
Dostupné v ukážke kurzu
06: Odkazy, linky, emaily a telefónne čísla
Dostupné v ukážke kurzu
Domáca úloha #1
Dostupné len po zakúpení prístupu
BONUS: zákutia formátovania HTML #1
Dostupné v ukážke kurzu
CSS
Kde ma nájdeš, yablko na www internetoch
Dostupné len po zakúpení prístupu
13: CSS box model a všetko je škatuľa
Dostupné v ukážke kurzu
BONUS: zákutia formátovania HTML #2
Dostupné v ukážke kurzu
16: 3 spôsoby pridávania farieb v CSS
Dostupné v ukážke kurzu
Domáca úloha #2
Dostupné len po zakúpení prístupu
Domáca úloha #2 a pol
Dostupné len po zakúpení prístupu
Kompletný dizajn stránky
19: Dizajn blogu - základný layout a hlavička
Dostupné v ukážke kurzu
20: Dizajn blogu - hlavný obsah
Dostupné v ukážke kurzu
21: Dizajn blogu - pätička a finálne úpravy
Dostupné v ukážke kurzu
BONUS: cesty k súborom, developer tools
Dostupné v ukážke kurzu
CSS Layout stránky
22: CSS kaskáda, špecificita selektorov
Dostupné v ukážke kurzu
Domáca úloha #3
Dostupné len po zakúpení prístupu
BONUS: čím menej floatov, tým lepšie
Dostupné v ukážke kurzu
27: CSS background, base64 zakódované obrázky
Dostupné v ukážke kurzu
Nemusíš všetko (+ frustrujúce úlohy)
Dostupné len po zakúpení prístupu
CSS 3
28: Úvod do CSS3, CSS3 prefixy a CSS3 gradienty
Dostupné v ukážke kurzu
29: CSS sprites a CSS3 multi-background
Dostupné v ukážke kurzu
30: Štýlovanie HTML zoznamov
Dostupné v ukážke kurzu
Domáca úloha #4
Dostupné len po zakúpení prístupu
32: Štýlovanie HTML formulárov
Dostupné v ukážke kurzu
Domáca úloha #5
Dostupné len po zakúpení prístupu
33: Štýlovanie HTML tabuliek
Dostupné v ukážke kurzu
BONUS: vzťahy medzi elementami
Dostupné v ukážke kurzu
34: Spätná kompatibilita so starými prehliadačmi
Dostupné v ukážke kurzu
Záver HTML/CSS
BONUS: CSS dedenie a nededenie
Dostupné v ukážke kurzu
37: Favicons, ďalšie HTML meta tagy
Dostupné v ukážke kurzu
38: Koniec HTML/CSS kurzu
Dostupné v ukážke kurzu
Websupport ZDARMA na 3 mesiace 2018 edišn!
Dostupné len po zakúpení prístupu
BONUS: Websupport hosting a FTP nahrávanie súborov
Dostupné v ukážke kurzu
Úvod do Responsive dizajnu
01: Úvod do responzívneho webdizajnu
Dostupné v ukážke kurzu
02: Static vs Liquid vs Adaptive vs Responsive
Dostupné v ukážke kurzu
03: CSS media queries
Dostupné len po zakúpení prístupu
Statický vs. Responzívny dizajn
04: Prerábka statického blogu na adaptívny dizajn - hlavička
Dostupné len po zakúpení prístupu
05: Prerábka statického blogu na adaptívny dizajn - hlavný obsah
Dostupné len po zakúpení prístupu
06: Prerábka statického blogu na adaptívny dizajn - pätička a finiš
Dostupné len po zakúpení prístupu
07: Viewport, meta viewport na nastavenie šírky zariadenia
Dostupné len po zakúpení prístupu
Z pixelov na percentá
08: Box-sizing: border-box, CSS funckia calc()
Dostupné len po zakúpení prístupu
09: Revolučný vzorec pre responzívnu revolúciu, mockups, dizajnovanie v prehliadači
Dostupné len po zakúpení prístupu
Domáca úloha #6
Dostupné len po zakúpení prístupu
10: Jednotka em, responzívna typografia
Dostupné len po zakúpení prístupu
11: Layout pomocou jednotky em
Dostupné len po zakúpení prístupu
Domáca úloha #7
Dostupné len po zakúpení prístupu
12: Mobile First prístup a responzívne obrázky
Dostupné len po zakúpení prístupu
13: Dokončenie mobile first stránky a 3 praktické tipy pre responzívny kód
Dostupné len po zakúpení prístupu
★ CSS preprocesory: Sass (ukážka z kurzu)
★ Skús si Sass
Dostupné len po zakúpení prístupu
★ Sass je CSS, len viac (Sass kurz, Ep. 1)
Dostupné len po zakúpení prístupu
★ Čo sú CSS preprocesory? (Sass kurz, Ep. 2)
Dostupné len po zakúpení prístupu
★ Nesting v CSS, vnor kód pod kód (Sass kurz, Ep. 11)
Dostupné len po zakúpení prístupu
★ FarbičkyFarbičkyFarbičky (Sass kurz, Ep. 14)
Dostupné len po zakúpení prístupu
★ Responsive Sass, sprav target/context za mňa (Sass kurz, Ep. 28)
Dostupné len po zakúpení prístupu
Sass je tu pre teba, buďte spolu:)
Dostupné len po zakúpení prístupu
Zmena statickej stránky na responzívnu
14: Redizajn statického portfólia do responzívneho layoutu - úvodné nastavenia
Dostupné len po zakúpení prístupu
15: Redizajn statického portfólia do responzívneho layoutu - elastická hlavička
Dostupné len po zakúpení prístupu
16: Redizajn statického portfólia do responzívneho layoutu - elastický obsah a pätička
Dostupné len po zakúpení prístupu
17: Redizajn statického portfólia do responzívneho layoutu - media queries part 1
Dostupné len po zakúpení prístupu
18: Redizajn statického portfólia do responzívneho layoutu - media queries part 2
Dostupné len po zakúpení prístupu
19: Reponzívna navigácia, používanie jQuery pluginov na štýlovanie formulárov
Dostupné len po zakúpení prístupu
CSS animácie a Boostrap CSS
20: CSS3 Transforms, CSS3 Transitions
Dostupné len po zakúpení prístupu
21: CSS Bootstrap Part 1
Dostupné len po zakúpení prístupu
22: CSS Bootstrap Part 2
Dostupné len po zakúpení prístupu
Grid systémy a Flexbox
23: Úvod do CSS Grid systémov, Bootsrap Grid CSS
Dostupné len po zakúpení prístupu
24: Dokončenia Bootstrap gridu, tvorba vlastného CSS grid systému
Dostupné len po zakúpení prístupu
25: CSS display: table
Dostupné len po zakúpení prístupu
26: Flexbox, CSS display: flex
Dostupné len po zakúpení prístupu
27: Flexbox, responzívny layout cez display: flex
Dostupné len po zakúpení prístupu
Responzívne obrázky a Retina
28: Obrázky v dobe responzíveho dizajnu a Retiny
Dostupné len po zakúpení prístupu
29: Vektorové obrázky, nový img srcset atribút, nový HTML picture element
Dostupné len po zakúpení prístupu
30: Best practices pre responzívne obrázky, figure a figcaption HTML elementy
Dostupné len po zakúpení prístupu
31: Background stránky cez responzívny obrázok, Background stránky cez video
Dostupné len po zakúpení prístupu
Záver Responsive
32: Koniec Responsive Webdesign kurzu
Dostupné len po zakúpení prístupu
Domáca úloha #8
Dostupné len po zakúpení prístupu
Úvod do JavaScript/jQuery
Predtým, ako pôjdeš na JavaScript:)
Dostupné len po zakúpení prístupu
01: Úvod do JavaScriptu a jQuery
Dostupné len po zakúpení prístupu
02: Úvod do programovania - Javascript konzola a premenné
Dostupné len po zakúpení prístupu
Úvod do programovania
03: Úvod do programovania - čísla a reťazce
Dostupné len po zakúpení prístupu
04: Úvod do programovania - polia a objekty
Dostupné len po zakúpení prístupu
05: Úvod do programovania - funkcie a metódy
Dostupné len po zakúpení prístupu
Naučím ťa programovať hry!
Dostupné len po zakúpení prístupu
BONUS: ako je to s tými premennými a console.log()
Dostupné len po zakúpení prístupu
BONUS: ako je to s tým programovaním a tými funkciami
Dostupné len po zakúpení prístupu
Document Object Model (DOM)
06: Document Object Model, reprezentácia HTML kódu v prehliadači, vzťahy medzi elementami
Dostupné len po zakúpení prístupu
07: jQuery, pridanie knižnice do stránky lokálne alebo cez CDN
Dostupné len po zakúpení prístupu
jQuery animácie
08: Úvod do jQuery animácií a reťazenie metód
Dostupné len po zakúpení prístupu
09: jQuery metódy, getter/setter princíp
Dostupné len po zakúpení prístupu
10: Vlastné jQuery animácie
Dostupné len po zakúpení prístupu
Domáca úloha #9
Dostupné len po zakúpení prístupu
11: Javascripty v hlavičke vs. na konci HTML body elementu
Dostupné len po zakúpení prístupu
12: Document ready funkcia, kompatibilita jQuery s inými Javascript knižnicami
Dostupné len po zakúpení prístupu
Domáca úloha #10
Dostupné len po zakúpení prístupu
JavaScript Eventy
13: Úvod do Javascript eventov / udalostí
Dostupné len po zakúpení prístupu
Domáca úloha #11
Dostupné len po zakúpení prístupu
14: Traverzovanie po DOM (Document Object Model)
Dostupné len po zakúpení prístupu
15: Akordeón efekt, jQuery event object
Dostupné len po zakúpení prístupu
16: Manipulácia s DOM, vytváranie a mazanie HTML elementov
Dostupné len po zakúpení prístupu
17: Manipulácia s DOM časť druhá, pokročilé jQuery selektory
Dostupné len po zakúpení prístupu
Domáca úloha #12
Dostupné len po zakúpení prístupu
18: Eventy, event listener, event handler, vybublávanie, delegácia
Dostupné len po zakúpení prístupu
19: Event object, podmienky, ternárny operátor, zastavenie animácií, príprava na Lightbox
Dostupné len po zakúpení prístupu
Domáca úloha #13
Dostupné len po zakúpení prístupu
jQuery Lightbox a Slider
20: jQuery Image Lightbox #1
Dostupné len po zakúpení prístupu
21: jQuery Image Lightbox #2
Dostupné len po zakúpení prístupu
22: Animácia scrollovania #1
Dostupné len po zakúpení prístupu
23: Animácia scrollovania #2, Javascript callback funkcie
Dostupné len po zakúpení prístupu
24: Späť na vrch, ako pán!
Dostupné len po zakúpení prístupu
Domáca úloha #14
Dostupné len po zakúpení prístupu
25: jQuery image slider, menič obrázkov
Dostupné len po zakúpení prístupu
26: jQuery image slider, časť druhá
Dostupné len po zakúpení prístupu
Pokročilé animácie
27: Javascript object literal pattern
Dostupné len po zakúpení prístupu
Domáca úloha #14 a pol
Dostupné len po zakúpení prístupu
28: Slider ako object literal pattern s nastaveniami od usera cez jQuery.extend()
Dostupné len po zakúpení prístupu
Domáca úloha #15
Dostupné len po zakúpení prístupu
29: Pokročilé jQuery animácie #1 - spolupráca jQuery a CSS3
Dostupné len po zakúpení prístupu
30: Pokročilé jQuery animácie #1 - animovanie farieb
Dostupné len po zakúpení prístupu
31: Galéria obrázkov rozdelená na viac strán
Dostupné len po zakúpení prístupu
32: CSS3 animovaná galéria, HTML5 data atribúty, práca so stringami v Javascripte
Dostupné len po zakúpení prístupu
33: Dokončenie galérie, Javascript Prototype, tajné dáta cez jQuery.data()
Dostupné len po zakúpení prístupu
Domáca úloha #16
Dostupné len po zakúpení prístupu
AJAX
34: Viacstránková galéria cez AJAX, princíp Request-Response
Dostupné len po zakúpení prístupu
35: AJAXová galéria pomocou jQuery.load() metódy
Dostupné len po zakúpení prístupu
Domáca úloha #17
Dostupné len po zakúpení prístupu
36: Vylepšenie AJAX galérie cez jQuery.ajax() metódu
Dostupné len po zakúpení prístupu
Domáca úloha #18
Dostupné len po zakúpení prístupu
37: Pokročilý AJAX - asynchrónny javascript, JSON, princíp promises a metóda jQuery.each()
Dostupné len po zakúpení prístupu
Domáca úloha #19
Dostupné len po zakúpení prístupu
Domáca úloha #20
Dostupné len po zakúpení prístupu
Domáca úloha #21
Dostupné len po zakúpení prístupu
jQuery UI a pluginy
38: Interface knižnica jQuery UI, jej metódy a eventy
Dostupné len po zakúpení prístupu
39: jQuery UI Slider, Tooltip, pokročilé používanie UI komponentov a komunikácia medzi nimi
Dostupné len po zakúpení prístupu
40: Úvod do jQuery pluginov
Dostupné len po zakúpení prístupu
41: Vlastný jQuery lightbox plugin
Dostupné len po zakúpení prístupu
42: Dokončenie jQuery pluginu, aby mal schopnosť prijímať nastavenia od usera
Dostupné len po zakúpení prístupu
Parallax efekt
43: jQuery Parallax efekt
Dostupné len po zakúpení prístupu
44: jQuery Parallax efekt, časť druhá a taktiež ba priam posledná
Dostupné len po zakúpení prístupu
Záver kurzu
45: Záver webdesigner kurzu
Dostupné len po zakúpení prístupu
✨ WEBREBEL REBORN
WEBREBEL REBORN: ako to bude fungovať?
Dostupné v ukážke kurzu
HTML a CSS základy na príklade
01 | HTML a CSS nie sú len webstránky
Dostupné v ukážke kurzu
11 | DEVTOOLS, INSPECT ELEMENT, preskúmaj prvok
Dostupné v ukážke kurzu
13 | HTML ATRIBÚTY, ZOZNAMY, MENU (ul, ol, li)
Dostupné v ukážke kurzu
14 | HTML ODKAZ na inú stránku, LINK, HYPERTEXT (a, mailto, tel)
Dostupné len po zakúpení prístupu
15 | Písanie kódu je len MALÁ časť práce
Dostupné len po zakúpení prístupu
16 | CSS SELEKTORY, PSEUDO CLASSY, ŠPECIFICITA (hover, active)
Dostupné len po zakúpení prístupu
17 | DIV je šupák a kto používa, je LÚZER (div, main, section)
Dostupné len po zakúpení prístupu
18 | SEO, BUĎ ZLODEJ (kódu, všetci sme, tak sa učíš)
Dostupné len po zakúpení prístupu
19 | CLASS, ID
Dostupné len po zakúpení prístupu
20 | CESTY K SÚBOROM, prepoj HTML a CSS (link, ., .., /)
Dostupné len po zakúpení prístupu
21 | CSS nastavenia pre KAŽDÝ projekt
Dostupné len po zakúpení prístupu
Poďme do väčšej HTML a CSS hĺbky
...na tomto ešte pracujem...
Dostupné len po zakúpení prístupu
Prerobím macOS aplikáciu do HTML a CSS
01  REMINDERS REMAKE, z macOS do HTML
Dostupné v ukážke kurzu
02  INDEX.HTML, normalize.css (linear-gradient)
Dostupné v ukážke kurzu
03  REM vs. PX, relatívne jednotky v CSS
Dostupné v ukážke kurzu
06  BUTTONS, flex na zarovnanie elementov vedľa seba
Dostupné len po zakúpení prístupu
07  RGBA, polo-priehľadné farby (rgba, hover, active)
Dostupné len po zakúpení prístupu
08  FORMULÁR a PSEUDO ELEMENTY (form, input, ::placeholder, ::first-letter)
Dostupné len po zakúpení prístupu
09  RELATÍVNE POZÍCIE, mínusové hodnoty (position, relative)
Dostupné len po zakúpení prístupu
10  CSS GRID pre LAYOUT, zalomenie (grid, fraction, gap)
Dostupné len po zakúpení prístupu
11  CSS GRID vs. FLEXBOX, kedy použiť ktorý
Dostupné len po zakúpení prístupu
12  JAVASCRIPT?? pripravíme NADPISY, aby sa ním dali prepínať
Dostupné len po zakúpení prístupu
13  GOOGLE FONTS, web fonty
Dostupné len po zakúpení prístupu
14  CSS PREMENNÉ, css variables, odlož si hodnotu (::root, display, block, none)
Dostupné len po zakúpení prístupu
15  SVG, VECTOR vs. RASTER obrázky (svg, png, jpg)
Dostupné len po zakúpení prístupu
16  SVG, CIRCLE (stroke, stroke-width, fill)
Dostupné len po zakúpení prístupu
17  REMINDERS REMADE ✨
Dostupné len po zakúpení prístupu
Responzívny WEB od NULY
01 | CRAVE, responzívny WEB od nuly
Dostupné len po zakúpení prístupu
02 | HTML, štruktúra dokumentu, LET'S GO!
Dostupné len po zakúpení prístupu
03 | FONTS, by Google
Dostupné len po zakúpení prístupu
04 | MOBILE FIRST, Firefox a jeho RESPONSIVE MODE
Dostupné len po zakúpení prístupu
05 | KTORÝ HTML ELEMENT KEDY? prečo mám použiť práve ten?
Dostupné len po zakúpení prístupu
06 | VW VH CLAMP, responzívny dizajn na 1 riadok
Dostupné len po zakúpení prístupu
07 | MEDIA QUERIES, dizajn podľa veľkosti obrazovky
Dostupné len po zakúpení prístupu
08 | FLEXBOX, správne rozmiestnenie elementov
Dostupné len po zakúpení prístupu
09 | MAX CONTAINER, web nesmie ísť do nekonečna
Dostupné len po zakúpení prístupu
10 | CSS NOT SELECTOR, steam widget, FARBA POZADIA
Dostupné len po zakúpení prístupu
11 | MÁGIA NAPÍŠE CSS KÓD ZA MŇA, css support, stylers cloud
Dostupné len po zakúpení prístupu
12 | HEADER ART, fixné obrázky vše-kryjúceho-pozadia
Dostupné len po zakúpení prístupu
13 | VIZUÁLNE EFEKTY, webový jazz
Dostupné len po zakúpení prístupu
14 | TAKMER PARALLAX EFEKT, pozadie sa scrollujúc posúva
Dostupné len po zakúpení prístupu
15 | ŠŤAVNATÉ HLAVNÉ MENU, navigácia
Dostupné len po zakúpení prístupu
16 | SMOOTH SCROLL, plynulý posun na sekciu
Dostupné len po zakúpení prístupu
17 | PARALLAX SA VRÁTIL, mágia je späť!!
Dostupné len po zakúpení prístupu
18 | RESPONZÍVNA NAVIGÁCIA, reaguje na veľkosť obrazovky
Dostupné len po zakúpení prístupu
19 | KOĽKO MEDIA QUERIES? kedy pridať break-pointy, LOGO
Dostupné len po zakúpení prístupu
20 | CSS GRID, responzívny footer
Dostupné len po zakúpení prístupu
21 | CSS GRID, zmena pozície elementov, rozdiel medzi FLEX a GRID
Dostupné len po zakúpení prístupu
22 | CRAVE, footer formulár, PARALLAX a SLÁVA ✨
Dostupné len po zakúpení prístupu
Meta dáta
makám makám
Dostupné len po zakúpení prístupu

Hodnocení kurzu

Pozri aj tieto kurzy