Search

$35

weekly
or $70 for 6 classes
Class

Build Your Own Weather App With Vue.Js: Learn Web Development Step by Step!

New class
Ages 13-18
Live Group Course
Empower your child to build a real weather app using Vue 2! They’ll learn coding basics, APIs, and interactivity in a fun, hands-on class—perfect for young web developers!
Average rating:
5.0
Number of reviews:
(2 reviews)

Live video meetings
3x per week, 2 weeks
6-18 learners per class
60 min

What's included

6 live meetings
6 in-class hours
Assignments
1 hour per week. Learners will be asked to complete further work on their application between sessions, but this is optional.
Certificate of Completion
1 after class completion

Class Experience

US Grade 8 - 11
Intermediate Level
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.

I’ll start with the basics of Vue.js, a beginner-friendly JavaScript framework, and guide you step-by-step as you design the app layout, fetch real-time data from the National Weather Service API, and make your app interactive. Along the way, you'll learn skills like working with APIs, handling user input, and deploying your app so you can share it with family and friends.

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.

Key Skills You’ll Learn:

 - Building dynamic web applications with Vue 2
 - Fetching and displaying real-time data from the National Weather Service API
 - Designing responsive and user-friendly interfaces
 - Deploying your app online

Who Should Join?
This class is perfect for beginners with basic knowledge of HTML, CSS, and JavaScript who want to dive deeper into web development by creating a practical project. If you’ve ever wondered how apps work or dreamed of building your own, this is the class for you!

What You’ll Need:

 - A computer with a stable internet connection
 - A GitHub account
 - No account needed! We'll use the free National Weather Service API
 - Basic familiarity with HTML and JavaScript (we’ll help fill in the gaps!)

Learning Goals

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

Syllabus

6 Lessons
over 2 Weeks
Lesson 1:
Introduction to Vue 2 and Setting Up the Project
 Topics Covered:
Overview of Vue.js and its purpose.
Installing Vue CLI or setting up a basic Vue 2 project with CDN.
Explanation of Vue components and data binding.
Creating the project folder structure.

Hands-On Activities:
Set up a basic Vue project.
Create a simple "Hello, Weather App!" component. 
60 mins online live lesson
Lesson 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. 
60 mins online live lesson
Lesson 3:
Fetching Weather Data from an API
 Topics Covered:
What are APIs, and how do they work?
Introduction to the NWS 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. 
60 mins online live lesson
Lesson 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. 
60 mins online live lesson

Other Details

Pre-Requisites
Students should be familiar with HTML, CSS, and JavaScript before attempting this class.
Language of Instruction
English (Level: B1)
External Resources
Learners will not need to use any apps or websites beyond the standard Outschool tools.

Meet the teacher

Joined June, 2022
5.0
2reviews
Profile
Teacher expertise and credentials
I have been a web developer for 10 years, and have been using Vue.js professionally since 2019.
Tony P suggests this class next...
Web Application Development - Did Someone Order a Pizza? Learn Vue.Js!
Tony P
5.0
(2)
$18 per class
Group Class
5 wks, 2/wk, 45 min
15-18


Parents also liked
Beginner Coding Class With Minecraft: Level 1 - The Basics of Programming
Playful Digital Learning
4.9
(587)
$36 per class
Next session at 8 PM on Monday
Group Class
1 wk, 5/wk, 1.50 hr
8-13
Python Coding for Beginners: Fun Projects to Learn Python & Real Coding Skills
PopSkool: English, Music, Art, Math, Coding & More
5.0
(1)
$15 per class
Next session starting now
Group Class
8 wks, 1/wk, 55 min
10-14
Beginner Coding Camp With Minecraft: Level 3 - The Basics of Programming
Playful Digital Learning
4.9
(587)
$36 per class
Next session at 2 PM on Mon 6/2
Group Class
1 wk, 5/wk, 1.50 hr
8-13
Python Programming for Beginners: One-on-One Coding on Minecraft
BrainBytes
4.9
(241)
$70 per session
1-on-1 Lessons
On Demand
7-17
Programming on Minecraft: One-on-One Coding Sessions
BrainBytes
4.9
(241)
$65 per session
1-on-1 Lessons
On Demand
6-15
Computer Programming, Coding, Python, Javascript, C#, C++ One on One Tutoring
Dragon Academy by Trammell Classes, DnD,Coding,RPG
4.8
(729)
$36 per class
Next session at 4 PM tomorrow
Group Class
1/wk, 25 min
7-12
All About Python Programming Level 4 | Python Coding Class for Intermediates
David Sofield
4.9
(830)
$33 per class
Group Class
10 wks, 1/wk, 1 hr
12-17
Coding With Boomer:Experienced
Brenda Ban
4.9
(483)
$18 per class
Next session at 6:45 PM on Tue 6/17
Group Class
2 wks, 2/wk, 45 min
5-10
All About Python Programming | Python Coding Summer Camp for Beginners Level I
David Sofield
4.9
(830)
$22 per class
Next session at 4:15 PM on Mon 6/16
Group Class
2 wks, 4/wk, 1 hr
11-16
Scratch Programming: One-On-One Coding Sessions
BrainBytes
4.9
(241)
$65 per session
1-on-1 Lessons
On Demand
6-13
Java Coding: Learn Programming With Fun Projects - Level 1
Einsteins Square: Chess, Coding, Math, Art, Games
4.8
(5,847)
$21 per class
Next session at 8 PM tomorrow
Group Class
12 wks, 1/wk, 50 min
12-17
Arduino Coding Camp
Elene Feigenbaum
4.9
(146)
$18 per class
Next session at 5 PM on Mon 6/16
Group Class
2 wks, 5/wk, 55 min
12-17
Scratch Video Game Coding: Fun Programming
Michelle Lewis Scratch Coding STEM Educator
5.0
(19)
$48 per session
1-on-1 Lessons
On Demand
7-17
Scratch Coding Club for Intermediate Programmers
Ms. Sara (STEM Apprentice Academy)
5.0
(583)
$24 per class
Next session at 11 PM on Tue 9/2
Group Class
1/wk, 45 min
8-10
All About Python Programming Level 1 | Python Coding Class for Teenagers
David Sofield
4.9
(830)
$22 per class
Next session at 12:15 AM on Friday
Group Class
8 wks, 1/wk, 1 hr
11-16
Python Coding Summer Camp Level 1
Codingal - #1 AI & Coding | Backed by Y Combinator
5.0
(5)
$18 per class
Next session at 1 PM on Monday
Group Class
1 wk, 5/wk, 50 min
8-13
See More Classes
Home
Search
Give a Gift Card
Open currency, time zone, and language settings
Language & Region
Log In