Webrebel 1: HTML, CSS & Javascript

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

Hodnocení kurzu

Webrebel 1: HTML, CSS & Javascript

Najlepší kurz aký som kedy videl a učil sa. Yablko, si proste TOP :)

Erik K.

Webrebel 1: HTML, CSS & Javascript

Lenka N.

Pozri aj tieto kurzy