Outschool
Abrir configuración de moneda, zona horaria e idioma
Iniciar sesión

Crea tu propia aplicación meteorológica con Vue.Js: ¡aprenda desarrollo web paso a paso!

¡Permítale a su hijo crear una aplicación meteorológica real con Vue 2! Aprenderá los conceptos básicos de codificación, API e interactividad en una clase divertida y práctica, ¡perfecta para desarrolladores web jóvenes!
Tony P
Puntuación media:
5.0
Número de reseñas:
(2)
Clase

Qué está incluido

6 lecciones pregrabadas
6 semanas
de apoyo docente
1 año de acceso
al contenido
Tareas
1 hora por semana. Learners will be asked to complete further work on their application between sessions, but this is optional.
Certificado de finalización
1 después de finalizar la clase

Experiencia de clase

Nivel de inglés - B1
Grado de EE. UU. 8 - 12
Nivel Beginner - Intermediate
Get ready to create your own weather app in this exciting hands-on coding class! Using Vue 2, you'll learn how to build a functional web application that shows current weather and a forecast for any city in the United States. This course is perfect for young developers who want to explore real-world coding concepts while creating something cool and useful.

By the end of this course, you’ll have your very own weather app, a solid understanding of Vue 2, and the confidence to tackle more coding projects.

Metas de aprendizaje

Achieve a basic familiarity with the Vue.js framework
Solidify understanding of JSON
objetivo de aprendizaje

Programa de estudios

6 Lecciones
más de 6 semanas
Lección 1:
Introduction to Vue 2 and Setting Up the Project
 Topics Covered:
Overview of Vue.js and its purpose.
Setting up a basic Vue 2 project with CDN.
Explanation of Vue components and data binding.
Creating the project folder structure and git repository.

Hands-On Activities:
Set up a basic Vue project.
Create a simple Vue component. 
Lección 2:
Building the Basic App Structure
 Topics Covered:
Vue templates and rendering lists.
Understanding Vue directives (v-bind, v-if, v-for).
Adding basic CSS styling for the app layout.

Hands-On Activities:
Create the app’s main layout (header, input field, results area).
Add a dynamic title or message using Vue’s reactivity. 
Lección 3:
Fetching Weather Data from an API
 Topics Covered:
What are APIs, and how do they work?
Introduction to the weather API
Using JavaScript's fetch() method within Vue.

Hands-On Activities:
Fetch weather data for a hardcoded city and display it in the app.
Discuss basic error handling. 
Lección 4:
Making the App Interactive
 Topics Covered:
Vue 2 event handling (v-on and methods).
Binding input fields with v-model.
Passing user input (like a city name) to the API call.

Hands-On Activities:
Add an input field where users can type a city name.
Fetch and display weather data based on user input. 

Otros detalles

Requisitos previos
Students should be familiar with HTML, CSS, and JavaScript before attempting this class.
Lista de útiles escolares
Laptop / Computer with internet connection
Recursos externos
Además del aula de Outschool, esta clase utiliza:
Se unió el June, 2022
5.0
2reseñas
Perfil
Experiencia y certificaciones del docente
I have been a web developer for 10 years, and have been using Vue.js professionally since 2019.

Reseñas

Curso a su propio ritmo
Compartir

5 US$

semanalmente
6 lecciones pregrabadas
6 semanas de apoyo docente
Elige tu fecha de inicio
1 año de acceso al contenido

Elige tu fecha de inicio
Edades: 13-18

No admite inscritos
Acerca de
Apoyo
SeguridadPrivacidadPrivacidad de CAPrivacidad del alumnoSus opciones de privacidadTérminos
Obtener la aplicación
Descargar en la App StoreDescargar en Google Play
© 2025 Outschool