Web Development with VueJS

Students discover what web frameworks are, why developers use them, and where Vue.js fits in the landscape. They'll set up their development environment and create their very first Vue app with reactive data.

• What are frameworks and why Vue.js?
• Project: Set up Vue CLI and create your first Hello Vue app

Dive into Vue's template syntax — mustache expressions, directives like v-if, v-for, and v-bind — and understand how reactive data makes the page update automatically when values change.

• Template syntax: interpolation, directives, and expressions
• Project: Build a dynamic profile card that updates in real time

Learn how to break a UI into reusable components. Students create parent and child components, pass data with props, and emit custom events to communicate between them.

• Creating components, props, and custom events
• Project: Build a reusable recipe card gallery from components

Master two-way data binding with v-model, handle form submissions, and add basic validation. Students build interactive forms that respond instantly to user input.

• Two-way binding with v-model and form handling
• Project: Create a contact form with live validation and feedback

Render dynamic lists from arrays, add and remove items, and toggle content visibility. Students combine v-for and v-if to build an interactive to-do list app.

• Rendering lists with v-for and conditional content with v-if/v-show
• Project: Build a to-do list app with add, complete, and delete features

Turn a single-page app into a multi-page experience using Vue Router. Students learn about routes, route parameters, navigation guards, and linking between pages.

• Setting up Vue Router, defining routes, and navigation links
• Project: Add Home, About, and Portfolio pages to your app

Connect your Vue app to the outside world. Students learn to fetch data from real APIs using the Fetch API, display loading states, and handle errors gracefully.

• Making API calls with fetch and displaying async data
• Project: Build a weather dashboard that pulls live data from an API

Learn how to share data across multiple components without messy prop-drilling. Students explore provide/inject and reactive stores to manage application-wide state.

• Sharing state with provide/inject and reactive stores
• Project: Add a shopping cart feature with shared state across pages

Make your app look professional with scoped styles, CSS transitions, and animated route changes. Students learn Vue's built-in transition component and add visual polish.

• Scoped CSS, Vue transitions, and animated route changes
• Project: Add smooth page transitions and polished styling to your app

It's showtime! Students combine everything they've learned to complete their full-featured web application, then deploy it live using Vercel or Netlify for the whole world to see.

• Complete your final web application with all features
• Project: Deploy your finished app live and share the link