Last updated 2/2023Course Language SpanishCourse Caption Spanish [Auto]Course Length 18:16:04 to be exact 65764 seconds!Number of Lectures 186
This course includes:
18.5 hours hours of on-demand video
16 article
Full lifetime access
Access on mobile and TV
Certificate of completion
20 additional resources
El manejo de este nuevo framework llamado svelte
Uso de los componentes
uso de variables reactivas
DataBinding
Bloques IF, Each, Await
Manejo de APIs
Uso de rutas con svelte-spa-router
Firebase con svelte
Proyectos con backend en PHP y MySQL
Sveltekit para desarrollo del lado del servidor SSR
Svelte es un nuevo framework de JavaScript para construir interfaces de usuario. Utilizando las ultimas novedades de javascript.Svelte cambia el paradigma de trabajo en diversas ventajas. Por ejemplo, otros frameworks como react, vue, etc, hacen la mayor parte del trabajo en el navegador, en cambio svelte lo hace en tiempo de compilación, lo que hace que el trabajo realizado con sus componentes sea mas eficiente.Otra ventaja es que no utiliza virtual dom si no que actualiza el dom cuando cambia el estado de la aplicación, lo que genera un excelente rendimiento.Una de las cosas que mas interesantes de svelte, es que la curva de aprendizaje es realmente baja, incluso comparada con vue, que también tiene a ser muy sencillo, pero la claridad de la sintaxis y lo sencilla que es hace que puedas aprender este framework en muy poco tiempo, temas o no tengas experiencia con otros frameworks.El framework esta hecho con la intención de reducirlo lo mas posible, haciendo que nuestros proyectos sean livianos, un proyecto de svelte pesa al rededor de 30 mb, cuando otras alternativas rebasan los 100 mb al crear un proyecto y al final las app que creamos para enviarlas a producción son muy ligeras.Es un framework completamente reactivo, así que podemos exprimirlo al máximo para sacarle toda potencia de este tipo de frameworks, ademas esta totalmente optimizado a la hora de compilar nuestros proyecto y enviarlos a producción.También cuenta con su propio manejado de estados, así que no tenemos la necesidad de usar librerías externas en ese sentido y ademas es muy sencillo de utilizar.En resumen svelte es un framework muy potente que deben de probarlo ahora mismo. Porque tiene todo el potencial para convertirse en una de las mejores herramientas en el mundo del desarrollo web. Y definitivamente se puede convertir en uno de nuestro favoritos.Who this course is for:Desarrolladores principiantes en el uso de frameworks de javascriptTodo entusiasta del desarrollo webDesarrolladores interesados en conocer el nuevo framework de svelte
Course Content:
Sections are minimized for better readability, click the section title to view the course content
2 Lectures | 03:34
Bienvenidos
01:24
Bienvenidos al curso de svelte
¿Qué es Svelte?
02:10
¿Qué es svelte?
11 Lectures | 56:15
Crear proyecto en Mac
04:45
Crearemos nuestro primer proyecto de Svelte
Crear proyecto en Windows
03:40
Estructura de carpetas de svelte
08:11
Veremos como esta constituido un proyecto de Svelte
Variables y constantes
06:08
Variables y constantes
DataBinding
06:04
Veremos como hacer two-way binding con las variables de Svelte
Evento click
03:05
Como mandar llamar una función en Svelte
Variables reactivas
05:12
Uso de variables reactivas también conocidos como propiedades computadas
Bloque IF
02:59
Como utilizar la estructura if en Svelte
Bloque Each
06:38
Como utilizar el bloque each en Svelte
Bloque Await
09:33
Uso del bloque await para trabajo asíncrono
Proyecto svelte-basico
00:00
14 Lectures | 01:29:23
¿Qué es un componente?
02:19
¿Qué es un componente?
Primer componente
09:21
crearemos nuestro primer componente
Propiedades en componentes
06:05
Veremos como agregar propiedades a los componentes
Card como componente
10:47
Crearemos una card con bootstrap
Modularizar nuestros componentes
04:24
Modularizaremos aun mas nuestros componentes
Guardar nuevo post
06:54
Veremos como crear otro post
Input personalizado en componente
12:00
Input personalizado en componente
Uso de métodos con createEventDispatcher
06:14
Utiizaremos metodos desde componentes
Enviar parametros en dispatcher
03:28
Enviar parametros en dispatcher
Slots
03:50
Veremos el suo de los slots
Slots personalizados
06:07
Como crear slots personalizados
Eventos en slots
04:57
Veremos como generar eventos en los slots
Ciclo de vida de un componente
12:57
Veremos como ejecutar cada uno de los métodos del ciclo de vida
Proyecto componentes
00:00
5 Lectures | 21:39
Libreria svelte-spa-router
06:17
Usaremos una librería para definir nuestras rutas de una manera muy simple
Definir rutas
05:21
Definiremos las rutas de nuestro proyecto
Link y Push
04:37
Utilizaremos link y push para navegar entre paginas
Enviar parametros
05:24
Enviaremos parametros
Proyecto rutas
00:00
Proyecto rutas
10 Lectures | 50:47
Crear proyecto
03:34
Comenzaremos definiendo nuestro proyecto
Definiendo nuestras rutas
07:16
Realizaremos el archivo routes.js
API themoviedb.org
04:45
Veremos como funciona y el registro de la api de themoviedb.org
Conectar con API
07:24
Conectaremos con nuestra api a través del bloque AWAIT
Cargador CSS
03:38
Crearemos un cargador CSS
Card y Grid
07:27
Definiremos la card y grid de nuestro proyecto
Enviando parametros
03:19
Enviaremos el parametro necesario para la vista detalle
Metodo onMount
06:38
Utilizaremos el metodo onMount para mostrar un solo objeto de la api
Terminando proyecto
06:45
Añadiremos los últimos detalles del proyecto
Proyecto API Películas
00:01
Proyecto API Películas
17 Lectures | 01:21:34
Firebase
09:29
Como funciona firebase
Configurar firebase
04:24
Registro
07:52
Login
02:27
Manejo de sesión
05:49
Diseño de pagina crud
08:38
Guardar en firestore
05:25
Mostrar datos
04:10
Editar
03:36
Eliminar
01:30
Storage
05:25
Guardar imagen
09:21
Barra de progreso
03:12
MOSTAR IMAGEN EN TABLA
02:08
Eliminar imagen
04:26
Editar imagen
03:42
Proyecto Firestore
00:00
9 Lectures | 42:58
Stores
03:36
¿Qué es el store en svelte?
Creando primer store
04:14
Desarrollaremos nuestra primer store
Subscribe en componente
04:26
Veremos otro método para subscribirnos a la store
Unsubscribe
04:58
Veremos como limpiar una store
Modificar el estado en el store
04:15
Veremos como utilizar el método update o set
Trabajar con mas objetos
05:00
Añadiremos mas objetos a la store
Custom stores
09:14
Trabajaremos todo desde el store
Readable en el store
07:15
Como utilizar el metodo readable en el store
Proyecto store
00:00
Proyecto store
20 Lectures | 02:15:54
Instala xampp en mac
06:11
Veremos como instalar la version de xampp en Mac
Instalar xampp en Windows
03:28
Veremos como instalar la version de xampp en windows
Crear tablas
09:11
Crear tablas en phpmyadmin
Crear el frontend con svelte
07:52
Crearemos nuestro frontend con svelte
Definiendo rutas
05:41
Definiremos nuestras rutas con svelte
Input Custom
08:07
Input Custom con materialize
Formulario de registro
06:05
Formulario de resgistro
SweetAlert
04:24
Veremos el uso de la libreria SweetAlert
Foto de perfil
16:52
Foto de perfil
Guardar usuario lado php
07:11
Guardar usuario lado php
Registro lado svelte
09:50
Registro lado svelte
Validar email lado php
04:46
Validar email lado php
Validar email lado svelte
07:37
Validar email lado svelte
Login lado php
10:04
Login lado php
Login lado svelte
04:20
Login lado svelte
LocalStorage
05:43
LocalStorage
Salir lado php
05:19
Salir lado php
Salir lado svelte
04:14
Salir lado svelte
Mantener sesión
08:58
Mantener sesión
Proyecto svelte + php parte I: login
00:01
Proyecto svelte + php parte I: login
12 Lectures | 01:00:25
Mostrar usuario
08:56
Mostraremos la bienvenida al usuario
Guardar lado php
04:48
Guardar en php
Formulario de guardar en svelte
06:03
Formulario de guardar en svelte
Guardar y algunos errores comunes
05:53
Guardar y algunos errores comunes
Mostrar posts lado php
06:54
Mostrar posts lado php
Mostrar posts con AWAIT
04:54
Mostrar posts con AWAIT
Editar lado php
05:59
Editar lado php
Mostrar post por usuario
04:29
Mostrar post por usuario
Formulario de editar
03:48
Formulario de editar
Editar lado svelte
02:01
Editar lado svelte
Eliminar registro
06:39
Eliminar registro
Proyecto svelte + php parte II: CRUD
00:01
Proyecto svelte + php parte II: CRUD
3 Lectures | 18:21
Hosting
03:39
Elegiremos un hosting para nuestro proyecto
Configurar la parte de PHP
07:08
Configuraremos el entorno para php
Configurar la parte de Svelte
07:34
Configuraremos la sección de svelte
7 Lectures | 44:34
Iniciando proyecto con chart.js
05:22
Crear nuestra gráfica
08:23
Tipos de gráfica
04:05
Evento click
06:39
Manipular gráfica
04:46
Aplicando API con la gráfica
15:19
Proyecto Gráfica
00:00
7 Lectures | 35:46
Mapbox
05:15
Crear mapa
07:49
Estilos de mapa
03:34
Agregar marcador al mapa
08:11
Evento click en marcador
08:32
Agregar mas marcadores al mapa
02:25
Proyecto Mapbox
00:00
7 Lectures | 41:24
Routify
07:57
Estructura de carpetas
06:20
Creando rutas
07:51
Goto, Focus y beforeUrlChange
06:11
Envio de parametros
08:16
Uso de Ready
04:49
Proyecto Routify
00:00
4 Lectures | 26:07
Configurar Materialize-css
09:20
Sveltestrap
04:54
Configurar Sass
06:01
Configurar Typescript
05:52
14 Lectures | 01:36:44
Qué es sveltekit
05:56
Iniciando proyecto
07:00
Rutas
04:41
Tailwindcss
11:34
Layout y página de error
09:37
Svelte head
03:06
API desde store
06:35
Card y Grid
08:32
Crear buscador
04:05
Enviar parámetro
06:44
Pagina de usuario
05:52
Enviar mas de un parámetro
15:40
Validar formulario
07:22
Proyecto sveltekit
00:00
21 Lectures | 02:20:11
SUPABASE
06:58
Crear proyecto
04:34
Instalar supabase
10:18
Formulario de login
07:47
Login y registro
07:21
Token y Navbar
09:20
Salir y Reset layout
10:29
Corrigiendo el error de reset.layout
06:39
Formulario de post
08:34
Guardar post
09:14
Alerta de guardar post
04:48
Mostrar post
11:15
Eliminar post
06:29
Editar parte I
08:32
Editar parte II
05:28
Error en IF
01:19
Storage en supabase
04:21
Guardar imágenes
08:11
Mostrar y eliminar imágenes
03:29
Editar imagen
05:01
Proyecto SUPABASE
00:04
6 Lectures | 43:46
svelte carousel
08:29
carousel en SvelteKit
09:58
Data table con Gridjs de forma local
07:57
Gridjs con api desde servidor
06:17
Deploy en netlify
11:05
Proyectos
00:00
9 Lectures | 55:41
Actualización de sveltekit
05:04
+Page
08:24
Load data
05:13
Parametros
06:28
+Layout
09:45
Formularios
09:45
Action para diversos formularios
04:20
Validar formularios
06:42
Proyecto sveltekit-update
00:00
8 Lectures | 50:52
OPENAI
04:02
Estructura de proyecto
07:27
Formulario
07:31
Cargador y ApiKey
03:09
Generar imagen
10:23
Bot GPT
09:18
Clipboard
09:02
Proyecto APIs OpenAI
00:00
4.72
(105 course ratings)
1
0/105
2
4/105
3
9/105
4
33/105
5
59/105
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.
Free Online Tools And Converters for your use
URL Encoder
Input a string of text or a URL and encode the entered string
FAQ: Udemy Free course Most frequent questions and answers
Does Udemy offer Free Udemy coupons?
Yes, Udemy is the largest online education platform, with the broadest selection of video-on-demand courses and qualified instructors available to meet your needs. At theprogrammingbuddy.club we curate the latest udemy coupons, their expiry, and the number of uses left of these udemy coupons.
How to get free Udemy courses?
There are two ways to get free Udemy courses:
Go to udemy.com and search for your desired course category. Then select free from the filter options.
You can also get paid courses for free if you have a coupon. You can head to theprogrammingbuddy.club, where you can get a daily udemy paid course for free.
How to get Udemy Certificates for free?
Udemy offers certification on completion of each course. In order to receive a certificate of completion from Udemy, you need to complete your course 100%. There is a simple hack, you can open a video and jump on the timeline to complete a lecture.
To download the certificate from Udemy, you need to head over to your account on a desktop browser. Udemy certificates can't be accessed on the mobile app.
Do Udemy courses expire?
No, once you enroll, you will have lifetime access to the course. You can complete the course on your schedule.
Why are the Udemy instructors giving away free Udemy Coupons?
Every instructor has worked for hours on each of their courses. As new courses get launched, the instructors have no way to get their course in front of an audience to get some feedback. So, instructors share free coupons for their courses to get feedback from the students. We attheprogrammingbuddy.club work with these instructors to get their courses available to our buddies.
Is Udemy safe to use?
Yes, payments on Udemy are safe. It is no different than paying for other services on an application or website and inputting your payment information before receiving your goods. Just be sure to keep your account secure, do not share your udemy accounts.
Can Udemy courses get you a job?
Earning a skill is more valuable than earning a job these days. Skills are your most valuable asset. They can help you qualify for jobs you want and get promoted to more advanced positions within your organization. Unfortunately, it is difficult for many people to balance taking courses with work and family obligations. We have had many students, who have taken just Udemy courses, started a job as well as started freelancing with the skills they have learned.
