Alebo objednať len tento kurz za 179,00 €

Webrebel 1: HTML, CSS & JavaScript

28h 49m 18s
Čas
230
Kapitol
24 310
Študentov
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
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

Hodnotenia kurzu

Pozri aj tieto kurzy