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 kurzu HTML 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š cez PATREON https://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 ZDARMA https://www.youtube.com/playlist?list=PL3VwAXKvhemVw5DnAqeGbZx5AgEQT27xF
WEBREBEL kurz tu https://www.learn2code.sk/kurzy/webrebel-1-html-css-javascript
Všetky moje learn2code kurzy https://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 ZDARMA https://www.youtube.com/c/Yablko/playlists?view=1&sort=dd&shelf_id=0
❤️ PATREON https://patreon.com/yablko
🎬 YOUTUBE 2 https://youtube.com/yablko
🍿 TWITCH https://twitch.com/yablko_
📸 INSTAGRAM https://instagram.com/yablko
👍 FACEBOOK https://www.facebook.com/yablko.smrdi
🐦 TWITTER https://twitter.com/yablko
📚 BLOGY https://medium.com/@yablko
📚 Všetky moje learn2code kurzy
:: https://www.learn2code.sk/instruktori/roman-hraska 1300+ videí