udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Продолжительность
15 ч 27 мин
Категория
SvelteКоличество уроков
143 Видео
Дата добавления
6 февр. 2020 г., 19:51
Язык
Английский
Дата выхода
18 дек. 2019 г., 00:00
Дата обновления
29 апр. 2026 г., 06:34
Svelte — это современный инструмент для создания быстрых, отзывчивых и лёгких веб‑приложений. В этом курсе вы шаг за шагом освоите базовые и продвинутые возможности фреймворка, создавая реальные проекты и совершенствуя навыки разработки интерфейсов.
Что вы узнаете в этом курсе
Курс последовательно проведёт вас от основ до создания сложного приложения. Мы разберём ключевые концепции Svelte, его отличия от React и Vue, а также применим знания на практике.
Основные темы изучения
- Архитектура Svelte и отличие подхода компиляции от виртуального DOM.
- Работа с компонентами: свойства, события, реактивность.
- Состояние и хранилища (stores) — writable, readable и derived.
- Шаблоны и привязка данных: директивы, циклы, условия.
- Анимации и переходы в Svelte.
- Организация структуры проекта и лучшие практики.
Раздел 1. Учебный проект: Калькулятор бюджета
На первом этапе вы погрузитесь в основы Svelte, создавая практичный и понятный проект — калькулятор бюджета.
Чему вы научитесь в этом разделе
- Создавать и связывать компоненты между собой.
- Использовать реактивные переменные.
- Применять хранилища для управления состоянием.
- Работать с пользовательским вводом и динамическим отображением данных.
Раздел 2. Крупный проект: Интернет-магазин Razor
Во второй части курса вы построите полнофункциональный e-commerce проект, где задействуете более сложные функции Svelte и научитесь применять фреймворк в реальных рабочих сценариях.
Ключевые навыки второго раздела
- Организация крупных приложений на Svelte.
- Создание каталога товаров и карточек продуктов.
- Реализация корзины и управление сложным состоянием.
- Интеграция API и работа с асинхронными данными.
- Оптимизация производительности.
Почему Svelte — отличный выбор для разработчиков
Svelte не полагается на тяжёлый виртуальный DOM. Вместо этого он компилирует ваш код заранее, генерируя максимально оптимизированный JavaScript. Это даёт:
- высокую скорость работы приложения;
- минимальный размер итогового бандла;
- простоту и ясность кода;
- лёгкое освоение даже для новичков.
Кому подойдёт этот курс
Курс ориентирован на широкий круг разработчиков:
- начинающих, желающих быстро войти во фронтенд‑разработку;
- разработчиков, уставших от громоздкости React/Vue;
- фронтендеров, ищущих новые инструменты и улучшение производительности;
- тех, кто хочет перейти от теории к реальным проектам.
Итог
Пройдя курс, вы овладеете инструментом, который становится всё более популярным у разработчиков и компаний. Svelte позволяет писать менее громоздкий, более быстрый и элегантный код — и этот курс научит вас использовать его на практике.
- Урок 1.00:01:22Svelte Info
- Урок 2.00:03:35Course Requirements
- Урок 3.00:02:00Text Editor Setup
- Урок 4.00:01:38Video Quality
- Урок 5.00:00:34Review
- Урок 6.00:02:47Intro
- Урок 7.00:04:41Starter Application
- Урок 8.00:08:52Folder Structure
- Урок 9.00:03:03Add Global CSS and Font-Awesome
- Урок 10.00:04:46Component Overview
- Урок 11.00:05:44Navbar Component Intro
- Урок 12.00:07:18Navbar Component
- Урок 13.00:03:33Title Component
- Урок 14.00:09:44Props Basics
- Урок 15.00:09:33CSS
- Урок 16.00:09:49Each Block
- Урок 17.00:04:05Expenses Data
- Урок 18.00:11:50Expenses Component
- Урок 19.00:12:57Else and Passing Props
- Урок 20.00:04:25Expense Component
- Урок 21.00:03:52If Block
- Урок 22.00:09:47Events
- Урок 23.00:06:56Component Communication
- Урок 24.00:09:15Prop Drilling
- Урок 25.00:10:03SetContext and GetContext
- Урок 26.00:09:53createEventDispatcher
- Урок 27.00:04:54Clear Expenses Button
- Урок 28.00:15:08Reactivity
- Урок 29.00:07:58Form Setup
- Урок 30.00:07:44Two Way Binding
- Урок 31.00:12:19Empty Values Functionality
- Урок 32.00:05:19Form Submission
- Урок 33.00:06:29Add New Expense
- Урок 34.00:11:05setModifiedExpense
- Урок 35.00:13:02Pass Edit Values into Form
- Урок 36.00:06:17editExpense
- Урок 37.00:13:16OPTIONAL - Different Approach
- Урок 38.00:07:34Toggle Form
- Урок 39.00:05:51Lifecycle Functions
- Урок 40.00:10:06Setup LocalStorage API
- Урок 41.00:06:40afterUpdate
- Урок 42.00:10:31slot basics
- Урок 43.00:04:33Complete Modal
- Урок 44.00:08:37Transition Basics
- Урок 45.00:03:36Transtion Parameters
- Урок 46.00:01:56Transtion - in: and out:
- Урок 47.00:02:29Modal Transtions
- Урок 48.00:06:45Simple Expense Transtion
- Урок 49.00:09:27Key Expression in Each Block and animate
- Урок 50.00:14:58HTTP Request using onMount
- Урок 51.00:06:51HTTP Request using #Await Blocks
- Урок 52.00:03:45Deploy on Netlify - Drag and Drop
- Урок 53.00:05:39Deploy on Netlify - Continuous Deployment
- Урок 54.00:13:20Intro
- Урок 55.00:03:23Bootstrap Svelte Application
- Урок 56.00:05:23Folder Structure and Resources
- Урок 57.00:07:28Setup Project Pages
- Урок 58.00:09:07Svelte Router Setup
- Урок 59.00:04:53Url Parameters
- Урок 60.00:10:30Hero Component
- Урок 61.00:04:00Local Data Structure
- Урок 62.00:05:33Svelte Store Benefits/Basics
- Урок 63.00:11:24Products Store Setup
- Урок 64.00:05:12Flatten Products
- Урок 65.00:02:46Store Unsubscribe
- Урок 66.00:02:21Store Unsubscribe Shorthand
- Урок 67.00:05:37Products Component Complete
- Урок 68.00:07:46Single Product Complete
- Урок 69.00:04:47Loading Component
- Урок 70.00:06:44Featured Products
- Урок 71.00:07:16Derived Stores
- Урок 72.00:11:42Single Product Page
- Урок 73.00:03:19svelte:head element
- Урок 74.00:09:36Small Navbar
- Урок 75.00:03:28Cart Button
- Урок 76.00:05:01Big Navbar
- Урок 77.00:04:37Links
- Урок 78.00:05:33Toggle Navbars
- Урок 79.00:07:02Basic Sidebar
- Урок 80.00:08:18Global Store Basics
- Урок 81.00:04:48Setup Close Sidebar Function
- Урок 82.00:05:47Use Close Sidebar Function
- Урок 83.00:01:46Sidebar Transitions
- Урок 84.00:06:19Cart Basics
- Урок 85.00:11:37Cart Structure
- Урок 86.00:07:11Cart Store Initial Setup
- Урок 87.00:08:17Cart Items
- Урок 88.00:06:51Single Cart Item
- Урок 89.00:02:50Cart List Transitions
- Урок 90.00:05:33Cart Total
- Урок 91.00:07:44Remove Item
- Урок 92.00:08:46Increase Amount
- Урок 93.00:04:57Decrease Amount
- Урок 94.00:01:15Decrease Amount Refactor - OPTIONAL
- Урок 95.00:09:06Add To Cart
- Урок 96.00:06:33LocalStorage Setup
- Урок 97.00:04:21User Store Setup
- Урок 98.00:09:48Login/Logout Links
- Урок 99.00:05:14Checklist
- Урок 100.00:01:40Strapi Info
- Урок 101.00:04:18Bootstrap Strapi App
- Урок 102.00:03:16Strapi Basics
- Урок 103.00:04:17Products Content Type
- Урок 104.00:04:00Add Products
- Урок 105.00:05:31API Access
- Урок 106.00:04:28getProducts
- Урок 107.00:08:52Products Store
- Урок 108.00:04:22Image Problem Fix
- Урок 109.00:04:50Login Page - Variables
- Урок 110.00:13:24Login Page - HTML
- Урок 111.00:08:33Login Page - Basic Functionality
- Урок 112.00:06:14Login - General Overview
- Урок 113.00:11:18registerUser Function
- Урок 114.00:06:11loginUser Function
- Урок 115.00:06:31User Store Update
- Урок 116.00:10:57setupUser Function
- Урок 117.00:05:07navigate
- Урок 118.00:07:21Alert Basics
- Урок 119.00:10:55Configure Alert
- Урок 120.00:04:54Alert with Form Sumbissions
- Урок 121.00:02:16Close Alert Programmatically
- Урок 122.00:02:42Double Check Login Functionality
- Урок 123.00:00:56Checkout Page Overview
- Урок 124.00:02:20Checkout Page Basics
- Урок 125.00:02:49Restrict Access
- Урок 126.00:02:44Empty Cart
- Урок 127.00:06:51Checkout Form - Basic Setup
- Урок 128.00:04:22Setup Stripe Account
- Урок 129.00:07:38Stripe Elements - HTML
- Урок 130.00:08:53Stripe Elements - Javascript
- Урок 131.00:05:09Stripe Token
- Урок 132.00:01:44Empty Cart Error
- Урок 133.00:03:54Order Content Type
- Урок 134.00:12:40Submit Order Function
- Урок 135.00:13:08Complete Submit Order
- Урок 136.00:07:41Complete App
- Урок 137.00:01:59Free Claudinary Account
- Урок 138.00:07:06Connect Claudinary with Strapi
- Урок 139.00:01:50Free Heroku Account
- Урок 140.00:02:32Install Heroku CLI
- Урок 141.00:13:23Deploy Strapi on Heroku
- Урок 142.00:05:47Setup Backend
- Урок 143.00:02:21Deploy Svelte APP on Netlify
Автор - udemy
Комментарии
mblandrОбновите курс, пожалуйста, на сайте указано: Последнее обновление: 7/2020