HTML a CSS od základov 🇸🇰
Vložit
- čas přidán 15. 06. 2024
- HTML a CSS nie sú len webstránky. Web technológiami (HTML, CSS, JS) dnes vieš vyrobiť plnohodnotné aplikácie. Mobilné, desktopové. HTML a CSS sú ideálny vstup do IT sveta. Do textu pridávaš tzv. značky, to je celé. Neexistujú tu žiadne algoritmy, funkcie, iné podlé slová. Každý to zvládne, stačí len čas a trpezlivosť a usmernenie. To ti dám! Tu! Podpor ma ♥️ cez PATREON / yablko .
⬇️ Stiahni KÓD a NÁJDI VŠETKY DÔLEŽITÉ ODKAZY
:: github.com/yablko/html-a-css-...
🤘 WEBREBEL KURZ
:: www.learn2code.sk/kurzy/webre...
📚 Všetky moje learn2code kurzy
:: www.learn2code.sk/instruktori... 1300+ videí
❤️ PATREON / yablko
🎙PODCAST • Je pre firmu dôležitej...
🎬 CZcams 2 / yablko
🍿 TWITCH twitch.com/yablko_
📸 INSTAGRAM / yablko
👍 FACEBOOK / yablko.smrdi
🐦 TWITTER / yablko
📚 BLOGY / yablko
00:00 00 | HTML a CSS nie sú len webstránky
02:04 01 | Tu nájdeš viac, ponorím ťa do detailov
02:43 02 | HTML a štruktúra DOKUMENTU (index.html, title, body)
05:45 03 | NADPISY a ODSTAVCE, HTML dáva VÝZNAM cez ZNAČKY (h1, h2, p)
08:25 04 | VISUAL STUDIO CODE, nastavenia, nauč sa [{(‹ZÁTVORKY›)}]
13:46 05 | HTML píšeš aj pre ROBOTOV a PROGRAMY (strong, em)
18:32 06 | IMG obrázky, HTML atribúty, MDN dokumentácia (img, alt)
23:32 07 | CSS, TEXT, FARBY, KOMENTÁRE (color, background, font-family)
28:29 08 | CSS, PADDING, MARGIN (article, border, width, font-size)
33:32 09 | NEEXISTUJE jeden správny kód, rozdiel medzi mnou a MALIAROM
35:41 10 | CSS RODIČIA a DETI, HTML štruktúra článku (header, footer, radius)
39:01 11 | DEVTOOLS, INSPECT ELEMENT, preskúmaj prvok
42:34 12 | TVRDÉ PRAVIDLÁ PRE SÚBORY, rady, webové zločiny
48:46 13 | HTML ATRIBÚTY, ZOZNAMY, MENU (ul, ol, li)
55:04 14 | HTML ODKAZ na inú stránku, LINK, HYPERTEXT (a, mailto, tel)
01:00:20 15 | Písanie kódu je len MALÁ časť práce
01:02:24 16 | CSS SELEKTORY, PSEUDO CLASSY, ŠPECIFICITA (hover, active)
01:08:49 17 | DIV je šupák a kto používa, je LÚZER (div, main, section)
01:11:45 18 | SEO, BUĎ ZLODEJ (kódu, všetci sme, tak sa učíš)
01:15:24 19 | CLASS, ID
01:20:35 20 | CESTY K SÚBOROM, prepoj HTML a CSS (link, ., .., /)
01:27:29 21 | CSS nastavenia pre KAŽDÝ projekt
🕸 HTML a CSS kurz bit.ly/WebdizajnKurz
⌨ Základy programovania kurz bit.ly/ZakladyOOP
☕ JavaScript kurz bit.ly/JavaScriptKurz
😂 Humor bit.ly/doleziteUmenie
všetko na yablko.sk programovanie na brm.sk kurzy na www.learn2code.sk
Poklona tebe yablko. Učenie sa od teba je veľmi zábavne a zaujímavé .Vždy sa teším na nove videa a kurzy v ktorých komentuješ ,učíš a zabávaš. prial by som si viac takýchto učiteľov v časoch keď som chodil na strednú.
🤍💭 bozi !! dekuju..kafi koupim Ti zasobu celou, hned jak vydelam prvnich par haliru 🤜🤛 😸
Tohle je tak úžasný tutorial, nejen že je to skvěle strukturované a jasné, ale ty vtipy mě zabíjejí :) Mám asi dost stejný styl humoru, protože ty hlody, to je teprve něco :D A pak že jsou ajťáci divní pavouci :))
Ja jsem divny pavouk D:
Snád moje prvé video ktoré má viac ako hodinu a ja som ho dopozeral. Super sa počúva tvoj hlas a ešte viac super to vysvetluješ , plánujem ísť na IT strednú školu a chcem sa trošku ponoriť do tohoto sveta takže idem nasťudovať viac videí od teba ! :D ďakujem :)
Si super ,nasmial som sa a aj niečo naučil .Hned sa mi lahšie hompluje gebula.,,very good job mister,, .
Parádne video. Yablko je velký borec. Teším sa na ďalšie videá !
Yablko... ty si proste kráľ :D som akurát v zahraničí v práci ale keď prídem home a budem mať viac času, tak sa určite prihlásim k tebe na kurz...
po cca 10 rokoch prace a obcasneho programovania a prace na CNC ma omrzili monterky a uz dlho hladam cestu kadial sa dostanem do sveta "kodenia" a myslim ze vdaka tymto navodom + patreonu sa aspon cosi naucim :D palec hore
Jsi výborný a s humorem. ❤️ děkuji moc pomohlo při kurzu. 🍀 přeji Ti jen to nejlepší a velmi úspěchů. 🍀🍀🦋Dávám odběr ;)
Tyjo, nedělám web dev, ale rikal jsem si, ze zaklady html a css umim a přesto jsem se dozvěděl spoustu informací, které se mi budou hodit. Děkuju! Super video.
Velmi poučné video, len to ešte vyskúšať v praxi :) Každopádne vďaka za toto video, presne toto som dnes hladal.
HTML i CSS ovládám, pár webů jsem už vytvořil. Přesto mě tento a podobné tutorialy baví. Většinou se z nich naučím něco nového, a když ne, tak si krásně osvěžím znalosti. Díky.
Dakujem velmi pekne za kurz (tutorial) veľmi mi to pomohlo si šef.
Musim pochvalit Yablka za jeho talent na ucenie. Presiel som zatial web rebel 1 kurz a musim povedat ze zatial to bol najschopnejsi kurz aky som kedy sledoval. Jasne, jednoducho a zabavne podane informacie + vypichnute podstatnych a nepodstatnych veci robia z tohoto kurzu naozaj to co som hladal. Po kurze som si pustil niekolko konkurencnych vyucnych videi na internete a musim dodat ze ak by som sa niekedy z nich nieco naucil tak by to trvalo 5 nasobne dlhsie. Dik a vela zdaru v dalsej tvorbe
skoda ze taketo tvoje videa neboli ked som mal 18. To by bol super uvod do web dev sveta. Teraz uz som stary ch... :D Ale aj tak tieto veci pozeram, aj ked ich viem, asi z nostalgie alebo co.
To same si rikam kdyz sleduji kolik kanalu ohledne matematiky lze dnes najit a kdyz ja studoval, tak to nebylo nic moc :D
stary? kolik ti je?
Ja se stal 'programatorem' ve 28 .. ve 20ti jsem si btw taky myslel ze jsem moc stary.
@@jsonkody a já v 37 :) nejvíc staří si lidi přijdou právě, když jsou úplně mladí :D
@@gumidkova ja sa stavam programatorom v 43... je to len cislo pri uceni no nie pri cviceni (v posilke a pod v zaciatkoch)
Ja mám 37 a teraz začínam s programovaním. Úplne ma to ovládlo:-) čakajú ma roky driny, ale aj nových zaujímavých poznatkov , zatiaľ je to ako dobrodružstvo
Mojím snom je mať v 50tke nejaké fajn pracovné miestečko za počítačom. Je to reálne? Momentálne pracujem ako obchodný zástupca, ale som už dosť ucestovany a tlakmi na výkon za čoraz menej peňazí aj unavený. Už to nie je tak ako kedysi, keď sa šikovní obchodníci mali dobre a boli aj fajn ohodnotení.
❤ PATREON patreon.com/yablko podpor ma
🎙 PODCAST czcams.com/video/DktmaHXd4ps/video.html podcast
📚 MOJE KURZY www.learn2code.sk/instruktori/roman-hraska 1300+ videí
🍿 TWITCH twitch.com/yablko_ tu odpovedám na otázky
🎬 DRUHÝ CZcams czcams.com/users/yablko humor
⬇️ Stiahi si KÓD (a nájdi všetky ODKAZY) github.com/yablko/html-a-css-zaklady
00:00 00 | HTML a CSS nie sú len webstránky
02:04 01 | Tu nájdeš viac, ponorím ťa do detailov
02:43 02 | HTML a štruktúra DOKUMENTU (index.html, title, body)
05:45 03 | NADPISY a ODSTAVCE, HTML dáva VÝZNAM cez ZNAČKY (h1, h2, p)
08:25 04 | VISUAL STUDIO CODE, nastavenia, nauč sa [{(‹ZÁTVORKY›)}]
13:46 05 | HTML píšeš aj pre ROBOTOV a PROGRAMY (strong, em)
18:32 06 | IMG obrázky, HTML atribúty, MDN dokumentácia (img, alt)
23:32 07 | CSS, TEXT, FARBY, KOMENTÁRE (color, background, font-family)
28:29 08 | CSS, PADDING, MARGIN (article, border, width, font-size)
33:32 09 | NEEXISTUJE jeden správny kód, rozdiel medzi mnou a MALIAROM
35:41 10 | CSS RODIČIA a DETI, HTML štruktúra článku (header, footer, radius)
39:01 11 | DEVTOOLS, INSPECT ELEMENT, preskúmaj prvok
42:34 12 | TVRDÉ PRAVIDLÁ PRE SÚBORY, rady, webové zločiny
48:46 13 | HTML ATRIBÚTY, ZOZNAMY, MENU (ul, ol, li)
55:04 14 | HTML ODKAZ na inú stránku, LINK, HYPERTEXT (a, mailto, tel)
01:00:20 15 | Písanie kódu je len MALÁ časť práce
01:02:24 16 | CSS SELEKTORY, PSEUDO CLASSY, ŠPECIFICITA (hover, active)
01:08:49 17 | DIV je šupák a kto používa, je LÚZER (div, main, section)
01:11:45 18 | SEO, BUĎ ZLODEJ (kódu, všetci sme, tak sa učíš)
01:15:24 19 | CLASS, ID
01:20:35 20 | CESTY K SÚBOROM, prepoj HTML a CSS (link, ., .., /)
01:27:29 21 | CSS nastavenia pre KAŽDÝ projekt
Mám pocit, že už to viem len z pozretia.... škoda, že je to len pocit 😅 ....super video 👌✌️
Parada Yablčenko sikonvy si ....dobre som sa nasmial tie vložky su top 😂
Som momentálne účastníčkou pomerne nelacného Javascript kurzu, ale do obrazu 🧩 sa dostávam až vďaka Tvojej práci 👍. Som nadšená zo zrozumiteľnosti Tvojho vysvetľovania, už som si přikoupila aj web rebela 👏💥 Great job 💪🎩⬇️ Prisahám, že ešte jeden aha moment 🤩 a ťahám na patreon minimálne pozvať na kávu 🤑
to super, díky moc! potešila si ma:) nech sa darí, bav sa aj ďalej!
Super jsi první kdo mě tohle objasnil a naučil DĚKUJI ♥💪👍
Yablko . Si proste borec. 💪
Cením ten ananas na pizzu a inač super video.
Kámo dikec fakt moc ĎAKUJEM :D
SUPER.Jdu na další tvoje video
Veľmi pekný tutoriál :)
Mohol by si spraviť niake video o všetkých klavesových skratkách ktoré použivaš a tak?
8
Super video, ďakujem :)
Paráda, jses borec :)
Super, díky 👍
Si frajer ďakujem
V kazdom pripade si nemyslim ze tento Yablko je preafektovany, skor si myslim ze ma svoj vlastny styl ako ucit zaciatocnikov a osviezovat pamat pokrocilejsich. Ja mu davam ten najlepsi feedback.
pecka!👌
Ďakujem :)))
Nikto mi to nedokázal vysvetliť tak ako ty, veľké diky...
Ahoj Yablko, chtel bych se zeptat: mas nejak specialne nastaveny zvuk mikrofonu, treba v interface nebo v PC? Nebo doladeny do videa?
Prijde mi ze mas skvely zvuk ;)
Zajima me, jak moc je to 'mikrofonem' a jak moc nastavenim.
Pripravuju se, ze zacnu zase natacet, ale chci vylepsit celkovou kvalitu.
dík! žiadne špeciálne nastavenia. mám 2 videá, kde ukazujem svoj setup, aký mic a interface používam czcams.com/video/SU8qE1qEYmU/video.html v týchto tutoriáloch na konci počas strihu pridám len compressor (na vyváženie hlasitosti) a limiter (ktorý tomu dá strop). inak je to len mikrofón, interface, hlas a pár akustických panelov na stene. streamujem cez OBS, vtedy mám ešte zapnutý noise gate a noise suppression.
Skvele video ďakujem. Ale ako to je ak počas písania nejako vymazes polku codu co si písal trebarz hodinu? Je nejaká cesta späť, krok späť? 🤔
ctrl + z (cmd + z na Macu) funguje prakticky v každom programe. a používať napr. Git czcams.com/video/0v5K4GvK4Gs/video.html ktorým si priebežne robíš zálohy, ku krorým sa kedykoľvek vieš vrátiť.
fajnovo😁
ahojte, neviete preco mi neide nacitat obrazok podla yablka z netu???
na webe mi ho nenacita.....hm, viete pomoct?
Super tutoriál! Zdedil som správu jednoduchej statickej stránky a niekedy sa ňou trápim, prácne hľadám kde čo a ako nastaviť. Hovorím, že pracujem na nejakej vyššej úrovni a chýbajú mi základne stupienky. Tvoj tutoriál mi tie stupienky doplnil. Ďakujem.
Nainštaloval som si aj Visual Studio. Tu mi však vznikol problém, lebo v obsahu mi Visual nahradil všetky znaky s diakritikou týmito znakmi�. Ešte šťastie, že som to neskúšal na ostrom obsahu. Poradil by si mi prosím. kde a čo vo Visual-i mám nastaviť, aby sa to zobrazovalo správne?
skus pri otvorenom subore prikaz "change encoding" alebo "reopen with encoding" a potom vyber "utf8" pripadne skusaj, ktora moznost je pre teba spravna
@@RobWebSK Ďakujem. Prešiel som všetky možnosti no žiaľ diakritika je stále zblbnutá. Doteraz som tieto veci editoval PSPad-om, tak asi budem používať naďalej ten :-(
W3CSchools je super zdroj ;-)
Tak všade čítam ako je nemoderný a podobne, ale má dobrú štruktúru, kopu informácií, príkladov, ba až hotových riešení, vlastný "editor" kde hneď otestujem dajaké malé zmeny že ako sa to prejaví vo výsledku, ja myslím že stojí za návštevu (začiatočníkom určite).
@@danielgago-sk, absolútny súhlas. ;-)
Ahoj, prosím ťa, ako je ta klávesová skratka, keď chcem kúsok kódu iba vypnut, aby bol nefunkčný, ale nechcem ho vymazať... neviem za svet nájsť, kde si to spomínal... Ďakujem.
😍
jak ze ma za hodinu a pol naucis vela? dik😊 a mas aj kurz na python?
nemám, plánujem mať
@@RobWebSK 😊😊 si super
A yablko kdes ziskal to ice fox logo :D Si ho tam chci taky pridat :d
toto? www.mozilla.org/en-US/firefox/developer/
@@RobWebSK JJ dík moc
Ahoj,
Chci se naučit programovat web.. ale sem uplny začátečník...
Mám si projet toten kurz alebo rovnou skocit na webrebel kurz ?
Díky moc.
pokojne začni týmto. vo Webrebel kurze toho je samozrejme viac, takže ak chceš pokračovať, potom skoč na Rebela.
Vůbec se mi nechce udělat rámeček když zadám border, mám to napsané podle tebe, zkoušel jsem to pak udělat i kolem obrázku a taky nic, jakoby mi ten příkaz nefungoval, čím by to mohlo být? Díky
potrebujem odozvu do 2 dni
Yablko ma naučil programovať
HTML není programovací jazyk 😛👅
RIP Vašo Patejdl
RIP Vašo
Ahoj. chcel by som sa spýtať, ako vytvorím napr. mobilnú apku s HTML , CSS a JS? Dikes.
napriklad s ionicframework.com
@@RobWebSK Dikes
Nemáte náhodou někdo zkušenost ve VS Code, že při psaní kódu vám lehce problikává obrazovka, jak kdyby se měnil jas obrazovky při zmáčknutí některých kláves. Nedělá to pravidelně, takže nejsem schopný popsat proč nebo kdy..
Kamarátky sa pýtal ;)
lepsi tutorial na HTML a CSS ako 4 roky na SOS Stara Tura
nevíte někdo proč se mi při vytváření bariéri obrázku udělají dvě bariéri?
Ahoj. Mam menši problem chcem ti napisat aj na ig ale asi by to bolo márne. Neviem ako dalej. Robim login page a kef na submit dám link tak ho otvori bez toho ci su polička vyplnene a to nechcem vedel by si mi helpnuť dakujem
pridaj inputom atribut "required"
@@RobWebSK to tam mam ale ked dám že sumbmit alebo login tak ma to pusti aj tak. A ten input submit mam cez js. A neviem ako to urobit.
Akože otvorenie linku mam v js pri input submit ze ked kliknem mi to otvori ten link alebo subor
@@johnthalandjpulirez6382 ak submit robíš javascriptom, tak javascriptom porieš aj overenie, či sú hodnoty v inputoch správne vyplnené. volá sa to validácia. validation. ak kód nechceš písať sám, existujú validačné knižnice.
@@RobWebSK vedel by si mi to poslat alebo ten code? Ja to mam tak že
function login() {
window.location.href="index.html";
}
A ako to mam tam pridat? Som z toho ony...
Nejde mi border když jen napíšu bord tak nemám žádnou nabýdku na tab udělal jsem to stejně jak ve videu a nefunguje to prosím o radu
Mam ten istý problém, všetko mení ale ten border neukáže.. skúšal som to presúvať v kóde ci to náhodou neovplyvňuje to že to je moc dole alebo hore ale absolútne to nepomáha
nevím proč mi nefunguje když tam napíšu padding: 50px; tak mi u dvojtečku nepříjmá a ten border zmizí a margin tam asi neexistuje
budeš mať chybu v kóde niekde okolo. riadok nad tým, pod tým...
nieco o css preprocesoroch nechystas? dik
mám celý kurz na sass www.learn2code.sk/kurzy/css-preprocesory-sass
@@RobWebSK vdaka pozriem
Před nedávnem jsem začal s HTML a css jen tak ze srandy. Když jsem chodil na základku tak jsem si dělal v HTML svoje stránky. Ale od té doby se technologie hodně změnily. A mám co dělat
Super, len keby si nebol taký perafektovaný :D musel som to vypnúť...
dík, chcel som dočítať tvoj koment, ale musel som to vypnúť
@@RobWebSK seba ?
Je to trápne ale dá sa aspoň niečo naučiť 😄
wtf ty si asi nejaky kido alebo co
Prosím o radu, počas práce v Visual Studio Code mi prestalo fungovať automatické dopĺňanie elementov. Napíšem p a nič, zapíše mi iba text a neponúkne element s jeho štruktúrou. Normálne mi to fungovalo a zrazu (možno som nechtiac stlačil nejakú skratku alebo čo) to prestalo. Čo sa s tým dá urobiť? Ďakujem za radu. A ďakujem za kurzy tento a Webrebel (zatiaľ).
už viem, v kóde mi chýbal jeden >
26:55
sef
Každý tvrdí že HTML a CSS není programování je to pravda?
neni to programovanie. aj keď záleží, v akom kontexte sa pýtaš. html a css nie sú programovacie jazyky (aj keď aj v tom ľudia vedia nesúhlasiť stackoverflow.com/questions/145176/is-html-considered-a-programming-language) ale keby napr. rozmýšľaš kam html a css zaradiť na CVčku, tak pokojne medzi programovacie jazyky, ktoré ovládaš. nevytvárať tomu vlastnú sekciu, lebo to je akurát viac confusing pre HR ľudí potom...
@@RobWebSK díky 💪
Odkedy je v CSS ku calc(), tak už sa v ňom programuje... 🙂 A premennné k tomu. A aby som nezabudol na "keyframes" s percentami a podobne. Dajako sa to posunulo do programovania pomaly.
Zajímá mě jak si udělám název stránky jak má třeba youtube youtube.com ?
čau ten tvuj kurz se nedaa koupit samostatne za 25e ale musis si koupit nejake predlpatne za 79 e ? @yablko
@ROB WEB s yablkom