Frontend Development with Vue.js
Intermediate
0.0
0 reviews
1 Learners
Build modern web interfaces from scratch using HTML, CSS, JavaScript, and Vue.js. Move from core web fundamentals to creating dynamic, component-based…
110
Chapters
11
Learning hours
112
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
Understand how the web works and how frontend applications are structured
Write JavaScript to handle logic, user interactions, and dynamic updates
Create and structure reusable components
Build page structure using HTML and semantic element
Work with arrays, objects, and asynchronous data in real scenarios
Manage state and handle user input in applications
Style interfaces using CSS, layout techniques, and responsive design
Use Vue.js to render data and build reactive user interfaces
Build a complete frontend application from scratch
Learning track content
Por Qué HTML Es Importante en el Desarrollo Web
Estructura Básica de un Documento HTML
Comprensión de Etiquetas, Elementos y Atributos
Desafío: Estructura un Documento HTML
Uso de Encabezados y Párrafos
Desafío: Estructurar el Contenido de Texto
Trabajando con Enlaces
Uso de Botones
Creación y Uso de Listas en HTML
Desafío: Estructurar Contenido con Listas
Trabajando con Imágenes en HTML
Desafío: Insertar Imágenes
Creación y Estructuración de Tablas HTML
Desafío: Trabajar con Tablas
Creación de Formularios HTML
Desafío: Crear un Formulario Web
Uso de Entradas de Formulario
Etiquetado de Campos de Formulario
Desafío: Aplicar Entradas de Formulario y Etiquetas
Atributos de Entrada HTML para Funcionalidad Mejorada
HTML Semántico y Estructura de la Página
Desafío: Implementar Elementos Semánticos
Construcción de un Sitio Web Completo con HTML
Qué Es CSS y Por Qué Es Importante
Conexión de CSS a HTML
Selectores Básicos de CSS
Estilización de Texto y Colores
Agregar Efectos Hover
Desafío: Da Estilo a Tu Primera Página Web
Formato de Texto para una Mejor 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
Propiedad Display: Block, Inline e Inline-Block
Desafío: Arreglar un Diseño Roto
Por Qué Existe Flexbox
Control de Dirección
Justificar el Contenido Horizontalmente
Alineación Vertical de Elementos
Trabajando con Elementos Flexibles
Uso de Colores de Fondo
Aplicación de Imágenes de Fondo
Agregar Sombras para Profundidad
Desafío: Crea un Componente de Tarjeta Moderna
¿Qué es JavaScript?
Ejecución de JavaScript en el Navegador
Variables y Constantes
Tipos de Datos y Operaciones Básicas
Trabajando con Cadenas y Números
Operadores y Comparaciones
Lógica Condicional `if` / `else`
Operadores Lógicos
Funciones
Parámetros y Valores de Retorno
Arreglos
Trabajando con Arreglos Usando `push`, `pop`
Bucle `For`
Métodos de Arrays `map`, `filter`
Búsqueda de Elementos en un Arreglo con el Método find()
Ordenar Arreglos con el Método sort()
Objetos
Creación de Objetos en JavaScript
Acceso a las Propiedades de Objetos en JavaScript
Trabajando con Propiedades de Objetos Anidados
Gestión de Propiedades de Objetos
Definición de Métodos de Objetos
Desestructuración de Objetos para un Código Más Limpio
Clonación y Fusión de Objetos con el Operador Spread
Selecting Elements in the DOM
Responding to User Events
Updating Page Content with JavaScript
Conceptos Básicos de Depuración
Introducción a JavaScript Asíncrono
Comprensión de los Callbacks en JavaScript
Gestión de Operaciones Asíncronas con Promesas
Uso de Async/Await para un Código Asíncrono Más Limpio
Obtención y Manejo de APIs en JavaScript
Preparing for Vue.js
What Is Vue.js and Why It Is Used
Creating Your First Vue App (Vite Setup)
Understanding the Vue Project Structure
Template Syntax and Rendering Data
Working with Reactive Data (ref)
Handling User Events in Vue
Conditional Rendering (v-if)
Rendering Lists (v-for)
What Are Components in Vue
Creating and Using Components
Passing Data with Props
Emitting Events from Components
Managing State with ref and reactive
Computed Properties
Watching Data with watch
Two-Way Binding with v-model
Handling Form Input
Form Validation Basics
Styling Components with CSS
Scoped Styles in Vue
Dynamic Classes and Styles
Project Setup
Building the UI Structure
Adding Interactivity
Managing State
Final Improvements and Cleanup
¡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
25 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
23 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
23 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
20 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
9 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
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
19 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
9 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
curso
Test Automation with Jest and Selenium
Build on top of your previously acquired Manual Testing knowledge and learn Automation Testing using Node.JS and Jest. This course will also introduce you to some additional libraries and tools like Selenium, Axios and Jenkins.
3 horas 26 capítulosIntermedio
1 ESTUDIANDO AHORA
curso
Functions in JavaScript
JavaScript functions from the fundamentals to modern syntax and best practices. Gain understanding of how functions shape every part of JavaScript, helping create clean, modular, and efficient code. Master both classic patterns and modern approaches to writing reusable, maintainable functions for any project.
1 hora 13 capítulosPrincipiante
1 ESTUDIANDO AHORA
curso
DOM Manipulation with JavaScript
A practical introduction to JavaScript DOM manipulation for beginners. This course covers everything from understanding the DOM and selecting elements to modifying content, handling events, and writing efficient code. Build interactive, dynamic web pages with confidence through guided examples and hands-on practice.
1 hora 15 capítulosPrincipiante
2 ESTUDIANDO AHORA
Discover more Learning Tracks
pista
Desarrollo de Juegos con Unity
4 Cursos
164 TareasPrincipiante
4.4
(328)
pista
Producción de Video con Adobe
4 Cursos123 TareasPrincipiante
5.0
(15)
pista
Herramientas de Diseño UI/UX
4 Cursos161 TareasPrincipiante
4.8
(28)
pista
Essential Office Skills
3 Cursos75 TareasPrincipiante
4.5
(940)
pista
Digital Marketing Essentials
6 Cursos293 TareasPrincipiante
4.5
(36)
pista
Complete Social Media Management
5 Cursos206 TareasPrincipiante
4.7
(25)
pista
Business AI Toolkit
3 Cursos42 TareasPrincipiante
4.2
(94)
pista
Desarrollo Web Sin Código
3 Cursos180 TareasPrincipiante
4.3
(12)
pista
DevOps Specialist
6 Cursos91 TareasPrincipiante
4.0
(2)
pista
Supervised Learning Foundations
6 Cursos74 TareasPrincipiante
4.8
(19)
pista
Python from Zero to Hero
7 Cursos
2 Proyectos132 TareasPrincipiante
4.7
(236)
pista
C Programming Fundamentals
7 Cursos70 TareasPrincipiante
4.6
(10)
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.
