Learn the Svelte JavaScript Framework - Full Course

Learn the Svelte JavaScript Framework - Full Course

Learn the Svelte JavaScript Framework. Svelte is a free and open-source JavaScript framework, Svelte applications do not include framework references. Instead, building a Svelte applications generates code to manipulate the DOM, which may give better client run-time performance.

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:[email protected]&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

svelte javascript web-development

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

JS Development Company India | JavaScript Development Services

Best JavaScript web app development company in India, PixelCrayons provides full stack JS development & maintenance. 16+ Yrs Exp., 60% less cost, Strict NDA

Exposing Most Common Web Development Myths | ByteCipher

Are you looking for the best Web and Mobile App Development Company in India? We at ByteCipher are offering creative & custom web and mobile app development services worldwide

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...