Frontend Development with Svelte
Beginner
0.0
0 reviews
0 Learners
Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …
188
Chapters
20
Learning hours
218
Assignments
AI Assistant
Shareable Certificate
Resultados
Resultados
Track content
Related courses and projects
Testimonios
Características
Precios
Resultados
Resultados
Track content
Related courses and projects
Testimonios
Características
Precios
Lo que aprenderás
Structure webpages using semantic HTML
Create reusable Svelte components and reactive UI elements
Fetch and display external API data
Style interfaces with CSS and Tailwind CSS
Handle forms, events, and dynamic rendering
Build responsive layouts for different screen sizes
Build interactive frontend logic with JavaScript
Work with shared state using Svelte stores
Organize modern frontend projects and reusable UI patterns.
Learning track content
Bienvenido a HTML y al Desarrollo Web
Comprensión de las Etiquetas HTML
Trabajando con atributos HTML
Comprensión de las Etiquetas Emparejadas y Simples en HTML
Marcado de texto
Organización de listas
Desafío: Crea el Párrafo de Tu Primera Página Web
Desafío: Crea una Página Web de Presentación Personal
Desafío: Diseña una Página Web de Exhibición de Películas
Uso de Enlaces
Agregar botones
Challenge: Crear Enlaces a Sitios Web Populares
Validación de tu código HTML según las mejores prácticas
Comprensión de la estructura del documento HTML
El Papel de la Cabecera del Documento
Challenge: Estructura Correctamente un Documento HTML
Agregar Imágenes en HTML
Challenge: Trabajar con Imágenes
Trabajando con imágenes clicables, leyendas y optimización
Creación y Estructuración de Tablas en HTML
Desafío: Diseñar una Tabla HTML Funcional
Introducción a los formularios HTML
Fundamentos de la Creación de Formularios en HTML
Uso de Etiquetas para una Mejor Accesibilidad en Formularios
Mejorando Formularios con Atributos de Entrada
Explorando Diferentes Tipos de Entrada en HTML
Desafío: Crear un formulario con campos de entrada y etiquetas
Trabajando con el elemento textarea para entrada de varias líneas
Uso del elemento select para menús desplegables
Uso del elemento datalist para sugerencias de entrada predefinidas
Agrupación de elementos de formulario para una mejor estructura
Qué Es CSS y Por Qué Es Importante
Conexión de CSS con HTML
Selección de Elementos de Manera Sencilla
Estilizado de Texto y Colores
Agregar Efectos Hover
Desafío: Da Estilo a Tu Primera Página Web
Formato de Texto para Mejorar la Legibilidad
Trabajando con Fuentes y Propiedades de Fuentes
Agregar Fuentes Personalizadas
Desafío: Mejorar el Diseño de un Artículo de Blog
Comprensión Práctica del Modelo de Caja
Margen y Relleno Simplificados
Dimensionamiento de Caja y Control de Ancho
Propiedad Display: Block, Inline e Inline-Block
Desafío: Arreglar un Diseño Roto
Por Qué Existe Flexbox
Control de Dirección
Justificación del Contenido Horizontalmente
Alineación Vertical de Elementos
Trabajando con Elementos Flex
Desafío: Crear un Diseño de Tarjeta de Tienda Usando Flexbox
Desafío: Crear una Tarjeta de Blog Vertical con Flexbox
Comprensión de los Contenedores y Elementos de Grid
Definición de Filas y Columnas
Espacios y Alineación de la Cuadrícula
Creación de un Diseño del Mundo Real
Uso de Colores de Fondo
Aplicación de Imágenes de Fondo
Trabajar con Imágenes en CSS
Creación de Efectos con Pseudoelementos Decorativos
Añadiendo Sombras para Profundidad
Desafío: Crear un Componente de Tarjeta Moderna
Primera Aplicación de Consola en JavaScript
Challenge: Mostrar Alguna Salida
Desafío: Mostrar Múltiples Líneas
Trabajando con Números
Challenge: Trabajando con Números
Desafío: Cálculo de la Velocidad de un Automóvil
Desafío: Cálculo del Área de un Trapecio
Mostrar Múltiples Valores
Desafío: Mostrando Salidas Significativas en la Consola
Cómo Usar Comentarios en JavaScript
Challenge: Agregar un Comentario
Comentarios de Varias Líneas
Desafío: Comentar Código
¿Qué Es JavaScript Realmente?
Almacenamiento de Datos
Desafío: Declaración de una Variable
Desafío: Acceso a Datos Desde una Variable
Desafío: Corrección de Nombres de Variables
Desafío: Reasignación de una Variable
Constantes
Desafío: Declaración y Uso de Constantes
Realización de Operaciones Aritméticas en Variables
Desafío: Creando una Calculadora de Salario
Desafío: Ajuste de Salario con un Bono
Explorando los Tipos de Datos Primitivos
Desafío: Declarar un Valor Booleano
Cómo Interactúan los Diferentes Tipos de Datos
Challenge: Concatenación de Cadenas
Desafío: Creación de Perfil de Usuario y Detalles de Actividad
Operadores de comparación
Desafío: Verificación de Elegibilidad por Edad
La Sentencia `if`
Desafío: Recomendador de Atuendo Basado en el Clima
Desafío: Par o Impar
Sentencias Condicionales Anidadas
La Cláusula `else`
Desafío: Asesor de Temperatura
La Cláusula `else if`
Desafío: Categorizador de Calificaciones
Operador Lógico `AND`
Desafío: Comprobar si un Número es Par y Positivo
Operador Lógico OR
Desafío: Acceso al Sistema de Control
¿Qué Son las Funciones?
Desafío: Función Simple
Desafío: Cálculo de la Velocidad de un Automóvil
Ámbitos
Pasar Datos a Funciones
Desafío: Corregir la Función de Velocidad
Desafío: Mejorando el Categorizador de Calificaciones
Desafío: Definición de una Función Compuesta
Devolución de Datos Desde Funciones
Valores Predeterminados
Desafío: Autorrespondedor de Correo Electrónico con Parámetros Predeterminados
¿Qué Son los Arrays?
Desafío: Definición de un Arreglo
Desafío: Indexación
Agregar Valores a un Array
Desafío: Agregar Elementos a un Array
Eliminación de Elementos de un Array
Desafío: Práctica con `pop` y `shift`
La Propiedad `length`
Desafío: Contar Elementos
El Método `includes`
Desafío: Búsqueda de Animales en el Zoológico
El Bucle `for`
Desafío: Imprimir una Secuencia
El Bucle `while`
Desafío: Imprimir la Secuencia de Fibonacci
El bucle `do-while`
Desafío: Múltiplo Aleatorio de 7
Uso de Bucles con Arreglos
Desafío: Encontrar el Precio Promedio de los Artículos
Resumen
What Svelte Is and Why Developers Use It
How Svelte Differs from React and Vue
Setting Up a Svelte Project with Vite
Understanding the Svelte Project Structure
Understanding .svelte Files
Your First Svelte Component
Displaying Data with Curly Braces
Passing Data with Props
Default Prop Values
Scoped Component Styles
Creating Reusable Components
Reactive Variables
Reactive Statements
Two-Way Binding with bind:
Conditional Rendering with {#if}
Rendering Lists with {#each}
Handling Events
Understanding Stores
Writable Stores
Derived Stores
Store Subscriptions with $
Sharing State Across Components
Fetching Data from APIs
Loading and Error States
Search and Filtering
Working with Async Data
Svelte Transitions
Fade Fly and Slide Animations
Parent and Child Components
Slots and Component Composition
Working with Forms and Inputs
Form Validation
Submitting Form Data
Organizing a Svelte Application
Building Responsive Layouts
Building a Complete Frontend Application
What is Tailwind CSS?
Installing Tailwind in a Svelte Project
Styling Text Colors and Spacing
Building Layouts with Flexbox and Grid
Responsive Design with Tailwind
Hover Focus and Active States
Conditional Classes in Svelte
Building Reusable Buttons and Cards
Styling Forms and Inputs
Final Project Build a Settings Page UI
¡Impulsa tus habilidades tecnológicas!
con hasta un 55% de descuento
Features:
*Tracks not included in Pro plan
500+ cursos mejor calificadosCopiloto de IA de vanguardia
Rutas de estudio personalizadas40+ proyectos prácticos del mundo real
Sin cancelación, antes de que finalice el plan seleccionado con descuento, acepto que Codefinity cobrará automáticamente $104 cada 3 meses hasta que cancele. Obtén más información sobre la política de cancelación y reembolso en Términos de Suscripción.
Recommended Courses and Projects
curso
HTML Definitivo
Aprenda los conceptos esenciales de HTML (Lenguaje de Marcado de Hipertexto), la base del desarrollo web. Este curso introductorio cubre etiquetas, atributos, elementos y la estructuración de páginas web. Adquiera habilidades prácticas en la creación de encabezados, párrafos, listas, imágenes, enlaces, formularios y tablas. Explore buenas prácticas, optimización y accesibilidad web. Inicie su trayectoria en desarrollo web con HTML.
4 horas
42 capítulosPrincipiante
12 ESTUDIANDO AHORA
curso
Introducción a JavaScript
Sumérgete en el mundo del lenguaje más popular para el desarrollo front-end: JavaScript. JavaScript es un lenguaje integrado en casi todos los navegadores y puede utilizarse para una amplia variedad de tareas. Aprende la funcionalidad básica y prepárate para los desafíos y técnicas de programación más avanzadas.
7 horas 74 capítulosPrincipiante
14 ESTUDIANDO AHORA
curso
Fundamentos de CSS
Domina los conceptos esenciales de CSS, el lenguaje de estilos que transforma la apariencia y sensación de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas.
3 horas 28 capítulosPrincipiante
6 ESTUDIANDO AHORA
curso
Fundamentos de HTML
Domina los conceptos esenciales de HTML para crear contenido web bien estructurado y accesible. Aprende a estructurar documentos utilizando etiquetas, elementos y atributos. Trabaja con confianza con texto, listas, imágenes, audio y video para enriquecer las páginas web. Crea tablas para organizar datos y formularios para la entrada e interacción del usuario. Descubre el HTML semántico para mejorar la accesibilidad y construye estructuras completas y funcionales de sitios web desde cero.
3 horas 35 capítulosPrincipiante
9 ESTUDIANDO AHORA
curso
Estructuras de Datos en JavaScript
Aprende a trabajar con datos en JavaScript dominando objetos y arreglos. Comprende cómo crear, acceder y gestionar propiedades y métodos de objetos de manera eficaz. Profundiza en técnicas avanzadas de manipulación de objetos, incluyendo iteración, clonación y desestructuración para un código más limpio. Construye una base sólida en el manejo de arreglos y aprende a gestionar, iterar y modificar elementos de arreglos de forma eficiente. Domina métodos avanzados de arreglos como map, filter, find y sort para transformar y manejar datos eficazmente en tus aplicaciones.
6 horas 44 capítulosIntermedio
1 ESTUDIANDO AHORA
curso
Diseño CSS, Efectos y Sass
Mejore sus habilidades de estilizado dominando técnicas avanzadas de CSS para el diseño web moderno. Posicione y gestione elementos con precisión utilizando estrategias avanzadas de posicionamiento. Cree transiciones suaves y animaciones atractivas para mejorar la experiencia del usuario. Transforme y manipule elementos para lograr efectos visuales dinámicos. Desarrolle diseños responsivos que se adapten a diferentes dispositivos y optimice su flujo de trabajo con preprocesadores CSS como Sass.
6 horas 48 capítulosIntermedio
5 ESTUDIANDO AHORA
curso
Introduction to Digital Marketing
This comprehensive marketing course offers an in-depth journey through the fundamentals and advanced strategies of digital marketing. Explore key areas like SEO, PPC, social media, and AI while learning how to craft strategies that deliver results. Each section includes practical examples and tools to solidify your understanding. The course concludes with a hands-on project, empowering you to create and present your own comprehensive marketing plan.
4 horas 46 capítulosPrincipiante
3 ESTUDIANDO AHORA
curso
Ninja de JavaScript
¡Bienvenido al Curso de Ninja de JavaScript! Este curso interactivo y atractivo está diseñado para introducirte a los fundamentos de la programación en JavaScript a través de un juego divertido y educativo. Guiarás a un ninja a través de varios desafíos, utilizando JavaScript para controlar movimientos e interactuar con objetos como sushi. Comenzando con lo básico, aprenderás a navegar por el mapa, recoger y colocar sushi, y progresar gradualmente hacia conceptos de programación más complejos como funciones, bucles y declaraciones condicionales. Cada capítulo ofrece práctica práctica para reforzar tu aprendizaje, culminando en emocionantes desafíos que pondrán a prueba tus habilidades. Ya seas un principiante completo o busques afinar tus habilidades de codificación, este curso ofrece una experiencia de aprendizaje completa y agradable. ¡Únete a nosotros y conviértete en un ninja de la codificación!
3 horas 28 capítulosPrincipiante
14 ESTUDIANDO AHORA
curso
Lógica e Interacción en JavaScript
Domina los conceptos esenciales de JavaScript, incluyendo clases, manipulación del DOM, manejo de eventos y programación asíncrona. Aprende a crear aplicaciones web dinámicas e interactivas gestionando interacciones de usuario, obteniendo y mostrando datos, y manejando operaciones asíncronas de manera eficiente. A través de una combinación de teoría, desafíos prácticos y ejemplos del mundo real, este curso te proporciona las habilidades prácticas necesarias para el desarrollo web moderno.
8 horas 45 capítulosAvanzado
4 ESTUDIANDO AHORA
curso
Introducción a Blockchain
Explora el mundo revolucionario de la tecnología blockchain y su primera y más destacada aplicación, Bitcoin. Profundiza en las complejidades del funcionamiento de blockchain, los fundamentos técnicos de Bitcoin y las implicaciones más amplias y tendencias futuras en este campo dinámico. Obtén una comprensión integral de la tecnología que está transformando industrias y desafiando las nociones tradicionales de moneda y seguridad de datos.
1 hora 16 capítulosPrincipiante
curso
Fundamentos de Redes
Fundamentos de Redes es un curso integral diseñado para principiantes y estudiantes intermedios que buscan desarrollar habilidades prácticas en redes. Aborda desde conceptos básicos hasta aplicaciones avanzadas, cubriendo temas clave como tipos de redes, direccionamiento IP, protocolos y seguridad en redes. Al finalizar este curso, contarás con habilidades esenciales para solucionar problemas, asegurar y gestionar redes de manera eficaz, estableciendo una base sólida para una mayor especialización en redes.
2 horas 21 capítulosPrincipiante
3 ESTUDIANDO AHORA
curso
Introduction to QA
In this course, the user will get an introduction on how to perform manual testing on primarily web applications. The skills aquired in this course can be used in automation testing as well.
2 horas 21 capítulosPrincipiante
2 ESTUDIANDO AHORA
Discover more Learning Tracks
pista
Essential Office Skills
3 Cursos
75 TareasPrincipiante
4.5
(1052)
pista
Business AI Toolkit
3 Cursos42 TareasPrincipiante
4.1
(126)
pista
DevOps Specialist
6 Cursos91 TareasPrincipiante
4.0
(2)
pista
Supervised Learning Foundations
6 Cursos74 TareasPrincipiante
4.3
(51)
pista
Python from Zero to Hero
7 Cursos
2 Proyectos132 TareasPrincipiante
4.6
(406)
pista
C Programming Fundamentals
7 Cursos70 TareasPrincipiante
4.5
(24)
pista
Project Management Fundamentals
6 Cursos122 TareasPrincipiante
4.8
(5)
pista
Data Analyst with Python
6 Cursos179 TareasPrincipiante
4.5
(36)
pista
Fundamentos de Java
7 Cursos235 TareasPrincipiante
4.9
(45)
pista
Visualización de Datos con Python
4 Cursos56 TareasIntermedio
4.8
(5)
pista
Frontend Development with Angular
7 Cursos199 TareasPrincipiante
5.0
(11)
pista
Ingeniero de Aprendizaje Automático
6 Cursos144 TareasIntermedio
4.7
(17)
Por qué la gente elige Codefinity
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Entorno de codificación interactivo
Sumérgete en nuestro entorno interactivo: escribe y ejecuta tu código con retroalimentación en tiempo real y métricas de éxito—aprende haciendo en cada paso.
Soporte potenciado por IA
Aprovecha el asistente de IA integrado para explicar errores, sugerir soluciones o responder cualquier pregunta sobre tu código—para que te mantengas productivo y nunca te quedes atascado.
Check your progress
Concluye cada módulo con un cuestionario rápido que ofrece retroalimentación instantánea, rastrea tu progreso y asegura que hayas dominado los conceptos clave.
Promote your expertise
Obtén tu certificado reconocido por la industria al completar y compártelo en LinkedIn con un clic—deja que tu red vea lo que puedes hacer.
Confiado por empleados de empresas líderes
y estudiantes de universidades de élite
Acceso completo al catálogo
Una suscripción abre este curso y todo nuestro catálogo de proyectos y habilidades.Features:
500+ cursos mejor calificadosCopiloto de IA de vanguardia
Rutas de estudio personalizadas40+ proyectos prácticos del mundo real
Sin cancelación, antes de que finalice el plan seleccionado con descuento, acepto que Codefinity cobrará automáticamente $104 cada 3 meses hasta que cancele. Obtén más información sobre la política de cancelación y reembolso en Términos de Suscripción.
Prueba Codefinity con confianza – garantía de devolución de dinero de 30 días incluida
Para darte la bienvenida a Codefinity, estamos ofreciendo hasta 64% de descuento en nuestros cursos. Además, tenemos una garantía de devolución de dinero de 30 días, para que puedas probarnos sin riesgo.Esperamos sinceramente darte la bienvenida a nuestra plataforma y estamos comprometidos a hacer que tu experiencia de aprendizaje sea fácil, interactiva y divertida.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Accede instantáneamente a 500+ cursos
Aprendizaje ilimitado, acceso instantáneoObtén acceso completo a todos los cursos y rutas, incluyendo contenido en video, cuestionarios y materiales detallados—comienza a aprender en cualquier momento.
Certificados reconocidos por la industriaObtén certificados que validen tu experiencia y potencien tu carrera en tecnología, IA, datos, marketing y más allá.
Aprendizaje asistido por IAObtén pistas personalizadas, retroalimentación en tiempo real y explicaciones potenciadas por IA para acelerar tu progreso.
En constante expansión: Nuevos cursos y rutas profesionalesMantente a la vanguardia con cursos constantemente actualizados, hojas de ruta profesionales, desafíos y pruebas prácticas.
Desarrolla habilidades que importanDomina habilidades demandadas con cursos en IA, ciencia de datos, programación, marketing, automatización, desarrollo web y más.
Aprendizaje interactivo y fluidoParticipa en proyectos prácticos, ejercicios del mundo real y una experiencia de aprendizaje intuitiva — no se necesitan herramientas adicionales.
