Repository files navigation

HTML a CSS kurz 🇸🇰 Prerobím macOS appku do HTML a CSS. Počas toho ti vysvetlím Flexbox, CSS Grid, relatívne jednotky, CSS premenné, SVG... Keď sa učíš, najlepšie je mať projekt. Nestačí pozerať, nestačí čítať, musíš si to skúšať, len tak sa naučíš. Ak žiaden projekt nemáš, vymysli si. Ak ti nič nenapadá, okopíruj niečo existujúce! Chyť telefón, otvor appku, hociktorú, pridaj vlastné nápady, ideš!

Presne to som spravil. Na ukážku. Vzal som macOS appku a prerobil ju do HTML a CSS. Počas toho ťa naučím (ppp) pár povedzme pokročilejších CSS vecí. Toto video je pokračovanie kurzuHTML a CSS od základov 🇸🇰. Ak začínaš, pozri si to najprv ten, potom sa vráť sem.

Ak si učiteľ alebo škola, máš plné povolenie používať ako len chceš ❤️
Ak ma chceš podporiť, môžeš cezPATREONhttps://patreon.com/yablko 🙏
Patróni majú všetky videá skôr, kurzy dostanú aj ako text, občas im hodím ponuku na job a ďalšie srandy 👍

::https://youtu.be/WU-lZUCYTCQ

HTML a CSS od základov 🇸🇰
::https://youtu.be/LULd0858mUQ

FLEXBOX, CSS GRID
::https://css-tricks.com/snippets/css/a-guide-to-flexbox
::https://css-tricks.com/snippets/css/complete-guide-grid
::https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid
::https://medium.com/free-code-camp/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af
::https://bitsofco.de/css-grid-terminology
::https://www.vzhurudolu.cz/prirucka/css-flexbox
::https://www.vzhurudolu.cz/prirucka/css-grid

JEDNODUCHÉ CSS GRID LAYOUTY
::https://1linelayouts.glitch.me

GRID ŠPECIALITKY
::https://cssgridgarden.com
::https://cssgrid-generator.netlify.app

SKÚŠAJ SA NA SKUTOČNÝCH PROJEKTOCH
::https://www.frontendmentor.io

RELATÍVNE JEDNOTKY (em, rem, %, px, vh, vw)
::https://www.vzhurudolu.cz/prirucka/jednotky
::https://www.vzhurudolu.cz/prirucka/css-pixel

FONT STACKS, SYSTEM FONTS, GOOGLE FONTS
::https://www.cssfontstack.com
::https://css-tricks.com/snippets/css/system-font-stack
::https://fonts.google.com/specimen/Nunito#standard-styles

SVG
::http://svgicons.sparkk.fr
::https://www.vzhurudolu.cz/prirucka/ikonfonty-vs-svg
::https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

CSS PREMENNÉ
::https://www.vzhurudolu.cz/prirucka/css-promenne
::https://www.vzhurudolu.cz/prirucka/css-promenne-priklady
::https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855
::https://www.jonathan-harrell.com/blog/unlocking-the-benefits-of-css-custom-properties
::https://css-tricks.com/a-complete-guide-to-custom-properties

VYSKÚŠAJ SI FLEX A GRID NA STRÁNKACH OD WEBREBEL ŠTUDENTA
::http://danielgago.sk/testy/flex-box_tutorialPage.html
::http://danielgago.sk/testy/grid_tutorialPage.html

OSTATNÉ
::https://docs.emmet.io
::https://www.czechitas.cz/cs/blog/zaciname-s-it/frontend-vs-backend

kopíruj a kradni z kódu
::https://m.signalvnoise.compaying-tribute-to-the-web-with-view-source

moje VS CODE nastavenia
::https://gist.github.com/yablko/8a49e107e84f8693a86e4169210bf460

- v kurz spravim layout appky cez flexbox  - prerob to na grid   - dokonci poslednu "My lists" sekciu   - v kurze uvidis, ako ma vyzerat   - kod napis sama (je to "len" opakovanie toho isteho, co v kurze ukazujem)- ak vies javascript, rozhyb aplikaciu  - ze mozes pridavat nove todos   - upravovat, mazat todos  - oznacit todo ako hotovy  - ak nevies javascript, nevadi, raz ta naucim;)

KURZY, ktoré spomínam vo videu (trochu si spravím reklamu)

^{HTML/CSS skús ZDARMAhttps://www.youtube.com/playlist?list=PL3VwAXKvhemVw5DnAqeGbZx5AgEQT27xF
WEBREBEL kurz tuhttps://www.learn2code.sk/kurzy/webrebel-1-html-css-javascript
Všetky moje learn2code kurzyhttps://www.learn2code.sk/instruktori/roman-hraska 1300+ videí
Predplatné (dostaneš všetko, čo existuje)https://www.learn2code.sk/predplatne
Tu nájdeš kopu ukážok z mojich kurzov, skús si ich ZDARMAhttps://www.youtube.com/c/Yablko/playlists?view=1&sort=dd&shelf_id=0}

❤️ PATREONhttps://patreon.com/yablko
🎬 YOUTUBE 2https://youtube.com/yablko
🍿 TWITCHhttps://twitch.com/yablko_
📸 INSTAGRAMhttps://instagram.com/yablko
👍 FACEBOOKhttps://www.facebook.com/yablko.smrdi
🐦 TWITTERhttps://twitter.com/yablko
📚 BLOGYhttps://medium.com/@yablko

📚 Všetky moje learn2code kurzy
::https://www.learn2code.sk/instruktori/roman-hraska 1300+ videí