Webrebel 1: HTML, CSS & JavaScript

26h 18m 27s
Čas
207
Kapitol
23 957
Študentov
4.9
Hodnotenie
Začiatočník
Level
slovenský
Jazyk kurzu

Popis kurzu


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,
  • garancia vrátenia peňazí, ak nebudeš s kurzom spokojný.

Zoznam kapitol

Úvod HTML/CSS
00: Začiatok HTML/CSS kurzu
01: Úvod do HTML, HTML tagy a prvá stránka
Tipy, rady a pravidlá pre každý kurz
Sublime Text - nastavenia, časté otázky
Nepoužívaj Sublime Text
Inštalujeme Sublime Text 3
Sublime Text 01: Ak ti Sublime robí problémy a rady na úvod
Sublime Text 02: Ak ti nastavenia a package fungujú inak ako mne
Sublime Text 03: Ak ti package vôbec nejdú nainštalovať, klávesové skratky, mágia
HTML
02: Doctype a kostra HTML dokumentu
03: Formátovanie textu v HTML
04: Developer Tools a správne štruktúrovaný HTML kód
05: HTML zoznamy - usporiadaný, neusporiadaný a definičný a šafrán
06: Odkazy, linky, emaily a telefónne čísla
07: Obrázky, rozmery obrázkov, obrázky v linkoch, hotlinking
Domáca úloha #1
BONUS: zákutia formátovania HTML #1
08: Formáty obrázkov, ktoré, kedy a ako použiť a redukcia veľkosti obrázkov
09: Ako funguje načítanie a zobrazenie internetovej stránky
BONUS: špeciálne znaky v cestách k súborom, HTML validátor kódu
CSS
10: Úvod do CSS, CSS vlastnosti, CSS selektory a deklarácie
Kde ma nájdeš, yablko na www internetoch
11: Špecifické CSS selektory, používanie Classov a IDčiek v CSS
12: Úvod do typografie a kompletný redizajn stránky bez dotyku HTML súboru
13: CSS box model a všetko je škatuľa
14: Block level elementy, element DIV a skutočná šírka elementu
15: Inline elementy, inline-block elementy, element SPAN
BONUS: zákutia formátovania HTML #2
16: 3 spôsoby pridávania farieb v CSS
17: Typografia, webové fonty a štýlovanie textu v CSS
Domáca úloha #2
18: Základná štruktúra HTML stránky a validácia HTML kódu
Domáca úloha #2 a pol
Kompletný dizajn stránky
19: Dizajn blogu - základný layout a hlavička
20: Dizajn blogu - hlavný obsah
21: Dizajn blogu - pätička a finálne úpravy
BONUS: cesty k súborom, developer tools
CSS Layout stránky
22: CSS kaskáda, špecificita selektorov
23: Tok dokumentu, pozícia elementov v dokumente a CSS clear float
24: Layout stránky pomocou CSS float, CSS float contain
Domáca úloha #3
25: Pozícia elementov pomocou CSS position: relative a position: absolute
26: z-index, position: fixed a ako vycentrovať position: absolute element
BONUS: čím menej floatov, tým lepšie
27: CSS background, base64 zakódované obrázky
Nemusíš všetko (+ frustrujúce úlohy)
CSS 3
28: Úvod do CSS3, CSS3 prefixy a CSS3 gradienty
29: CSS sprites a CSS3 multi-background
30: Štýlovanie HTML zoznamov
31: CSS reset, CSS normalize, úvod do HTML formulárov
Domáca úloha #4
32: Štýlovanie HTML formulárov
Domáca úloha #5
33: Štýlovanie HTML tabuliek
BONUS: vzťahy medzi elementami
34: Spätná kompatibilita so starými prehliadačmi
Finálny projekt
35: Finálny projekt - dizajnovanie stránky portfólia - 1. časť
36: Finálny projekt - dizajnovanie stránky portfólia - 2. časť
Záver HTML/CSS
BONUS: CSS dedenie a nededenie
37: Favicons, ďalšie HTML meta tagy
38: Koniec HTML/CSS kurzu
Websupport ZDARMA na 3 mesiace 2018 edišn!
BONUS: Websupport hosting a FTP nahrávanie súborov
Úvod do Responsive dizajnu
01: Úvod do responzívneho webdizajnu
02: Static vs Liquid vs Adaptive vs Responsive
03: CSS media queries
Statický vs. Responzívny dizajn
04: Prerábka statického blogu na adaptívny dizajn - hlavička
05: Prerábka statického blogu na adaptívny dizajn - hlavný obsah
06: Prerábka statického blogu na adaptívny dizajn - pätička a finiš
07: Viewport, meta viewport na nastavenie šírky zariadenia
Z pixelov na percentá
08: Box-sizing: border-box, CSS funckia calc()
09: Revolučný vzorec pre responzívnu revolúciu, mockups, dizajnovanie v prehliadači
Domáca úloha #6
10: Jednotka em, responzívna typografia
11: Layout pomocou jednotky em
Domáca úloha #7
12: Mobile First prístup a responzívne obrázky
13: Dokončenie mobile first stránky a 3 praktické tipy pre responzívny kód
★ CSS preprocesory: Sass (ukážka z kurzu)
★ Skús si Sass
★ Sass je CSS, len viac (Sass kurz, Ep. 1)
★ Čo sú CSS preprocesory? (Sass kurz, Ep. 2)
★ Nesting v CSS, vnor kód pod kód (Sass kurz, Ep. 11)
★ FarbičkyFarbičkyFarbičky (Sass kurz, Ep. 14)
★ Responsive Sass, sprav target/context za mňa (Sass kurz, Ep. 28)
Sass je tu pre teba, buďte spolu:)
Zmena statickej stránky na responzívnu
14: Redizajn statického portfólia do responzívneho layoutu - úvodné nastavenia
15: Redizajn statického portfólia do responzívneho layoutu - elastická hlavička
16: Redizajn statického portfólia do responzívneho layoutu - elastický obsah a pätička
17: Redizajn statického portfólia do responzívneho layoutu - media queries part 1
18: Redizajn statického portfólia do responzívneho layoutu - media queries part 2
19: Reponzívna navigácia, používanie jQuery pluginov na štýlovanie formulárov
CSS animácie a Boostrap CSS
20: CSS3 Transforms, CSS3 Transitions
21: CSS Bootstrap Part 1
22: CSS Bootstrap Part 2
Grid systémy a Flexbox
23: Úvod do CSS Grid systémov, Bootsrap Grid CSS
24: Dokončenia Bootstrap gridu, tvorba vlastného CSS grid systému
25: CSS display: table
26: Flexbox, CSS display: flex
27: Flexbox, responzívny layout cez display: flex
Responzívne obrázky a Retina
28: Obrázky v dobe responzíveho dizajnu a Retiny
29: Vektorové obrázky, nový img srcset atribút, nový HTML picture element
30: Best practices pre responzívne obrázky, figure a figcaption HTML elementy
31: Background stránky cez responzívny obrázok, Background stránky cez video
Záver Responsive
32: Koniec Responsive Webdesign kurzu
Domáca úloha #8
Úvod do JavaScript/jQuery
Predtým, ako pôjdeš na JavaScript:)
01: Úvod do JavaScriptu a jQuery
02: Úvod do programovania - Javascript konzola a premenné
Úvod do programovania
03: Úvod do programovania - čísla a reťazce
04: Úvod do programovania - polia a objekty
05: Úvod do programovania - funkcie a metódy
Naučím ťa programovať hry!
BONUS: ako je to s tými premennými a console.log()
BONUS: ako je to s tým programovaním a tými funkciami
Document Object Model (DOM)
06: Document Object Model, reprezentácia HTML kódu v prehliadači, vzťahy medzi elementami
07: jQuery, pridanie knižnice do stránky lokálne alebo cez CDN
jQuery animácie
08: Úvod do jQuery animácií a reťazenie metód
09: jQuery metódy, getter/setter princíp
10: Vlastné jQuery animácie
Domáca úloha #9
11: Javascripty v hlavičke vs. na konci HTML body elementu
12: Document ready funkcia, kompatibilita jQuery s inými Javascript knižnicami
Domáca úloha #10
JavaScript Eventy
13: Úvod do Javascript eventov / udalostí
Domáca úloha #11
14: Traverzovanie po DOM (Document Object Model)
15: Akordeón efekt, jQuery event object
16: Manipulácia s DOM, vytváranie a mazanie HTML elementov
17: Manipulácia s DOM časť druhá, pokročilé jQuery selektory
Domáca úloha #12
18: Eventy, event listener, event handler, vybublávanie, delegácia
19: Event object, podmienky, ternárny operátor, zastavenie animácií, príprava na Lightbox
Domáca úloha #13
jQuery Lightbox a Slider
20: jQuery Image Lightbox #1
21: jQuery Image Lightbox #2
22: Animácia scrollovania #1
23: Animácia scrollovania #2, Javascript callback funkcie
24: Späť na vrch, ako pán!
Domáca úloha #14
25: jQuery image slider, menič obrázkov
26: jQuery image slider, časť druhá
Pokročilé animácie
27: Javascript object literal pattern
Domáca úloha #14 a pol
28: Slider ako object literal pattern s nastaveniami od usera cez jQuery.extend()
Domáca úloha #15
29: Pokročilé jQuery animácie #1 - spolupráca jQuery a CSS3
30: Pokročilé jQuery animácie #1 - animovanie farieb
31: Galéria obrázkov rozdelená na viac strán
32: CSS3 animovaná galéria, HTML5 data atribúty, práca so stringami v Javascripte
33: Dokončenie galérie, Javascript Prototype, tajné dáta cez jQuery.data()
Domáca úloha #16
AJAX
34: Viacstránková galéria cez AJAX, princíp Request-Response
35: AJAXová galéria pomocou jQuery.load() metódy
Domáca úloha #17
36: Vylepšenie AJAX galérie cez jQuery.ajax() metódu
Domáca úloha #18
37: Pokročilý AJAX - asynchrónny javascript, JSON, princíp promises a metóda jQuery.each()
Domáca úloha #19
Domáca úloha #20
Domáca úloha #21
jQuery UI a pluginy
38: Interface knižnica jQuery UI, jej metódy a eventy
39: jQuery UI Slider, Tooltip, pokročilé používanie UI komponentov a komunikácia medzi nimi
40: Úvod do jQuery pluginov
41: Vlastný jQuery lightbox plugin
42: Dokončenie jQuery pluginu, aby mal schopnosť prijímať nastavenia od usera
Parallax efekt
43: jQuery Parallax efekt
44: jQuery Parallax efekt, časť druhá a taktiež ba priam posledná
Záver kurzu
45: Záver webdesigner kurzu
✨ WEBREBEL REBORN
WEBREBEL REBORN: ako to bude fungovať?
HTML a CSS základy na príklade
01 | HTML a CSS nie sú len webstránky
02 | HTML a štruktúra DOKUMENTU (index.html, title, body)
03 | NADPISY a ODSTAVCE, HTML dáva VÝZNAM cez ZNAČKY (h1, h2, p)
04 | VISUAL STUDIO CODE, nastavenia, nauč sa [{(‹ZÁTVORKY›)}]
05 | HTML píšeš aj pre ROBOTOV a PROGRAMY (strong, em)
06 | IMG obrázky, HTML atribúty, MDN dokumentácia (img, alt)
07 | CSS, TEXT, FARBY, KOMENTÁRE (color, background, font-family)
08 | CSS, PADDING, MARGIN (article, border, width, font-size)
09 | NEEXISTUJE jeden správny kód, rozdiel medzi mnou a MALIAROM
10 | CSS RODIČIA a DETI, HTML štruktúra článku (header, footer, radius)
11 | DEVTOOLS, INSPECT ELEMENT, preskúmaj prvok
12 | TVRDÉ PRAVIDLÁ PRE SÚBORY, rady, webové zločiny
13 | HTML ATRIBÚTY, ZOZNAMY, MENU (ul, ol, li)
14 | HTML ODKAZ na inú stránku, LINK, HYPERTEXT (a, mailto, tel)
15 | Písanie kódu je len MALÁ časť práce
16 | CSS SELEKTORY, PSEUDO CLASSY, ŠPECIFICITA (hover, active)
17 | DIV je šupák a kto používa, je LÚZER (div, main, section)
18 | SEO, BUĎ ZLODEJ (kódu, všetci sme, tak sa učíš)
19 | CLASS, ID
20 | CESTY K SÚBOROM, prepoj HTML a CSS (link, ., .., /)
21 | CSS nastavenia pre KAŽDÝ projekt
Poďme do väčšej HTML a CSS hĺbky
...na tomto ešte pracujem...
Prerobím macOS aplikáciu do HTML a CSS
01  REMINDERS REMAKE, z macOS do HTML
02  INDEX.HTML, normalize.css (linear-gradient)
03  REM vs. PX, relatívne jednotky v CSS
04  FLEXBOX a SYSTEM FONTY (display, flex, align-items, justify-content, -apple-system)
05  FLEXBOX CONTENT a SIDEBAR (aside, main, flex-direction, overflow)
06  BUTTONS, flex na zarovnanie elementov vedľa seba
07  RGBA, polo-priehľadné farby (rgba, hover, active)
08  FORMULÁR a PSEUDO ELEMENTY (form, input, ::placeholder, ::first-letter)
09  RELATÍVNE POZÍCIE, mínusové hodnoty (position, relative)
10  CSS GRID pre LAYOUT, zalomenie (grid, fraction, gap)
11  CSS GRID vs. FLEXBOX, kedy použiť ktorý
12  JAVASCRIPT?? pripravíme NADPISY, aby sa ním dali prepínať
13  GOOGLE FONTS, web fonty
14  CSS PREMENNÉ, css variables, odlož si hodnotu (::root, display, block, none)
15  SVG, VECTOR vs. RASTER obrázky (svg, png, jpg)
16  SVG, CIRCLE (stroke, stroke-width, fill)
17  REMINDERS REMADE ✨
Responzívny dizajn
makám makám

Hodnotenia kurzu

Online kurz Webrebel 1: HTML, CSS & JavaScript je možné