> Canonical URL: https://codingcat.dev/course/intro-to-svelte/lesson/fundamentals-what-is-svelte # Fundamentals - What is Svelte | Intro to Svelte | CodingCat.dev Course [šŸ§¶ Intro to Svelte](/course/intro-to-svelte)Section 2.1 Ā· Lesson 2 of 14[![](/logos/tags/svelte-symbol-light.svg)![](/logos/tags/svelte-symbol-dark.svg)Svelte](/topic/svelte)[![](/logos/tags/sveltekit-symbol-light.svg)![](/logos/tags/sveltekit-symbol-dark.svg)SvelteKit](/topic/sveltekit)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[ā† Prev Lesson](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings)[Next Lesson ā†’](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) # Fundamentals - What is Svelte ![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/5e283fb0d0ffe55c9c179aca147a1c03dd88d599-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTubeā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ā†—](https://www.youtube.com/watch?v=dZ1CI3u1MYA&list=UUnKZ8gEb78zXKMi1ns-IQ2g)Lesson 2 / 14Course Lessons Outlineā–¾1Section 1 - [1.1VSCode Extensions and Settings](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings) 2Fundamentals - [2.1Fundamentals - What is Svelte](/course/intro-to-svelte/lesson/fundamentals-what-is-svelte) - [2.2Fundamentals - Why SvelteKit](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) - [2.3Fundamentals - Benefits of SvelteKit](/course/intro-to-svelte/lesson/fundamentals-benefits-of-sveltekit) - [2.4Fundamentals - Performance](/course/intro-to-svelte/lesson/fundamentals-performance) - [2.5Fundamentals - File Based Routing](/course/intro-to-svelte/lesson/fundamentals-file-based-routing) - [2.6Svelte Fundamentals - Styling in Svelte](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) 3Svelte Basics - [3.1Svelte Basics](/course/intro-to-svelte/lesson/svelte-basics-getting-started) - [3.2Svelte Basics - Sugar Syntax Markup](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup) - [3.3Svelte Basics - Sugar Syntax Logic and Each Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) - [3.4Svelte Basics - Sugar Syntax Await and Key Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) - [3.5Svelte Basics - Reactivity](/course/intro-to-svelte/lesson/svelte-basics-reactivity) - [3.6Svelte Basics - Props](/course/intro-to-svelte/lesson/svelte-basics-props) - [3.7Svelte Basics - Slots](/course/intro-to-svelte/lesson/svelte-basics-slots) ## What is Svelte?** Svelte is a component framework that allows you to break up your application into reusable chunks and provides some sugary syntax, making your code base easy to understand and very graceful. Svelte is similar to React & Vue, with one key difference, there is NO VIRTUAL DOM. Instead of shipping the framework to the browser and letting it do the work, Svelte compiles itself away during a build step into vanilla html, css, and js. Making it one of the leanest frameworks out there If you have experience with HTML, CSS, and JavaScript, you will feel right at home with Svelte. Having just a basic understanding is all that you need and weā€™ll cover everything else in this course. Next letā€™s take a look at what weā€™ll be using to write our applications. āœļø Visual Architecture Diagram ## how this course connects together. Follow AJ through the layered stack topology from input contract to production output. Letā€™s build it!āœļø Architecture Diagram: Intro to Svelte: Fundamentals - What is SvelteLAYERED SYSTEM STACKARCHITECTURE DIAGRAM[Diagram Walkthrough]Content-driven layered-stack diagram for Intro to Svelte: Fundamentals - What is Svelte: Fundamentals -> Intro to Svelte -> Verified Production Artifact.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](https://cdn.sanity.io/images/hfh83o0w/production/fce6fcae58667ff3143db133eb6b57fbd9ec471f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-web-development-foundations)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/javascript-symbol-light.svg)![](/logos/tags/javascript-symbol-dark.svg)JavaScript](/topic/javascript)[+1](/course/odin-web-development-foundations) ### [The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations) Master the complete Odin Project Foundations path modernized for 2026: how the web works, semantic HTML5, CSS Box Model & Flexbox, and JavaScript DOM fundamentals. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](https://cdn.sanity.io/images/hfh83o0w/production/93736ccee5b8c088a202f319ce1223899a41f6bf-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-advanced-html-css-and-a11y)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[#Accessibility](/topic/a11y)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[+1](/course/odin-advanced-html-css-and-a11y) ### [The Odin Project 5: Advanced HTML, CSS View Transitions & WCAG Accessibility](/course/odin-advanced-html-css-and-a11y) Build 60fps GPU-accelerated animations, multi-page Astro View Transitions, WCAG AAA focus rings, and accessible native and Popover components. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/intro-to-svelte) ## Intro to Svelte 2/141 ### Section 1 - [1.1VSCode Extensions and Settings](/course/intro-to-svelte/lesson/svelte-fundamentals-vscode-extensions-and-settings) 2 ### Fundamentals - [2.1Fundamentals - What is Svelteā–¶](/course/intro-to-svelte/lesson/fundamentals-what-is-svelte) - [2.2Fundamentals - Why SvelteKit](/course/intro-to-svelte/lesson/fundamentals-why-sveltekit) - [2.3Fundamentals - Benefits of SvelteKit](/course/intro-to-svelte/lesson/fundamentals-benefits-of-sveltekit) - [2.4Fundamentals - Performance](/course/intro-to-svelte/lesson/fundamentals-performance) - [2.5Fundamentals - File Based Routing](/course/intro-to-svelte/lesson/fundamentals-file-based-routing) - [2.6Svelte Fundamentals - Styling in Svelte](/course/intro-to-svelte/lesson/fundamentals-styling-in-sveltekit) 3 ### Svelte Basics - [3.1Svelte Basics](/course/intro-to-svelte/lesson/svelte-basics-getting-started) - [3.2Svelte Basics - Sugar Syntax Markup](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-markup) - [3.3Svelte Basics - Sugar Syntax Logic and Each Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-logic-each-block) - [3.4Svelte Basics - Sugar Syntax Await and Key Blocks](/course/intro-to-svelte/lesson/svelte-basics-sugar-syntax-await-and-key-blocks) - [3.5Svelte Basics - Reactivity](/course/intro-to-svelte/lesson/svelte-basics-reactivity) - [3.6Svelte Basics - Props](/course/intro-to-svelte/lesson/svelte-basics-props) - [3.7Svelte Basics - Slots](/course/intro-to-svelte/lesson/svelte-basics-slots) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons ā†’](https://www.youtube.com/@codingcatdev?sub_confirmation=1)