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 ✏️…

Learn the Svelte JavaScript Framework - Full Course

Source

0
(0)

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

0 / 5. 0