Learn the Svelte JavaScript Framework - Full Course

Full Course on the Svelte JavaScript Framework. ⭐️ Code / Projects ⭐️ Handwashing App 🔗 https://phptuts.github.io/fcc-handwashing/ 🔗 https://github.com/phptuts/fcc-handwashing COVID-19 US Tracker App 🔗 https://covid-us.noahglaser.net/ 🔗 https://github.com/phptuts/fcc-covid-19-us Project Estimator App 🔗 https://phptuts.github.io/fcc-project-estimator-svelte/ 🔗 https://github.com/phptuts/fcc-project-estimator-svelte Tictactoe App 🔗 https://phptuts.github.io/fcc-tictactoe-svelte/ 🔗 https://github.com/phptuts/fcc-tictactoe-svelte ✏️ Created by by Coding With Noah: https://www.youtube.com/channel/UCjWnee4Cv1MESU8ALLsHdCA ⭐️ Course Contents ⭐️ ⌨️ (00:01:02) What is svelte ⌨️ (00:01:25) What is Sapper ⌨️ (00:01:49) Svelte Demo 🔗 REPL Demo: https://svelte.dev/repl/856a0501186742b2b2446fd720271ed4?version=3.20.1 ⌨️ (00:07:41) What we are building ⌨️ (00:10:48) What you will need 🔗 https://nodejs.org/en/ 🔗 https://git-scm.com/ 🔗 https://github.com 🔗 https://code.visualstudio.com/ 🔗 https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode ⌨️ (00:11:36) Installing Svelte ⌨️ (00:12:56) Clean up + tour ⌨️ (00:16:46) Installing CSS 🔗 https://www.npmjs.com/package/rollup-plugin-css-only 🔗 https://blueprintcss.dev/docs/grid npm install blueprint rollup-plugin-css-only --save-dev @import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap'); body { font-family: 'Lato', sans-serif; } ⌨️ (00:25:15) Components & HTML 🔗 https://www.who.int/gpsc/clean_hands_protection/en/ ⌨️ (https://)freesound.org/people/metrostock99/sounds/345086/ ⌨️ (00:42:06) Timer Component & Reactive Variables ⌨️ (00:55:39) Playing Sound & Custom Events ⌨️ (01:02:32) Github Pages npm install gh-pages --save-dev ⌨️ (01:06:41) What is Sapper 🔗 https://sapper.svelte.dev/ ⌨️ (01:07:31) What we'll be using to build covid-19 US Tracker 🔗 https://covidtracking.com/ 🔗 https://bulma.io/ 🔗 https://www.chartjs.org/ 🔗 https://momentjs.com/ 🔗 https://github.com/axios/axios ⌨️ (01:08:52) Tour of the app 🔗 https://covid-us.noahglaser.net/ ⌨️ (01:10:49) Project Setup / Sapper Tour ⌨️ (01:20:48) Project Cleanup ⌨️ (01:25:21) NPM Install + Bulma Setup npm install bulma rollup-plugin-css-only chart.js moment --save-dev npm install --save axios ⌨️ (01:31:09) Page & Components ⌨️ (01:41:24) NavBar 🔗 https://bulma.io/documentation/components/navbar/ ⌨️ (01:51:39) About Pages + Titles 🔗 https://bulma.io/documentation/layout/section/ ⌨️ (01:58:55) Getting data from an api ⌨️ (02:13:51) Populating CovidStat component with data 🔗 https://covidtracking.com/api ⌨️ (02:21:22) Error Page ⌨️ (02:24:51) CovidStat data for the states ⌨️ (02:45:30) Requesting & Parsing Chart Data 🔗 https://charturl.com/app/examples/chartjs-timeseries ⌨️ (03:04:32) Covid Chart Component ⌨️ (03:21:39) Covid Chart State Component + Fixing Chartjs Errors ⌨️ (03:33:29) Request Data For States Table Component ⌨️ (03:41:48) Table Component ⌨️ (03:49:31) Filtering Table Component ⌨️ (04:12:03) Deploying Sapper 🔗 https://www.digitalocean.com/docs/networking/dns/how-to/add-domains/ 🔗 https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04 🔗 https://certbot.eff.org/ 🔗 https://pm2.keymetrics.io/ ⌨️ (04:29:25) Final Touches + Redeploy 🔗 https://sapper.svelte.dev/docs/#prefetch_href ⌨️ (04:40:53) Project Estimator Introduction ⌨️ (04:41:44) Writable Store Demo 🔗 https://svelte.dev/examples#writable-stores ⌨️ (04:45:36) Project Setup 🔗 https://sscaffold-css.com/ ⌨️ (04:52:01) Component Setup ⌨️ (04:56:28) Form Components ⌨️ (05:12:27) Writable Stores ⌨️ (05:21:13) Table Component ⌨️ (05:32:52) Edit Item ⌨️ (05:43:31) Remove Item ⌨️ (05:50:31) Github Pages ⌨️ (5:53:50 )Fixing Bugs and Redeploying 🔗 https://github.com/sveltejs/svelte/issues/4687 🔗 https://github.com/sveltejs/svelte/pull/4689 ⌨️ (06:01:44) Svelte Amazing Community ⌨️ (06:03:00) Readable Stores Example 🔗 https://svelte.dev/examples#readable-stores ⌨️ (06:05:53) Challenge Create HTML & CSS & Props ⌨️ (06:17:55) Node Server Tour 🔗 https://github.com/phptuts/tictactoe-server 🔗 https://chrome.google.com/webstore/detail/smart-websocket-client/omalebghpgejjiaoknljcfmglgbpocdp?hl=en-US 🔗 https://www.postman.com/ ⌨️ (06:26:34) Readable Store ⌨️ (06:46:23) Websock ⌨️ (06:58:14) New Game ⌨️ (07:02:19) Deploying TicTacToe To Github ⌨️ (07:06:20) Other Resources and Libraries 🔗 https://svelte.dev/tutorial/basics 🔗 https://svelte.dev/examples#hello-world 🔗 https://routify.dev/ 🔗 https://bestguy.github.io/sveltestrap/ 🔗 https://smeltejs.com/ 🔗 https://sveltematerialui.com/ 🔗 https://discordapp.com/invite/yy75DKs 🔗 https://www.reddit.com/r/sveltejs 🔗 The Return of 'Write Less, Do More' by Rich Harris: https://www.youtube.com/watch?v=BzX4aTRPzno 🔗 Rich Harris: Thinking Reactively: https://www.youtube.com/watch?v=AdNJ3fydeao ⌨️ (07:09:38) Congrats you completed the course