Webrebel 1: HTML, CSS & JavaScript

1d 4h
Čas
230
Kapitol
Programovanie
Kategória
4.9
Hodnotenie
Začiatočník
Level
slovenský
Jazyk kurzu

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:

  1. HTML a CSS,
  2. responzívny webdesign,
  3. 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, JavaScript a čo všetko sa v kurze naučíš.

Čo sa naučím?


HTML a CSS je základom každého webu a prostredníctvom nich tvoríme ich štruktúru, obsah a design. 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úť "Vyskúšať zdarma!" a dostaneš sa k videám o HTML a CSS.

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ý.
Online kurz Webrebel 1: HTML, CSS & JavaScript je možné

Zoznam kapitol

Úvod HTML/CSS
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Sublime Text - nastavenia, časté otázky
Nepoužívaj Sublime Text
Dostupné len po zakúpení prístupu
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
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Domáca úloha #1
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
CSS
Dostupné v ukážke kurzu
Kde ma nájdeš, yablko na www internetoch
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Domáca úloha #2
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Domáca úloha #2 a pol
Dostupné len po zakúpení prístupu
Kompletný dizajn stránky
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
CSS Layout stránky
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Domáca úloha #3
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Nemusíš všetko (+ frustrujúce úlohy)
Dostupné len po zakúpení prístupu
CSS 3
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Domáca úloha #4
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Domáca úloha #5
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Finálny projekt
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Záver HTML/CSS
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Websupport ZDARMA na 3 mesiace 2018 edišn!
Dostupné len po zakúpení prístupu
Dostupné v ukážke kurzu
Úvod do Responsive dizajnu
Dostupné v ukážke kurzu
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
Dostupné v ukážke kurzu
HTML a CSS základy na príklade
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
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
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
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
Dostupné v ukážke kurzu
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
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

Hodnotenia kurzu

Webrebel 1: HTML, CSS & JavaScript

Adrian M.

Webrebel 1: HTML, CSS & JavaScript

Yablko je najlepší učiteľ, akého som kedy poznala. TOP 👌🏼👏🏼

Sabina M.

Pozri aj tieto kurzy

Yablko (Roman Hraška) Yablko (Roman Hraška)
Front-end, back-end
22 Online kurzov
0 Príspevkov
Prejsť na kanál

Akcia! Získaj predplatné za 39€ na mesiac

Získaj prístup do najväčšej ponuky online kurzov na trhu, teraz v super akcii.