Webrebel 1: HTML, CSS & JavaScript
- Level
- Kapitol
- 230
- Kategória
- Programovanie
- Hodnotenie
- 4,9 z 5
- Dĺžka
- 28h 49min
- Jazyk
- SK
Popis online kurzu Webrebel 1: HTML, CSS a JavaScript
Online kurz Webrebel 1 je prvý kompletný online kurzu webdesignu. Kurz sa skladá z 3 modulov:
- HTML a CSS,
- responzívny webdesign,
- JavaScript/jQuery.
Všetky tieto technológie sú potrebné na tvorbu každej modernej webovej stránky. Pozri si úvodné video kurzu, v ktorom ti lektor kurzu Webrebel Roman Hraška alias Yablko povie, čo je to HTML a CSS, responzívny dizajn, JS (JavaScript), a čo všetko sa v kurze naučíš.
Čo sa naučím v kurze Webrebel 1: HTML, CSS a JavaScript?
HTML a CSS sú základom každého webu a prostredníctvom nich tvoríme ich štruktúru, obsah a dizajn. Bez znalosti týchto dvoch technológií nie je možné stať sa plnohodnotným webdesignerom. HTML a CSS časť kurzu Webrebel tvorí viac ako 40 videí a množstvo domácich zadaní a príkladov.
Túto časť kurzu od nás získavaš zadarmo, stačí kliknúť na "Vyskúšať zdarma!" a dostaneš sa k videám o HTML a CSS. Nauč sa pracovať s modernými technológiami, ako je JS JavaScript, a objav všetky dôležité nástroje na tvorbu profesionálnych webových stránok.
Druhá časť kurzu Webrebel sa venuje responzívnemu dizajnu. Vďaka responzívnemu dizajnu budeš vedieť stránku optimalizovať pre mobilné zariadenia. Stránky sa budú používateľom zobrazovať prehľadne aj na menších obrazovkách na tabletoch alebo mobiloch, a tým budú dostupnejšie. Responzívny dizajn je dnes štandardom kvalitných webov, pretože už takmer polovica ľudí navštevuje stránky zo svojho mobilu alebo tabletu. Navyše, Google vo svojom algoritme vyhľadávania uprednostňuje webové stránky optimalizované pre mobily.
JavaScript a jQuery je posledný modul kompletného kurzu webdesignu Webrebel. V tejto časti kurzu sa naučíš tvojim webstránkam pridávať interaktivitu, dynamiku cez animácie a zvýšiť ich použiteľnosť. Kurz obsahuje úvod do programovania v JavaScripte, naučíš sa čo sú premenné, polia, objekty, funkcie a metódy. Naučíš sa rozumieť DOM modelu, naprogramuješ svoj vlastný jQuery plugin, budeš vedieť na svoju webstránku pridať Image Lightbox plugin, image slider alebo Prallax efekt. JavaScript a jQuery sú technológie, ktoré sa stali nevyhnutnou súčasťou moderných profesionálnych webstránok plných animácií, vyskakovacích okien a interaktivity.
Čo všetko dostanem?
- viac ako 120 kvalitných videotutoriálov, čo je viac ako 25 hodín učiva,
- 40+ videí v časti HTML a CSS,
- 30+ videí v časti Responzívny dizajn,
- 45+ videí v časti JavaScript/jQuery,
- množstvo domácich úloh, zadaní a príkladov na precvičenie jednotlivých tém,
- zdrojové kódy na stiahnutie,
- diskusné fórum, v ktorom na tvoje otázky ku kurzu odpovedá priamo lektor a tvoji spolužiaci,
- certifikát o absolvovaní kurzu Webrebel 1: HTML, CSS a JavaScript,
- garancia vrátenia peňazí, ak nebudeš s kurzom spokojný.
Kapitoly online kurzu
Úvod HTML/CSS (3)
Ukážka zdarma
1:33
Ukážka zdarma
7:09
Ukážka zdarma
5:54
Sublime Text - nastavenia, časté otázky (5)
Nepoužívaj Sublime Text
Ukážka zdarma
11:10
Sublime Text 01: Ak ti Sublime robí problémy a rady na úvod
9:16
Sublime Text 02: Ak ti nastavenia a package fungujú inak ako mne
8:42
Sublime Text 03: Ak ti package vôbec nejdú nainštalovať, klávesové skratky, mágia
7:48
HTML (11)
Ukážka zdarma
6:30
Ukážka zdarma
6:07
Ukážka zdarma
7:47
Ukážka zdarma
6:33
Ukážka zdarma
14:44
Ukážka zdarma
8:09
Domáca úloha #1
Ukážka zdarma
11:12
Ukážka zdarma
8:40
Ukážka zdarma
4:45
Ukážka zdarma
14:06
CSS (13)
Ukážka zdarma
12:39
Kde ma nájdeš, yablko na www internetoch
1:38
Ukážka zdarma
12:12
Ukážka zdarma
13:58
Ukážka zdarma
7:14
Ukážka zdarma
7:21
Ukážka zdarma
8:51
Ukážka zdarma
12:29
Ukážka zdarma
8:24
Ukážka zdarma
12:56
Domáca úloha #2
Ukážka zdarma
10:25
Domáca úloha #2 a pol
Kompletný dizajn stránky (4)
Ukážka zdarma
20:49
Ukážka zdarma
12:54
Ukážka zdarma
15:32
Ukážka zdarma
10:03
CSS Layout stránky (9)
Ukážka zdarma
11:09
Ukážka zdarma
6:16
Ukážka zdarma
13:40
Domáca úloha #3
Ukážka zdarma
8:35
Ukážka zdarma
9:59
Ukážka zdarma
11:12
Ukážka zdarma
6:58
Nemusíš všetko (+ frustrujúce úlohy)
11:02
CSS 3 (10)
Ukážka zdarma
6:40
Ukážka zdarma
7:41
Ukážka zdarma
12:19
Ukážka zdarma
9:18
Domáca úloha #4
Ukážka zdarma
21:32
Domáca úloha #5
Ukážka zdarma
13:06
Ukážka zdarma
12:42
Ukážka zdarma
4:56
Finálny projekt (2)
Ukážka zdarma
21:28
Ukážka zdarma
17:25
Záver HTML/CSS (5)
Ukážka zdarma
11:00
Ukážka zdarma
6:16
Ukážka zdarma
4:28
Websupport ZDARMA na 3 mesiace 2018 edišn!
2:07
Ukážka zdarma
15:20
Úvod do Responsive dizajnu (3)
Ukážka zdarma
6:00
Ukážka zdarma
7:20
03: CSS media queries
9:52
Statický vs. Responzívny dizajn (4)
04: Prerábka statického blogu na adaptívny dizajn - hlavička
11:44
05: Prerábka statického blogu na adaptívny dizajn - hlavný obsah
10:08
06: Prerábka statického blogu na adaptívny dizajn - pätička a finiš
11:24
07: Viewport, meta viewport na nastavenie šírky zariadenia
13:13
Z pixelov na percentá (8)
08: Box-sizing: border-box, CSS funckia calc()
12:38
09: Revolučný vzorec pre responzívnu revolúciu, mockups, dizajnovanie v prehliadači
15:38
Domáca úloha #6
10: Jednotka em, responzívna typografia
12:24
11: Layout pomocou jednotky em
6:59
Domáca úloha #7
12: Mobile First prístup a responzívne obrázky
11:54
13: Dokončenie mobile first stránky a 3 praktické tipy pre responzívny kód
6:53
★ CSS preprocesory: Sass (ukážka z kurzu) (7)
★ Skús si Sass
2:46
★ Sass je CSS, len viac (Sass kurz, Ep. 1)
8:56
★ Čo sú CSS preprocesory? (Sass kurz, Ep. 2)
5:47
★ Nesting v CSS, vnor kód pod kód (Sass kurz, Ep. 11)
4:57
★ FarbičkyFarbičkyFarbičky (Sass kurz, Ep. 14)
6:30
★ Responsive Sass, sprav target/context za mňa (Sass kurz, Ep. 28)
7:59
Sass je tu pre teba, buďte spolu:)
Zmena statickej stránky na responzívnu (6)
14: Redizajn statického portfólia do responzívneho layoutu - úvodné nastavenia
12:30
15: Redizajn statického portfólia do responzívneho layoutu - elastická hlavička
16:30
16: Redizajn statického portfólia do responzívneho layoutu - elastický obsah a pätička
13:42
17: Redizajn statického portfólia do responzívneho layoutu - media queries part 1
13:14
18: Redizajn statického portfólia do responzívneho layoutu - media queries part 2
14:18
CSS animácie a Boostrap CSS (3)
20: CSS3 Transforms, CSS3 Transitions
12:09
21: CSS Bootstrap Part 1
11:29
22: CSS Bootstrap Part 2
5:39
Grid systémy a Flexbox (5)
23: Úvod do CSS Grid systémov, Bootsrap Grid CSS
15:59
24: Dokončenia Bootstrap gridu, tvorba vlastného CSS grid systému
10:22
25: CSS display: table
7:06
26: Flexbox, CSS display: flex
18:11
27: Flexbox, responzívny layout cez display: flex
14:00
Responzívne obrázky a Retina (4)
28: Obrázky v dobe responzíveho dizajnu a Retiny
10:45
29: Vektorové obrázky, nový img srcset atribút, nový HTML picture element
12:17
30: Best practices pre responzívne obrázky, figure a figcaption HTML elementy
7:38
31: Background stránky cez responzívny obrázok, Background stránky cez video
17:49
Záver Responsive (2)
32: Koniec Responsive Webdesign kurzu
2:58
Domáca úloha #8
Úvod do JavaScript/jQuery (3)
Predtým, ako pôjdeš na JavaScript:)
4:02
01: Úvod do JavaScriptu a jQuery
5:45
02: Úvod do programovania - Javascript konzola a premenné
6:36
Úvod do programovania (6)
03: Úvod do programovania - čísla a reťazce
5:10
04: Úvod do programovania - polia a objekty
6:29
05: Úvod do programovania - funkcie a metódy
8:21
Naučím ťa programovať hry!
0:44
BONUS: ako je to s tými premennými a console.log()
8:51
BONUS: ako je to s tým programovaním a tými funkciami
6:43
Document Object Model (DOM) (2)
06: Document Object Model, reprezentácia HTML kódu v prehliadači, vzťahy medzi elementami
4:44
07: jQuery, pridanie knižnice do stránky lokálne alebo cez CDN
8:51
jQuery animácie (7)
08: Úvod do jQuery animácií a reťazenie metód
8:31
09: jQuery metódy, getter/setter princíp
4:57
10: Vlastné jQuery animácie
9:58
Domáca úloha #9
11: Javascripty v hlavičke vs. na konci HTML body elementu
9:46
12: Document ready funkcia, kompatibilita jQuery s inými Javascript knižnicami
10:58
Domáca úloha #10
JavaScript Eventy (10)
13: Úvod do Javascript eventov / udalostí
7:45
Domáca úloha #11
14: Traverzovanie po DOM (Document Object Model)
10:56
15: Akordeón efekt, jQuery event object
11:05
16: Manipulácia s DOM, vytváranie a mazanie HTML elementov
13:10
17: Manipulácia s DOM časť druhá, pokročilé jQuery selektory
6:37
Domáca úloha #12
18: Eventy, event listener, event handler, vybublávanie, delegácia
12:41
19: Event object, podmienky, ternárny operátor, zastavenie animácií, príprava na Lightbox
11:48
Domáca úloha #13
jQuery Lightbox a Slider (8)
20: jQuery Image Lightbox #1
11:44
21: jQuery Image Lightbox #2
7:48
22: Animácia scrollovania #1
11:21
23: Animácia scrollovania #2, Javascript callback funkcie
8:21
24: Späť na vrch, ako pán!
6:13
Domáca úloha #14
25: jQuery image slider, menič obrázkov
6:02
26: jQuery image slider, časť druhá
13:39
Pokročilé animácie (10)
27: Javascript object literal pattern
10:06
Domáca úloha #14 a pol
28: Slider ako object literal pattern s nastaveniami od usera cez jQuery.extend()
6:04
Domáca úloha #15
29: Pokročilé jQuery animácie #1 - spolupráca jQuery a CSS3
13:02
30: Pokročilé jQuery animácie #1 - animovanie farieb
13:10
31: Galéria obrázkov rozdelená na viac strán
9:14
32: CSS3 animovaná galéria, HTML5 data atribúty, práca so stringami v Javascripte
11:57
33: Dokončenie galérie, Javascript Prototype, tajné dáta cez jQuery.data()
7:00
Domáca úloha #16
AJAX (9)
34: Viacstránková galéria cez AJAX, princíp Request-Response
7:17
35: AJAXová galéria pomocou jQuery.load() metódy
9:39
Domáca úloha #17
36: Vylepšenie AJAX galérie cez jQuery.ajax() metódu
7:40
Domáca úloha #18
37: Pokročilý AJAX - asynchrónny javascript, JSON, princíp promises a metóda jQuery.each()
15:44
Domáca úloha #19
Domáca úloha #20
Domáca úloha #21
jQuery UI a pluginy (5)
38: Interface knižnica jQuery UI, jej metódy a eventy
17:09
39: jQuery UI Slider, Tooltip, pokročilé používanie UI komponentov a komunikácia medzi nimi
15:47
40: Úvod do jQuery pluginov
8:29
41: Vlastný jQuery lightbox plugin
9:29
42: Dokončenie jQuery pluginu, aby mal schopnosť prijímať nastavenia od usera
8:50
Parallax efekt (2)
43: jQuery Parallax efekt
11:09
44: jQuery Parallax efekt, časť druhá a taktiež ba priam posledná
12:11
Záver kurzu (1)
45: Záver webdesigner kurzu
3:04
✨ WEBREBEL REBORN (1)
Ukážka zdarma
4:24
HTML a CSS základy na príklade (21)
Ukážka zdarma
2:35
Ukážka zdarma
3:07
Ukážka zdarma
2:48
Ukážka zdarma
5:29
Ukážka zdarma
4:54
Ukážka zdarma
5:06
Ukážka zdarma
5:16
Ukážka zdarma
4:51
Ukážka zdarma
2:20
Ukážka zdarma
3:39
Ukážka zdarma
6:24
14 | HTML ODKAZ na inú stránku, LINK, HYPERTEXT (a, mailto, tel)
5:23
15 | Písanie kódu je len MALÁ časť práce
2:08
16 | CSS SELEKTORY, PSEUDO CLASSY, ŠPECIFICITA (hover, active)
6:28
17 | DIV je šupák a kto používa, je LÚZER (div, main, section)
3:11
18 | SEO, BUĎ ZLODEJ (kódu, všetci sme, tak sa učíš)
3:44
19 | CLASS, ID
5:17
20 | CESTY K SÚBOROM, prepoj HTML a CSS (link, ., .., /)
6:44
21 | CSS nastavenia pre KAŽDÝ projekt
2:42
Poďme do väčšej HTML a CSS hĺbky (1)
...na tomto ešte pracujem...
Prerobím macOS aplikáciu do HTML a CSS (17)
Ukážka zdarma
1:19
Ukážka zdarma
1:49
Ukážka zdarma
5:44
Ukážka zdarma
5:24
Ukážka zdarma
4:04
06 BUTTONS, flex na zarovnanie elementov vedľa seba
3:54
07 RGBA, polo-priehľadné farby (rgba, hover, active)
3:40
08 FORMULÁR a PSEUDO ELEMENTY (form, input, ::placeholder, ::first-letter)
6:03
09 RELATÍVNE POZÍCIE, mínusové hodnoty (position, relative)
5:01
10 CSS GRID pre LAYOUT, zalomenie (grid, fraction, gap)
5:15
11 CSS GRID vs. FLEXBOX, kedy použiť ktorý
4:26
12 JAVASCRIPT?? pripravíme NADPISY, aby sa ním dali prepínať
4:14
13 GOOGLE FONTS, web fonty
2:57
14 CSS PREMENNÉ, css variables, odlož si hodnotu (::root, display, block, none)
5:04
15 SVG, VECTOR vs. RASTER obrázky (svg, png, jpg)
3:08
16 SVG, CIRCLE (stroke, stroke-width, fill)
6:43
17 REMINDERS REMADE ✨
7:10
Responzívny WEB od NULY (22)
01 | CRAVE, responzívny WEB od nuly
2:19
02 | HTML, štruktúra dokumentu, LET'S GO!
5:25
03 | FONTS, by Google
5:15
04 | MOBILE FIRST, Firefox a jeho RESPONSIVE MODE
7:31
05 | KTORÝ HTML ELEMENT KEDY? prečo mám použiť práve ten?
5:55
06 | VW VH CLAMP, responzívny dizajn na 1 riadok
6:42
07 | MEDIA QUERIES, dizajn podľa veľkosti obrazovky
3:14
08 | FLEXBOX, správne rozmiestnenie elementov
6:06
09 | MAX CONTAINER, web nesmie ísť do nekonečna
8:51
10 | CSS NOT SELECTOR, steam widget, FARBA POZADIA
7:20
11 | MÁGIA NAPÍŠE CSS KÓD ZA MŇA, css support, stylers cloud
7:04
12 | HEADER ART, fixné obrázky vše-kryjúceho-pozadia
6:52
13 | VIZUÁLNE EFEKTY, webový jazz
8:51
14 | TAKMER PARALLAX EFEKT, pozadie sa scrollujúc posúva
2:32
16 | SMOOTH SCROLL, plynulý posun na sekciu
5:30
17 | PARALLAX SA VRÁTIL, mágia je späť!!
15:57
19 | KOĽKO MEDIA QUERIES? kedy pridať break-pointy, LOGO
7:33
21 | CSS GRID, zmena pozície elementov, rozdiel medzi FLEX a GRID
5:02
22 | CRAVE, footer formulár, PARALLAX a SLÁVA ✨
13:42
Meta dáta (1)
makám makám
Lektor online kurzu
Yablko (Roman Hraška)
Front-end, back-end
Ďalšie programátorské tutoriály (a rady pre život v IT svete) nájdeš na mojom youtube rob web s yablkom.
Na internete pôsobím roky. Som autorom kurzu WEBREBEL. Predtým Nauč sa jQuery, Nauč sa CodeIgniter, Yablkov TurboTip, Robíme WordPress a potom desiatok ďalších kurzov, ktoré nájdeš aj tu. Napísal som kopu článkov pre zajtra.sk, brm.sk, medium a inde.
Všade ma nájdeš ako yablko. Napríklad na yablko.sk alebo youtube.com/yablko.
4,9
Hodnotenie
23
Kurzov
Hodnotenia študentov
Hodnotenia od študentov zapísaných v kurze na Skillmea.
4,9 z 5
· 249 hodnotení
Jan S.
5
Kurz splnil svůj účel a předal vše podstatné. Některé informace už ale působí trochu zastarale, takže by nebylo od věci obsah průběžně aktualizovat.
Vladimír B.
5
Som nesmierne rád, že tento šlabikár webu, ktorý opäť naberá čoraz viac na význame, autor s mikrofonickým výborne nahratým hlasom ho takmer celý zaktualizoval na dnešok bez použitia AI. Je chybou preskočiť tieto základy, ak chceš tvoriť web.
Jozef Š.
5
Veľmi dobrý kurz pre začiatočníkov. Ďakujem za skvelú prácu pri tvorbe materiálov :)
Tomáš F.
1
Totálne zbytočný kurz, vôbec nič z neho, len škoda času
