Webrebel 1: HTML, CSS & Javascript

Learn2Code

Popis kurzu

Obsah kurzu

Č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,
• časovo neobmedzený prístup ku kurzu, môžeš študovať kedy chceš a ako dlho chceš,
• 3 GB hosting The Hosting od WebSupportu na 3 mesiace zadarmo,

certifikát o absolvovaní kurzu akreditovaný Ministerstvom školstva SR, garancia vrátenia peňazí, ak nebudeš s kurzom spokojný.

Zoznam kapitol kurzu Webrebel 1: Časť HTML a CSS:

1. Začiatok HTML/CSS kurzu
2. Úvod do HTML, HTML tagy a prvá stránka
3. Inštalujeme Sublime Text 3
4. Doctype a kostra HTML dokumentu
5. Formátovanie textu v HTML
6. Developer Tools a správne štruktúrovaný HTML kód
7. HTML zoznamy – usporiadaný, neusporiadaný a definičný a šafrán
8. Odkazy, linky, emaily a telefónne čísla
9. Obrázky, rozmery obrázkov, obrázky v linkoch, hotlinking
10. Formáty obrázkov, ktoré, kedy a ako použiť a redukcia veľkosti obrázkov
11. Ako funguje načítanie a zobrazenie internetovej stránky
12. Úvod do CSS, CSS vlastnosti, CSS selektory a deklarácie
13. Špecifické CSS selektory, používanie Classov a IDčiek v CSS
14. Úvod do typografie a kompletný redizajn stránky bez dotyku HTML súboru
15. CSS box model a všetko je škatuľa
16. Block level elementy, element DIV a skutočná šírka elementu
17. Inline elementy, inline-block elementy, element SPAN
18. 3 spôsoby pridávania farieb v CSS
19. Typografia, webové fonty a štýlovanie textu v CSS
20. Základná štruktúra HTML stránky a validácia HTML kódu
21. Dizajn blogu – základný layout a hlavička
22. Dizajn blogu – hlavný obsah
23. Dizajn blogu – pätička a finálne úpravy
24. CSS kaskáda, špecificita selektorov
25. Tok dokumentu, pozícia elementov v dokumente a CSS clear float
26. Layout stránky pomocou CSS float, CSS float contain
27. Pozícia elementov pomocou CSS position: relative a position: absolute
28. z-index, position: fixed a ako vycentrovať position: absolute element
29. CSS background, base64 zakódované obrázky
30. Úvod do CSS3, CSS3 prefixy a CSS3 gradienty
31. CSS sprites a CSS3 multi-background
32. Štýlovanie HTML zoznamov
33. CSS reset, CSS normalize, úvod do HTML formulárov
34. Štýlovanie HTML formulárov
35. Štýlovanie HTML tabuliek
36. Spätná kompatibilita so starými prehliadačmi
37. Finálny projekt – dizajnovanie stránky portfólia – 1. časť
38. Finálny projekt – dizajnovanie stránky portfólia – 2. časť
39. Facivons, ďalšie HTML meta tagy
40. Koniec HTML/CSS kurzu

• BONUSové videá

Časť Responzívny dizajn:

1. Úvod do responzívneho webdizajnu
2. Static vs Liquid vs Adaptive vs Responsive
3. CSS media queries
4. Prerábka statického blogu na adaptívny dizajn – hlavička
5. Prerábka statického blogu na adaptívny dizajn – hlavný obsah
6. Prerábka statického blogu na adaptívny dizajn – pätička a finiš
7. Viewport, meta viewport na nastavenie šírky zariadenia
8. Box-sizing: border-box, CSS funckia calc()
9. Revolučný vzorec pre responzívnu revolúciu, mockups, dizajnovanie v prehliadači
10. Jednotka em, responzívna typografia
11. Layout pomocou jednotky em
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
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
20. CSS3 Transforms, CSS3 Transitions
21. CSS Bootstrap Part 1
22. CSS Bootstrap Part 2
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
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
32. Koniec Responsive Webdesign kurzu

• BONUSové videá

Časť JavaScript/jQuery:

1. Úvod do JavaScriptu a jQuery
2. Úvod do programovania – Javascript konzola a premenné
3. Úvod do programovania – čísla a reťazce
4. Úvod do programovania – polia a objekty
5. Úvod do programovania – funkcie a metódy
6. Document Object Model, reprezentácia HTML kódu v prehliadači, vzťahy medzi elementami
7. jQuery, pridanie knižnice do stránky lokálne alebo cez CDN
8. Úvod do jQuery animácií a reťazenie metód
9. jQuery metódy, getter/setter princíp
10. Vlastné jQuery animácie
11. Javascripty v hlavičke vs. na konci HTML body elementu
12. Document ready funkcia, kompatibilita jQuery s inými Javascript knižnicami
13. Úvod do Javascript eventov / udalostí
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
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 20: jQuery Image Lightbox #1
20. jQuery Image Lightbox #2
21. Animácia scrollovania #1
22. Animácia scrollovania #2, Javascript callback funkcie
23. Späť na vrch, ako pán!
24. jQuery image slider, menič obrázkov
25. jQuery image slider, časť druhá
26. Javascript object literal pattern
27. Slider ako object literal pattern s nastaveniami od usera cez jQuery.extend()
28. Pokročilé jQuery animácie #1 – spolupráca jQuery a CSS3
29. Pokročilé jQuery animácie #1 – animovanie farieb
30. Galéria obrázkov rozdelená na viac strán
31. CSS3 animovaná galéria, HTML5 data atribúty, práca so stringami v Javascripte
32. Dokončenie galérie, Javascript Prototype, tajné dáta cez jQuery.data()
33. Viacstránková galéria cez AJAX, princíp Request-Response
34. AJAXová galéria pomocou jQuery.load() metódy
35. Vylepšenie AJAX galérie cez jQuery.ajax() metódu
36. Pokročilý AJAX – asynchrónny javascript, JSON, princíp promises a metóda jQuery.each()
37. Interface knižnica jQuery UI, jej metódy a eventy
38. jQuery UI Slider, Tooltip, pokročilé používanie UI komponentov a komunikácia medzi nimi
39. Úvod do jQuery pluginov
40. Vlastný jQuery lightbox plugin
41. Dokončenie jQuery pluginu, aby mal schopnosť prijímať nastavenia od usera
42. jQuery Parallax efekt
43. jQuery Parallax efekt, časť druhá a taktiež ba priam posledná
44. Záver webdesigner kurzu

• BONUSové videá

Kontaktná osoba

+421 949 428 812
info@learn2code.sk

Hodnotenie