Batch 1 – 4-Week Online Modern JavaScript Bootcamp by Coach Arjay – November 4, 2024

Learn and master modern JavaScript from the ground up, building real-world apps on your journey to expert-level proficiency!

Reserve Your Slot Now!

Payment methods are Gcash and BPI bank transfers.

Note: The reservation fee is deductible from the enrollment fee. See our terms and conditions here.

Contact or email us at info@sova.ph for your inquiries.

In this course, you will

• Master programming with modern JavaScript, starting from the basics and progressing to advanced concepts.
• Dive deep into object-oriented programming (OOP) with JavaScript, including working with prototypes and classes.
• Build real-world front-end applications using JavaScript, such as quizzes, weather apps, and chat rooms.
• Create functional JavaScript-driven UI components like popups, drop-downs, tabs, tooltips, and more.
• Utilize modern JavaScript features with an up-to-date workflow using tools like Babel and Webpack.
• Learn to manage application data by using real-time databases for storing, retrieving, and updating information.
• Leverage APIs to access and utilize third-party data, such as weather information.
• Build your own modern, responsive portfolio website using HTML, CSS, and JavaScript, and learn how to upload it online.

Course Overview

• Introduction

1. 1. • What is JavaScript?
      • JavaScript in Action!
      • How JavaScript Is Executed
      • Dynamic vs Weakly Typed Languages
      • JavaScript Executes In A Hosted Environment
      • JavaScript vs Java
      • A Brief History Of JavaScript
      • Setting Up a Development Environment

• JavaScript Basics

1. 1. • Adding JavaScript to a Web Page
      • The Browser Console
      • Variables, Constants & Comments
      • Data Types at a Glance
      • Strings
      • Numbers
      • Template Strings
      • Arrays
      • Null & Undefined
      • Booleans & Comparisons
      • Loose vs Strict Comparison
      • Type Conversion

• Control Flow Basics

1. 1. • What is Control Flow?
      • For Loops
      • While Loops
      • Do While Loops
      • If Statements
      • Else & Else If
      • Logical Operators
      • Logical NOT
      • Break & Continue
      • Switch Statements
      • Variables & Block Scope

• Functions & Methods

1. 1. • What are Functions?
      • Function Declarations & Expressions
      • Arguments & Parameters
      • Returning Values
      • Arrow Functions
      • Functions vs Methods
      • Foreach Method & Callbacks
      • Callback Functions in Action

• Object Literals

1. 1. • Objects at a Glance
      • Creating an Object Literal
      • Adding Methods
      • ‘this’ Keyword
      • Objects in Arrays
      • Math Object
      • Primitive vs Reference Types

• The Document Object Model

1. 1. • Interacting with the Browser
      • The DOM Explained
      • The Query Selector
      • Other Ways to Query the DOM
      • Adding & Changing Page Content
      • Getting & Setting Attributes
      • Changing CSS Styles
      • Adding & Removing Classes
      • Parents, Children & Siblings
      • Event Basics (click events)
      • Creating & Removing Elements
      • Event Bubbling (and delegation)
      • More DOM Events
      • Building a Popup

• Forms & Form Events

1. 1. • Events Inside Forms
      • Submit Events
      • Regular Expressions
      • Testing RegEx Patterns
      • Basic Form Validation
      • Keyboard Events

• Project #1: Interactive Quiz

• Array Methods

1. 1. • Filter Method
      • Map Method
      • Reduce Method
      • Find Method
      • Sort Method
      • Chaining Array Methods

• Project #2: Todo List

• Dates & Times

1. 1. • Dates & Times in JavaScript
      • Timestamps & Comparisons
      • Building a Digital Clock
      • Date-fns Library

• Async JavaScript

1. 1. • What is Asynchronous JavaScript?
      • Async Code in Action
      • What are HTTP Requests?
      • Making HTTP Requests (XHR)
      • Response Status
      • Callback Functions
      • JSON Data
      • Callback Hell
      • Promise Basics
      • Chaining Promises
      • The Fetch API
      • Async & Await
      • Throwing & Catching Errors

• Project #3: Weather App

• Local Storage

1. 1. • What is Local Storage?
      • Storing & Getting Data
      • Deleting Storage Data
      • Stringifying & Parsing Data
      • Updating the Weather App

• Object Oriented JavaScript

1. 1. • What is OOP?
      • Object Literal Recap
      • Classes
      • Class Constructors
      • Class Methods & Method Chaining
      • Class Inheritance (subclasses)
      • Super( )
      • Constructors (under the hood)
      • Prototype Model
      • Prototypal Inheritance
      • Built-in Objects
      • Making a Forecast Class (weather app)

• Databases (Firebase)

1. 1. • NoSQL Databases
      • Firebase & Firestore
      • Connecting to Firestore
      • Getting Collections
      • Saving Documents
      • Deleting Documents
      • Real-time Listeners
      • Unsubscribing

• Project #4: Real-time Chatroom

• More ES6 Features

1. 1. • Spread & Rest
      • Sets
      • Symbols

• Modern Workflow with Babel & Webpack

1. 1. • An Introduction to Babel
      • Installing Node.js & Babel
      • What is Webpack?
      • Introduction to Modules
      • Babel & Webpack Together

• Project #5: Project – UI Library

1. 1. • Tooltips
      • Dropdowns
      • Tabbed Content
      • Snackbars

• Project #6: Online Portfolio Website