Prerobím Mac  appku do HTML a CSS

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 👍

---

✨ Prerobím Mac  appku do HTML a CSS (1h 17m 58s)

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

---

Odkazy

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

---

DOMÁCA ÚLOHA! (píš kód, skúšaj si to, len tak sa naučíš!)

- 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í