{"id":10873,"date":"2023-08-25T11:17:50","date_gmt":"2023-08-25T09:17:50","guid":{"rendered":"https:\/\/www.websupport.sk\/blog\/?p=10873"},"modified":"2025-03-11T21:07:10","modified_gmt":"2025-03-11T20:07:10","slug":"ako-sa-co-najrychlejsie-naucit-html-a-css","status":"publish","type":"post","link":"https:\/\/www.websupport.sk\/blog\/2023\/08\/ako-sa-co-najrychlejsie-naucit-html-a-css\/","title":{"rendered":"Ako sa \u010do najr\u00fdchlej\u0161ie nau\u010di\u0165 HTML a CSS? Vysk\u00fa\u0161ajte 5 super tipov"},"content":{"rendered":"Doba \u010d\u00edtania:<\/b><\/span> 6<\/span> min.<\/span><\/span>\n

U\u017e v\u00e1s nebav\u00ed \u010daka\u0165 na developera, k\u00fdm si n\u00e1jde \u010das? Chcete si vedie\u0165 sami<\/em><\/em> upravi\u0165 web priamo cez k\u00f3d? Alebo si ho rovno vytvori\u0165 pod\u013ea seba? <\/em><\/p>\n\n\n\n

Ak \u00e1no, HTML a CSS s\u00fa vstupnou br\u00e1nou k v\u00e1\u0161mu cie\u013eu. Nau\u010di\u0165 sa tieto programovacie jazyky je aj pre \u00fapln\u00e9ho laika takmer hra\u010dkou. Never\u00edte? Vyberte si niektor\u00fd z odpor\u00fa\u010dan\u00fdch kurzov programovania pre za\u010diato\u010dn\u00edkov a nau\u010dte sa vytv\u00e1ra\u0165 weby. R\u00fdchlo a jednoducho.<\/em> Ale najprv si povedzme, \u010do sa za t\u00fdmito skratkami skr\u00fdva.<\/em><\/p>\n\n\n\n

Obsah<\/strong><\/p>\n\n\n\n

1. \u010co je HTML a CSS?<\/a><\/p>\n\n\n\n

2. Pre\u010do sa u\u010di\u0165 HTML a CSS?<\/a><\/p>\n\n\n\n

3. Ako za\u010da\u0165 programova\u0165 v HTML a CSS?<\/a><\/p>\n\n\n\n

3.1. Webrebel<\/a><\/p>\n\n\n\n

3.2. freeCodeCamp<\/a><\/p>\n\n\n\n

3.3. ITnetwork<\/a><\/p>\n\n\n\n

3.4. Coursera<\/a><\/p>\n\n\n\n

3.5. codeacademy<\/a><\/p>\n\n\n\n

\u010co je HTML a CSS?<\/h2>\n\n\n\n

HTML (Hypertext Markup Language<\/em>) a CSS (Cascading Style Sheets<\/em>) patria k z\u00e1kladom programovania, pokia\u013e ide o weby. S\u00fa to zna\u010dkovacie jazyky, v ktor\u00fdch dok\u00e1\u017eete vytvori\u0165 jednoduch\u00fa webstr\u00e1nku u\u017e za nieko\u013eko dn\u00ed. Pr\u00edpadne si t\u00fa svoju dok\u00e1\u017eete upravi\u0165 pod\u013ea seba u\u017e za nieko\u013eko hod\u00edn kurzu.<\/p>\n\n\n\n

HTML a CSS s\u00fa n\u00e1strojom na vytvorenie frontend-u webstr\u00e1nok<\/strong>. Frontend je to, \u010do vid\u00edte, ke\u010f sa str\u00e1nka na\u010d\u00edta (z angl. front<\/em> – predn\u00fd, end<\/em> – koniec). HTML zabezpe\u010duje \u0161trukt\u00faru webu<\/strong> (napr. hierarchia obsahu, prid\u00e1vanie r\u00f4zneho typu obsahu ako vide\u00e1, obr\u00e1zky, audio nahr\u00e1vky, vytv\u00e1ranie prepojen\u00ed medzi webmi at\u010f.).<\/p>\n\n\n\n

CSS d\u00e1va<\/strong> webu vizu\u00e1lnu podobu<\/strong>. Je to akoby nadstavba vn\u00fatornej \u0161trukt\u00fary webu, ako \u010dokol\u00e1dov\u00e1 poleva na torte (ovl\u00e1da napr. farby, p\u00edsmo, pozadie, text, okraje, anim\u00e1cie, umo\u017e\u0148uje responz\u00edvny dizajn at\u010f.). V\u00fdhodou je aj to, \u017ee k\u00f3d webov\u00fdch str\u00e1nok je v\u010faka CSS preh\u013eadnej\u0161\u00ed a t\u00fdm viac SEO-friendly<\/strong> (priate\u013eskej\u0161\u00ed pre vyh\u013ead\u00e1va\u010de).<\/p>\n\n\n\n

Okolo 90 % webov funguje pr\u00e1ve na HTML. Oba programovacie jazyky sa pou\u017e\u00edvaj\u00fa a u\u010dia spolu.<\/p>\n\n\n\n

Pre\u010do sa u\u010di\u0165 HTML a CSS?<\/h2>\n\n\n\n

T\u00ed z v\u00e1s, ktor\u00ed u\u017e pracovali so \u0161abl\u00f3nou na vytvorenie webovej str\u00e1nky, vedia, o \u010dom to je. \u010casto to vyzer\u00e1 jednoducho. Ve\u010f si len naklik\u00e1te nejak\u00e9 mo\u017enosti a m\u00e1te web. Hlavu m\u00e1te pln\u00fa predst\u00e1v, ako bude va\u0161a str\u00e1nka vyzera\u0165, ako na nej bude v\u0161etko zladen\u00e9 a pekn\u00e9, super modern\u00e9 alebo naopak spiritu\u00e1lne, skr\u00e1tka va\u0161e.<\/p>\n\n\n\n

S nad\u0161en\u00edm sa p\u00fa\u0161\u0165ate do vyklik\u00e1vania webu. Postupne preh\u013ead\u00e1te v\u0161etky mo\u017enosti \u0161abl\u00f3ny \u2013 aj nieko\u013ekokr\u00e1t – a web st\u00e1le ani z\u010faleka nevyzer\u00e1 ako va\u0161a predstava. Sk\u00f4r uniforme ako ka\u017ed\u00fd in\u00fd. A zo \u0161abl\u00f3ny viac nedostanete<\/strong>.<\/p>\n\n\n\n

Pr\u00e1ve tu v\u00e1m pom\u00f4\u017eu znalosti HTML a CSS. Chcete ma\u0165 konkr\u00e9tny odtie\u0148 bielej, modrej a \u010dervenej, a \u0161abl\u00f3na ju jednoducho nepon\u00faka? Vlo\u017ete si ju priamo cez k\u00f3d. Chcete ma\u0165 \u0161pecifick\u00fd druh p\u00edsma a \u0161abl\u00f3na obsahuje 10 z\u00e1kladn\u00fdch, bez toho v\u00e1\u0161ho? Vlo\u017ete si ho cez k\u00f3d. Znie to mo\u017eno zlo\u017eito, ale u\u017e po prvom kontakte s HTML a CSS v\u00e1m bude jasn\u00e9, \u017ee je to jednoduch\u00e9.<\/p>\n\n\n\n

HTML a CSS v\u00e1m pom\u00f4\u017ee vtla\u010di\u0165 va\u0161u predstavu do kostry \u0161abl\u00f3ny<\/strong>. Ak zvl\u00e1dnete tieto dva jazyky na z\u00e1kladnej \u00farovni, dok\u00e1\u017eete si sami upravi\u0165 ak\u00fako\u013evek webov\u00fa str\u00e1nku a postupne aj vytvori\u0165 vlastn\u00fa. Nehovoriac o tom, ako st\u00fapne va\u0161a hodnota na pracovnom trhu<\/strong>. \u010ci u\u017e ste market\u00e9r, produktov\u00fd mana\u017e\u00e9r alebo dizajn\u00e9r, ak m\u00e1te aspo\u0148 z\u00e1kladn\u00e9 znalosti HTML, konkurencia nem\u00e1 \u0161ancu<\/strong>!<\/p>\n\n\n\n

Ak chcete ma\u0165 web, ktor\u00fd \u201evyt\u0155\u010da z davu\u201c, u\u017e viete, \u017ee bez HTML a CSS to nep\u00f4jde. Najprv v\u0161ak treba urobi\u0165 prv\u00fd krok.<\/p>\n\n\n\n

Ako za\u010da\u0165 programova\u0165 v HTML a CSS?<\/h2>\n\n\n\n

Ke\u010f\u017ee z\u00e1ujem je ve\u013ek\u00fd, existuje mno\u017estvo r\u00f4znych kurzov, n\u00e1vodov, vide\u00ed a tutori\u00e1lov, ktor\u00e9 v\u00e1s HTML a CSS r\u00fdchlo nau\u010dia. My v\u00e1m odpor\u00fa\u010dame<\/strong> t\u00fdchto 5 kurzov webdizajnu<\/strong>.<\/p>\n\n\n\n

Webrebel<\/a><\/h3>\n\n\n\n

Slovensk\u00fd online videokurz<\/a> z dielne Skillmea je zameran\u00fd na tvorbu vlastn\u00fdch webov pre \u00fapln\u00fdch za\u010diato\u010dn\u00edkov. Autorom kurzu je zn\u00e1my slovensk\u00fd program\u00e1tor, ktor\u00fd si hovor\u00ed Yablko<\/a>. Jeho osobit\u00fd \u0161t\u00fdl rob\u00ed z ka\u017ed\u00e9ho jeho videa doslova z\u00e1bavu. Preto \u017eiadnu nudu ne\u010dakajte. Kurz je akreditovan\u00fd Ministerstvom \u0161kolstva a od svojho vzniku sa do neho zapojilo u\u017e viac ako 5 000 webrebelov.<\/p>\n\n\n\n

D\u013a\u017eka kurzu: 25+ hod\u00edn videa
Cena za cel\u00fd kurz: 179 \u20ac s DPH
Jazyk: sloven\u010dina<\/p>\n\n\n\n

Cenu zaplat\u00edte za v\u0161etky 3 moduly kurzu (1. HTML a CSS, 2. responz\u00edvny dizajn, 3. JavaScript\/jQuery). Prv\u00fd modul venovan\u00fd pr\u00e1ve HTML a CSS si m\u00f4\u017eete vysk\u00fa\u0161a\u0165 \u00faplne zadarmo.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

freeCodeCamp<\/a><\/h3>\n\n\n\n

Ak ovl\u00e1date z\u00e1klady angli\u010dtiny a chcete z\u00edska\u0165 aj certifik\u00e1t za zvl\u00e1dnutie HTML a CSS na praktickom projekte, v\u0161etk\u00fdmi desiatimi odpor\u00fa\u010dame kurz na freecodecamp<\/a>. V\u0161etky kurzy na freeCodeCamp s\u00fa zameran\u00e9 prakticky, tak\u017ee \u201ek\u00f3dite\u201c od prvej min\u00faty a v\u00fdsledky aj chyby vid\u00edte hne\u010f. A s\u00fa \u00faplne zadarmo.<\/p>\n\n\n\n

V kurze webdizajnu sa v kr\u00e1tkom \u010dase nau\u010d\u00edte vytvori\u0165 si jednoduch\u00fa interakt\u00edvnu str\u00e1nku s fotkami ma\u010di\u010diek. V ponuke je aj kurz na vizualiz\u00e1ciu d\u00e1t, d\u00e1tov\u00fa anal\u00fdzu a machine learning v programovacom jazyku Python, aj kurz na informa\u010dn\u00fa bezpe\u010dnos\u0165. N\u00e1jdete tam tie\u017e kurz, ktor\u00fd v\u00e1s priprav\u00ed na pracovn\u00fd pohovor na poz\u00edciu program\u00e1tora, a mnoh\u00e9 \u010fal\u0161ie zauj\u00edmavosti.<\/p>\n\n\n\n

D\u013a\u017eka kurzu (HTML a CSS): z\u00e1vis\u00ed na v\u00e1s, ko\u013eko sa chcete nau\u010di\u0165;
pre z\u00edskanie certifik\u00e1tu: 300 hod\u00edn
Cena: zadarmo
Jazyk: angli\u010dtina<\/p>\n\n\n\n

ITnetwork<\/a><\/h3>\n\n\n\n

Patr\u00edte k \u013eu\u010fom, \u010do namiesto sledovania vide\u00ed rad\u0161ej \u010d\u00edtaj\u00fa a postupuj\u00fa v u\u010den\u00ed vlastn\u00fdm tempom? Vysk\u00fa\u0161ajte \u010desk\u00fd online tutori\u00e1l na platforme IT network<\/a>, ktor\u00fd v\u00e1s krok po kroku prevedie tvorbou jednoduch\u00e9ho statick\u00e9ho webu. Po\u010das 17 p\u00edsomn\u00fdch lekci\u00ed sa nau\u010d\u00edte pracova\u0165 s HTML a CSS – od \u00fapln\u00fdch z\u00e1kladov a\u017e po nahranie str\u00e1nky na internet.<\/p>\n\n\n\n

Port\u00e1l ITnetwork pon\u00faka aj \u010fal\u0161ie kurzy a n\u00e1vody na in\u00e9 technol\u00f3gie, tak\u017ee ak v\u00e1s programovanie za\u010dne bavi\u0165, na tejto str\u00e1nke sa m\u00f4\u017eete vybl\u00e1zni\u0165.<\/p>\n\n\n\n

D\u013a\u017eka kurzu: 17 lekci\u00ed
Cena: zdarma
Jazyk: \u010de\u0161tina<\/p>\n\n\n\n

Coursera<\/a><\/h3>\n\n\n\n

Mo\u017eno ste u\u017e po\u010duli o platforma Coursera<\/a>, ktor\u00e1 pon\u00faka cel\u00fa \u0161k\u00e1lu online kurzov nielen zo sveta IT. Kurzy vytv\u00e1raj\u00fa renomovan\u00e9 zahrani\u010dn\u00e9 univerzity a nad\u0161enci r\u00f4znych zru\u010dnost\u00ed. N\u00e1jdete tu platen\u00e9 aj neplaten\u00e9 kurzy.<\/p>\n\n\n\n

Odpor\u00fa\u010dame napr\u00edklad Kurz z\u00e1kladov responz\u00edvneho webdesignu<\/a>, kde v\u00e1s HTML, CSS a pr\u00edbuzn\u00fd JavaScript zadarmo nau\u010dia experti z University of London<\/em> s hodnoten\u00edm spokojnosti 97 %.<\/p>\n\n\n\n

D\u013a\u017eka kurzu: pribli\u017ene 25 hod\u00edn
Cena: zadarmo
Jazyk: angli\u010dtina (+ 11 \u010fal\u0161\u00edch)<\/p>\n\n\n\n

codeacademy<\/a><\/h3>\n\n\n\n

Znovu, ak v\u00e1m angli\u010dtina nerob\u00ed probl\u00e9m, perfektne, r\u00fdchlo a zadarmo sa viete nau\u010di\u0165 d\u00f4le\u017eit\u00e9 z\u00e1klady HTML<\/a> a CSS<\/a> aj na kurzoch codeacademy<\/a>.<\/p>\n\n\n\n

D\u013a\u017eka kurzu: HTML cca 9 hod\u00edn, CSS cca 10 hod\u00edn
Cena: zadarmo (bez certifik\u00e1tu)
Jazyk: angli\u010dtina<\/p>\n\n\n\n

Ak ste si niektor\u00fd z kurzov vysk\u00fa\u0161ali, dajte n\u00e1m vedie\u0165 va\u0161e sk\u00fasenosti. Nech sa pos\u00favame v u\u010den\u00ed v\u0161etci spolo\u010dne. Ak m\u00e1te vlastn\u00e9 tipy, sem s nimi! \ud83d\ude42 <\/p>\n\n\n\n

Vypo\u010dujte si na z\u00e1ver podcast s Yablkom o tom, \u010di sa programova\u0165 m\u00f4\u017ee nau\u010di\u0165 ka\u017ed\u00fd<\/em>:<\/p>\n\n\n\n

\n