Webrebel 1: HTML, CSS & JavaScript

Yablko (Roman Hraška)

Level
Chapters: 231
Category: Programovanie
Rating: 4,9 of 5
Length: 28h 49min
Language: SK

This course is part of your subscription, along with

Access to all online courses
Skillmea AI
An AI assistant that helps you learn
Skillmea Community
A community of students and teachers
Progress tracking
An overview of your progress across courses

Online course chapters

Úvod HTML/CSS ⁽³⁾

Free preview

1:33

Free preview

7:09

Free preview

5:54

Sublime Text - nastavenia, časté otázky ⁽⁵⁾

Nepoužívaj Sublime Text

Free preview

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 ⁽¹¹⁾

Free preview

6:30

Free preview

6:07

Free preview

7:47

Free preview

6:33

Free preview

14:44

Free preview

8:09

Domáca úloha #1

Free preview

11:12

Free preview

8:40

Free preview

4:45

Free preview

14:06

CSS ⁽¹³⁾

Free preview

12:39

Kde ma nájdeš, yablko na www internetoch

1:38

Free preview

12:12

Free preview

13:58

Free preview

7:14

Free preview

7:21

Free preview

8:51

Free preview

12:29

Free preview

8:24

Free preview

12:56

Domáca úloha #2

Free preview

10:25

Domáca úloha #2 a pol

Kompletný dizajn stránky ⁽⁴⁾

Free preview

20:49

Free preview

12:54

Free preview

15:32

Free preview

10:03

CSS Layout stránky ⁽⁹⁾

Free preview

11:09

Free preview

6:16

Free preview

13:40

Domáca úloha #3

Free preview

8:35

Free preview

9:59

Free preview

11:12

Free preview

6:58

Nemusíš všetko (+ frustrujúce úlohy)

11:02

CSS 3 ⁽¹⁰⁾

Free preview

6:40

Free preview

7:41

Free preview

12:19

Free preview

9:18

Domáca úloha #4

Free preview

21:32

Domáca úloha #5

Free preview

13:06

Free preview

12:42

Free preview

4:56

Finálny projekt ⁽²⁾

Free preview

21:28

Free preview

17:25

Záver HTML/CSS ⁽⁵⁾

Free preview

11:00

Free preview

6:16

Free preview

4:28

Websupport ZDARMA na 3 mesiace 2018 edišn!

2:07

Free preview

15:20

Úvod do Responsive dizajnu ⁽³⁾

Free preview

6:00

Free preview

7:20

03: CSS media queries

9:52

Statický vs. Responzívny dizajn ⁽⁴⁾

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á ⁽⁸⁾

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) ⁽⁷⁾

★ 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 ⁽⁶⁾

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

19: Reponzívna navigácia, používanie jQuery pluginov na štýlovanie formulárov

17:20

CSS animácie a Boostrap CSS ⁽³⁾

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 ⁽⁵⁾

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 ⁽⁴⁾

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 ⁽²⁾

32: Koniec Responsive Webdesign kurzu

2:58

Domáca úloha #8

Úvod do JavaScript/jQuery ⁽³⁾

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 ⁽⁶⁾

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) ⁽²⁾

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 ⁽⁷⁾

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 ⁽¹⁰⁾

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

Domáca úloha #13

jQuery Lightbox a Slider ⁽⁸⁾

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 ⁽¹⁰⁾

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 ⁽⁹⁾

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 ⁽⁵⁾

38: Interface knižnica jQuery UI, jej metódy a eventy

17:09

40: Úvod do jQuery pluginov

8:29

42: Dokončenie jQuery pluginu, aby mal schopnosť prijímať nastavenia od usera

8:50

Parallax efekt ⁽²⁾

43: jQuery Parallax efekt

11:09

44: jQuery Parallax efekt, časť druhá a taktiež ba priam posledná

12:11

Záver kurzu ⁽¹⁾

45: Záver webdesigner kurzu

3:04

✨ WEBREBEL REBORN ⁽¹⁾

Free preview

4:24

HTML a CSS základy na príklade ⁽²¹⁾

Free preview

2:35

Free preview

3:07

Free preview

2:48

Free preview

5:29

Free preview

4:54

Free preview

5:06

Free preview

5:16

Free preview

4:51

Free preview

2:20

Free preview

3:33

Free preview

3:39

Free preview

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 ⁽¹⁾

...na tomto ešte pracujem...

Prerobím macOS aplikáciu do HTML a CSS ⁽¹⁷⁾

Free preview

1:19

Free preview

1:49

Free preview

5:44

Free preview

5:24

Free preview

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 ⁽²²⁾

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

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

18 | RESPONZÍVNA NAVIGÁCIA, reaguje na veľkosť obrazovky

4:59

19 | KOĽKO MEDIA QUERIES? kedy pridať break-pointy, LOGO

7:33

20 | CSS GRID, responzívny footer

8:58

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 ⁽²⁾

makám makám

Finálny projekt: responzívne portfólio (HTML + CSS)

Course instructor

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 Rating

22 Courses

Online course chapters

Course instructor

Yablko (Roman Hraška)

Recommended online courses

Carousel

Node.js základy

Úvod do Pythonu pre Data Science

Automatizácia v Cypress.io v12

Základy iOS programovania v jazyku Swift

Základy programovania a OOP

Základy Next.js

Power BI Desktop