Crea tu propia aplicación meteorológica con Vue.Js: ¡aprenda desarrollo web paso a paso!
Qué está incluido
6 lecciones pregrabadas
6 semanas
de apoyo docente1 año de acceso
al contenidoTareas
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 claseExperiencia 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
Programa de estudios
6 Lecciones
más de 6 semanasLecció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:
Reseñas
Curso a su propio ritmo
5 US$
semanalmente6 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