This course introduces the development of interactive web pages and component-based web applications using JavaScript, jQuery, and Vue.js. Participants build a foundation in JavaScript, use jQuery for DOM manipulation and existing web application maintenance, and develop reactive interfaces with Vue 3.

The course covers browser events, forms, asynchronous programming, API integration, reusable components, routing, and application state. A capstone project brings these skills together in a functional web application.

 

Duration 8 Days – 56 hrs.

 

Objectives

• Apply JavaScript syntax, control structures, functions, arrays, and objects.
• Use modern JavaScript features to organize and simplify application code.
• Manipulate page content and respond to browser events.
• Implement form validation and browser-based data storage.
• Retrieve and process API data using promises, async/await, and Fetch.
• Use jQuery selectors, DOM methods, event handling, and Ajax.
• Build reactive interfaces using Vue 3 and the Composition API.
• Develop reusable components with props, events, and slots.
• Implement navigation and shared application state.
• Build a web application with API integration and appropriate error handling.

 

Target Audience 

• Web developers expanding their front-end development skills.
• Junior developers with basic programming experience.
• HTML and CSS developers transitioning to JavaScript applications.
• Software developers learning Vue.js.
• Developers maintaining websites that use jQuery.
• Technical professionals involved in building web interfaces.

 

Prerequisites 

• Basic knowledge of HTML structure and CSS styling.
• Familiarity with programming concepts such as variables, conditions, and loops.
• Ability to use a code editor and manage project files.
• Basic understanding of websites, browsers, and client-server communication.
• Familiarity with command-line navigation and software installation.
• A computer with a modern browser, code editor, and a supported Node.js release with npm installed.

 

 

Course Outline 

Day 1: JavaScript Foundations

Module 1: Introduction to JavaScript and the Development Environment

• Roles of HTML, CSS, and JavaScript
• Adding JavaScript to web pages
• Browser developer tools and the console
• JavaScript syntax and coding conventions

 Module 2: Variables, Data Types, and Operators

• Variable declarations using let and const
• Primitive data types and type conversion
• Arithmetic, comparison, and logical operators
• Template literals
• Null, undefined, and equality comparisons

 Module 3: Control Flow and Functions

• Conditional statements and switch
• Loops and iteration
• Function declarations and expressions
• Parameters, return values, and scope
• Arrow functions 

 

Day 2: JavaScript Data and Modern Language Features

Module 4: Arrays and Objects

• Creating and accessing arrays and objects
• Array methods: map, filter, find, and reduce
• Object properties and methods
• Destructuring
• Spread and rest syntax
• Reference behavior and shallow copying

 Module 5: Organizing JavaScript Code

• Block scope and closures
• Optional chaining and nullish coalescing
• Introduction to classes
• JavaScript modules, imports, and exports
• Reusable functions and separation of concerns

 Module 6: Error Handling and Debugging

• Common syntax and runtime errors
• Using try, catch, and finally
• Breakpoints and step-by-step debugging
• Inspecting variables and the call stack

  

Day 3: Browser Interaction and Asynchronous JavaScript

Module 7: DOM Manipulation and Events

• Selecting and traversing DOM elements
• Updating content, attributes, and styles
• Creating and removing elements
• Event listeners and event objects
• Event bubbling and delegation
• Preventing default browser behavior

 Module 8: Forms and Browser Storage

• Reading and processing form values
• Client-side validation and feedback
• Accessible form interactions
• Working with JSON
• Using localStorage and sessionStorage
• Limitations of client-side validation and storage

 Module 9: Asynchronous Programming and API Integration

• Callbacks and asynchronous execution
• Promises and async/await
• Fetch requests and JSON responses
• HTTP response status handling
• Loading, empty, and error states
• Introduction to cross-origin requests

  

Day 4: jQuery for Interactive Web Pages

Module 10: jQuery Fundamentals

• Including jQuery in a project
• Selectors and document readiness
• DOM traversal and manipulation
• Working with attributes, properties, and classes
• Method chaining

 Module 11: jQuery Events, Forms, and Effects

• Event binding using on
• Delegated event handling
• Form values and submission handling
• Showing, hiding, and toggling elements
• Basic effects and animations
• Reading and maintaining existing jQuery code

 Module 12: jQuery Ajax and Technology Boundaries

• Ajax requests using $.ajax
• Processing JSON responses
• Success, failure, and completion handling
• Comparing jQuery Ajax with Fetch
• Recognizing when native JavaScript is sufficient
• Avoiding direct jQuery manipulation of Vue-managed elements

  

Day 5: Vue.js Fundamentals

Module 13: Vue 3 Project Setup

• Vue application concepts
• Creating a project with create-vue and Vite
• Project structure and development commands
• Single-File Components
• Composition API and script setup

 Module 14: Templates and Reactive Data

• Text interpolation and attribute binding
• Reactivity using ref and reactive
• Computed properties
• Conditional rendering
• List rendering and stable keys
• Class and style binding

 Module 15: Events and Form Binding

• Event handling in Vue
• Event modifiers
• Two-way binding using v-model
• Form controls and validation feedback
• Watchers for reactive side effects

 

 Day 6: Components and Data Integration

Module 16: Reusable Vue Components

• Creating and importing components
• Passing data with props
• Communicating with emitted events
• Component v-model
• Slots and reusable layouts
• Component design and responsibilities

 Module 17: Lifecycle Hooks and Composables

• Component lifecycle concepts
• Mounted and unmounted hooks
• Cleaning up event listeners and timers
• Template refs
• Extracting reusable logic into composables

 Module 18: API Integration in Vue

• Fetching data within components
• Reactive loading and error states
• Rendering API results
• Search, filtering, and pagination concepts
• Handling unsuccessful requests
• Environment configuration and client-side data exposure

  

Day 7: Application Structure and Readiness

Module 19: Navigation with Vue Router

• Installing and configuring Vue Router
• Route definitions and page components
• Navigation links and programmatic navigation
• Route parameters and query strings
• Nested routes
• Not-found routes

 Module 20: Shared State with Pinia

• Local state versus shared state
• Creating and using stores
• State, getters, and actions
• Managing shared data
• Coordinating stores with API requests

 Module 21: Application Quality and Production Preparation

• Responsive and accessible interfaces
• Safe rendering of user-provided content
• Client-side security boundaries
• Debugging with browser and Vue developer tools
• Basic performance considerations
• Creating and previewing a production build

  

Day 8: Capstone Project

Module 22: Capstone Planning and Application Structure

• Define a task management application
• Establish views, components, routes, and data structures
• Identify shared state and API requirements
• Plan validation and user feedback

 Module 23: Capstone Implementation

• Build task list and task detail views
• Implement task creation, editing, and deletion
• Add search, filtering, and status updates
• Use reusable components and composables
• Manage shared state with Pinia
• Integrate a provided practice API
• Handle loading, empty, and error states

 Module 24: Capstone Completion

• Refine responsive layouts and accessible interactions
• Resolve functional and integration issues
• Verify navigation, validation, and data handling
• Generate and preview the production build
• Document setup instructions and application features

 

Capstone Deliverable: A Vue 3 task management application demonstrating JavaScript logic, reusable components, routing, shared state, form validation, and API integration.