We may earn an affiliate commission when you visit our partners.
Svelte.js - The Complete Guide (incl. Sapper.js)
Maximilian Schwarzmüller
and
Academind by Maximilian Schwarzmüller
Maximilian Schwarzmüller
and
Academind by Maximilian Schwarzmüller
Svelte.js is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.
Read more
Svelte.js is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.
Read more
Svelte.js is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.
You'll write your frontend application using normal JavaScript, following specific rules laid out by Svelte (which are of course taught in this course). As a result, the Svelte compiler will produce a small and highly optimized JavaScript bundle which can be deployed.
In this course, you learn all about Svelte, how it works, its core features and how to run your final app on a real server.
Svelte.js is a tool for building highly reactive, modern user interfaces for the web - and it's a great alternative to JavaScript frameworks and libraries like React.js, Angular or Vue.
What will you learn?
What is Svelte and why would you use it?
All the core features and base syntax
How to render conditional and list content
How to write reactive and fast web applications
All about components, how to pass data around and how to create re-usable building blocks
How to efficiently manage data in your application via Svelte stores
How to reach out to a backend server and send + fetch data
How to pre-render your app on a server and improve SEO
Is this course for you?
Svelte is a popular alternative to React.js, Angular and Vue and learning it will benefit any frontend web developer.
You don't need to know these frameworks to learn Svelte though - but if you do know them, you'll learn about an interesting alternative which might allow you to build your web projects with less code (and get an even faster app along the way. ).
You need NO advanced JavaScript knowledge, basic knowledge will do.
If you're interested in building modern, reactive user interfaces that load quickly and run fast, SvelteJS is a tool you shouldn't overlook.
What's in the course?
Learn Svelte from scratch - zero knowledge assumed.
Theory and practice modules
A complete course project (the "meetup planner")
Assignments and tasks
All source code is attached to lectures and modules
30 day trial phase - get your money back with no questions asked if you're not happy.
Who's teaching you?
My name is Maximilian Schwarzmüller and I'm teaching a broad variety of web & mobile development topics here on Udemy. I immediately loved Svelte when I learned about it since it fills an important gap between vanilla JavaScript and frameworks like Angular, React or Vue.
It can be used to replace these frameworks or to enhance apps built with them - and I simply love lightweight apps and clean syntax rules.
Register for this course and see more details by visiting:
OpenCourser.com/course/uwvdi9/svelte
What's inside
Learning objectives
- Sveltejs from scratch, with zero knowledge assumed
- All the theory and practical applications of svelte
- Core concepts and advanced techniques to build svelte applications
- Sveltejs from scratch, with zero knowledge assumed
- All the theory and practical applications of svelte
- Core concepts and advanced techniques to build svelte applications
Syllabus
Getting Started
Introduction
Why Svelte?
What is Svelte?
Read more
Syllabus
Getting Started
Introduction
Why Svelte?
What is Svelte?
Read more
Join our Online Learning Community
Setting Up a First App & The Course Project
Writing Some Svelte Code
Course Outline
How To Get The Most Out Of The Course
Course Resources
Base Syntax & Core Features
Module Introduction
Using Curly Braces & Understanding the Core Syntax
Reactive Variables
More Reactivity
Binding to Element Properties
Two-Way Binding Shortcut
Using Multiple Components
Components & Communication via Props
Diving Deeper into Bindings
Using Self-Extending Properties
Outputting HTML Content
A XSS Example
Setting Dynamic CSS Classes
Time to Practice: The Basics
Wrap Up
Useful Resources & Links
Working with Conditionals & Loops
Using "if" Statements in HTML
if, else & else-if
Outputting Lists with "each"
"each", "else" & Extracting the Index
Lists & Keys
Time to Practice: Conditionals & Loops
A Closer Look at List Keys
A Closer Look at Reactivity
Updating Arrays & Objects Immutably
Understanding Event Modifiers
Using Inline Functions
Course Project - First Steps
Project Setup & A First Component
Different Ways of Mounting Components
How to Embed Widgets
Adding Data
Adding a New Component (MeetupItem)
Working with Different Component Types
Passing Data Into Components
Adding a "MeetupGrid" Component
Adding New Meetups via a Form
Creating a "TextInput" Component
Adding a Custom "Button" Component
Diving Deeper Into Components
Understanding the Different Component Types
Component Communication Overview
Event Forwarding
Emitting Custom Events
How to Extract Event Data
Using Spread Props & Default Props
Working with Slots
Named & Default Slots
Example: Opening & Closing a Modal
Using Slot Props
The Component Lifecycle - Theory
Creation & Update Lifecycle Hooks in Action
Using "tick()"
Course Project - Components Deep Dive
Adding Default Props
Communication via Custom Events
Utilizing Slots
Creating an "EditMeetup" Component
Communicating Between Components
Time for More Slots!
Adding a Re-Usable "Modal" Component
Finishing the "Modal" Component
Working with Bindings & Forms
Two-Way Binding Refresher
Understanding Custom Component Bindings
Relying on Automatic Number Conversion
Binding Checkboxes & Radio Buttons
Binding
Binding to Element References
Binding to Component References
Validating Forms & Inputs
Good to know
Good to know
Know what's good ,
what to watch for , and
possible dealbreakers
Well-suited for frontend web developers who seek an alternative to React.Js, Angular & Vue
Ideal for beginners in Javascript who are interested in building reactive user interfaces
Provides a comprehensive study of Svelte.js, covering core features and advanced techniques
Taught by Maximilian Schwarzmuller, an experienced instructor known for his expertise in web development
Provides detailed explanations and practical examples to enhance understanding
Includes interactive materials and hands-on labs to reinforce learning
Save this course
Save Svelte.js - The Complete Guide (incl. Sapper.js) to your list so you can find it easily later:
Save
Save
Reviews summary
Engaging and well-paced course
Learners say this course offers comprehensive coverage of Svelte.js and Sapper.js. They appreciate the well-paced and engaging materials, including theory and practice exercises. Maximilian is praised for his expertise and the clean project structure he provides. Learners highly recommend this course and others by Maximilian and Academind.
Activities
Coming soon
We're preparing activities for
Svelte.js - The Complete Guide (incl. Sapper.js).
These are activities you can do either before, during, or after a course.
Career center
Learners who complete Svelte.js - The Complete Guide (incl. Sapper.js) will develop knowledge and skills
that may be useful to these careers:
Front-End Developer
Front-End Developer
As a Front End Developer, you are responsible for turning UI/UX designs into prototypes and then using your knowledge of HTML, CSS, and JavaScript to bring these prototypes to life. Svelte is a tool that developers use to build efficient, easy-to-maintain web applications. Since you'll be writing code that will run in the browser, Svelte's ability to create highly optimized JavaScript bundles can give you an edge in terms of performance.
Back-End Developer
Back-End Developer
As a Back End Developer, you are responsible for writing the code that powers the logic of web applications. Svelte can be used to build the front-end of applications, but it doesn't replace back-end programming altogether. However, learning Svelte can be helpful as a back-end developer for several reasons. By learning Svelte, you can better understand the needs of front-end developers and communicate with them more effectively.
Full-Stack Developer
Full-Stack Developer
Full Stack Developers design and develop both the front-end and back-end of web applications. Svelte can be used to build the front-end of applications. As a Full-Stack Developer, you must be able to get an application up and running on a server, which is a topic covered in this course. Thus, this course may be helpful in preparing you for the full-stack development role.
Software Engineer
Software Engineer
Software Engineers design and develop software. This course introduces the fundamentals of Svelte.js. Mastering Svelte.js and other front-end technologies will only be part of a Software Engineer's skillset, but a solid foundation in Svelte.js will strengthen you as a Software Engineer.
Web Developer
Web Developer
Web Developers design, create, and maintain websites. This course teaches the fundamentals of Svelte.js, which can be used to build and maintain web applications on the front-end. Thus, this course may be helpful in your preparation to become a Web Developer.
User Experience Designer
User Experience Designer
UX Designers focus on improving the user experience of websites and applications by studying the user's needs and behaviors. While this course does not teach UX Design directly, it teaches the fundamentals of the popular front-end development framework, Svelte.js, which can be used to create responsive and efficient user interfaces.
Product Manager
Product Manager
Product Managers plan, develop, and launch new products and features. This course does not teach product management directly. However, it does teach the fundamentals of Svelte.js, which can be used to bring product ideas to life. Thus, this course may be useful in preparing you for the role of a Product Manager.
Project Manager
Project Manager
Project Managers plan, execute, and close projects. This course does not teach project management directly. However, learning to use Svelte.js to build front ends for applications can be helpful for Project Managers who need to communicate with and understand the work of front-end developers.
Technical Writer
Technical Writer
Technical Writers develop and write technical documentation. This course does not teach technical writing directly. However, it introduces Svelte.js, which is a powerful framework for building user interfaces for web applications. Being able to describe the features and benefits of Svelte.js can make a Technical Writer more effective at their job.
IT Manager
IT Manager
IT Managers plan, direct, and coordinate the activities of an organization's information technology (IT) department. This course does not teach IT Management directly. However, it teaches the fundamentals of Svelte.js, which is a popular framework for developing user interfaces for web applications. This course may be helpful in giving you a foundation to better understand the work of front-end developers.
Data Analyst
Data Analyst
Data Analysts collect, clean, analyze, and interpret data to help businesses make informed decisions. This course does not teach data analysis directly. However, Svelte.js can be used to build interactive data visualizations that can help Data Analysts communicate their findings to stakeholders.
Business Analyst
Business Analyst
Business Analysts work with stakeholders to define business requirements and develop solutions to business problems. This course does not teach business analysis directly. However, it introduces Svelte.js, which is a powerful framework for building user interfaces for web applications. By understanding Svelte.js, you can better communicate with front-end developers and help them to create solutions that meet the needs of the business.
UX Researcher
UX Researcher
UX Researchers study the user experience of websites and applications to identify areas for improvement. This course does not teach UX Research directly. However, it introduces Svelte.js, which is a powerful framework for building user interfaces for web applications. By understanding Svelte.js, you can better collaborate with front-end developers and help them to create user interfaces that are both usable and efficient.
Scrum Master
Scrum Master
Scrum Masters facilitate Scrum, an agile framework for managing software development projects. This course does not teach Scrum directly. However, it introduces Svelte.js, which is a powerful framework for building user interfaces for web applications. By understanding Svelte.js, you can better support front-end developers and help them to deliver high-quality software.
Quality Assurance Analyst
Quality Assurance Analyst
Quality Assurance Analysts test software to identify and fix bugs. This course does not teach Quality Assurance directly. However, it introduces Svelte.js, which is a powerful framework for building user interfaces for web applications. By understanding Svelte.js, you can better understand the work of front-end developers and help them to create high-quality software.
For more career information including salaries, visit:
OpenCourser.com/course/uwvdi9/svelte
Reading list
We've selected ten books
that we think will supplement your
learning. Use these to
develop background knowledge, enrich your coursework, and gain a
deeper understanding of the topics covered in
Svelte.js - The Complete Guide (incl. Sapper.js).
Save
Comprehensive guide to Svelte. It covers everything from the basics of Svelte to advanced topics such as server-side rendering and state management. This book good choice for developers who want to learn how to use Svelte to its full potential.
Save
This comprehensive reference book covers the entire JavaScript language, including advanced topics such as closures, generators, and async programming. It provides in-depth explanations and examples, making it a valuable resource for both beginners and experienced developers who want to deepen their understanding of JavaScript.
Save
Provides an in-depth exploration of CSS, covering advanced concepts such as layout, typography, and animations. It is highly recommended if you want to enhance the visual aspects of your Svelte applications and gain a deeper understanding of CSS.
Save
Provides a deep understanding of JavaScript fundamentals, which is crucial for mastering Svelte. It covers advanced concepts such as closures, prototype chains, and functional programming.
While this book does not specifically cover Svelte, it is an excellent resource for learning about web accessibility best practices. It provides practical guidance and techniques to ensure your Svelte applications are accessible and inclusive for users with disabilities.
This philosophical exploration of programming concepts offers a thought-provoking perspective on the nature of code and its relationship to creativity and problem-solving. While it does not provide specific technical guidance for Svelte, it can inspire you to approach programming from a more holistic and reflective standpoint.
Provides a thorough foundation in modern JavaScript concepts and syntax, which is essential for understanding Svelte. It covers topics such as variables, data types, functions, and object-oriented programming, ensuring you have a solid base before diving into Svelte.
Save
If you plan to use Svelte with Node.js, this book offers a comprehensive guide to Node.js. It covers various topics, including server-side programming, networking, and data handling, helping you create robust and scalable backend applications for your Svelte frontend.
Offers a unique perspective on programming languages by guiding you through the process of creating your own interpreters. While it may not be directly related to Svelte, it provides valuable insights into the underlying concepts of language design and implementation, which can enhance your understanding of Svelte's inner workings.
Provides a comprehensive guide to Svelte. It covers the fundamentals of Svelte, as well as how to use it to build complex applications.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/uwvdi9/svelte
Share
Similar courses
Here are nine courses similar to
Svelte.js - The Complete Guide (incl. Sapper.js).
SvelteKit Framework by Example: Full-Stack Ecommerce Website
OpenCourser.com/course/h3g8wx/sveltekit
SvelteKit Framework by Example: Full-Stack Ecommerce...
Most relevant
Svelte & SvelteKit: The Complete Guide
OpenCourser.com/course/kddbp1/svelte
Svelte & SvelteKit: The Complete Guide
Most relevant
Svelte for Beginners
OpenCourser.com/course/5rlyy4/svelte
Svelte for Beginners
Most relevant
Learn Svelte
OpenCourser.com/course/oxom19/learn
Learn Svelte
Most relevant
Learn Vue 1 JS introduction to simple reactive JavaScript
OpenCourser.com/course/tr6oig/learn
Learn Vue 1 JS introduction to simple reactive JavaScript
Most relevant
Vue JS 2: From Beginner to Professional (includes Vuex)
OpenCourser.com/course/op6sj6/vue
Vue JS 2: From Beginner to Professional (includes Vuex)
Most relevant
Vue - The Complete Guide (incl. Router & Composition API)
OpenCourser.com/course/56svph/vue
Vue - The Complete Guide (incl. Router & Composition API)
Most relevant
Svelte with Test Driven Development
OpenCourser.com/course/wp6coo/svelte
Svelte with Test Driven Development
Most relevant
VueJS V1 Introduction to VueJS JavaScript Framework
OpenCourser.com/course/znzc1m/vuejs
VueJS V1 Introduction to VueJS JavaScript Framework
Most relevant
Effort
12.5 total hours
Via
Udemy
Instructors
Maximilian Schwarzmüller
Academind by Maximilian Schwarzmüller
Language
English
Good to know
Well-suited for frontend web developers who seek an alternative to React.Js, Angular & Vue
Ideal for beginners in Javascript who are interested in building reactive user interfaces
Provides a comprehensive study of Svelte.js, covering core features and advanced techniques
Taught by Maximilian Schwarzmuller, an experienced instructor known for his expertise in web development
Provides detailed explanations and practical examples to enhance understanding
Includes interactive materials and hands-on labs to reinforce learning
Our mission
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
Affiliate disclosure
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
© 2016 - 2024 OpenCourser