Become a Vanilla JavaScript Developer
In this tutorial, we are going to learn about JavaScript (Vanilla JS) - for building incredible, powerful JavaScript applications.
- 4 Hours
- 12 Videos
- 10,234+ Enrolled
Create Free Account
By continuing you accept the Terms of Use, Privacy Policy, and Data Policy
What will you learn?
Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.
Introduction to JavaScript
Module #1 20 Lessons 1 hour 12 min
Introduction to JavaScript
Module #1 20 Lessons 1 hour 12 min
In this module you’ll learn:
-
Introduction1m 11s
-
What is JavaScript15m 22s
-
pdf15m 22s
-
Downloadable files15m 22s
-
JavaScript in Action!43m
-
How JavaScript Is Executed13m
-
files
-
pdf
-
pdf 2
-
JavaScript Executes In A Hosted Environment8m
-
pdf
-
Course Outline – What’s In This Course
-
pdf
-
How To Get The Most Out Of This Course15m 56s
-
pdf
-
JavaScript vs Java17m 23s
-
A Brief History Of JavaScript.
-
pdf
-
files
-
Setting Up a Development Environment7m 29s
Basics Variables, Data Types, Operators & Functions
Module #2 55 Lessons 32 min
Basics Variables, Data Types, Operators & Functions
Module #2 55 Lessons 32 min
In this module you’ll learn:
-
Introduction15m 22s
-
Setting Up the Project15m 22s
-
Adding JavaScript Code to a Web Page15m 22s
-
Adding JavaScript to the Website15m 22s
-
Introducing Variables & Constants15m 22s
-
pdf3h 26m 43s
-
Declaring & Defining Variables3h 26m 43s
-
pdf3h 26m 43s
-
pdf 2
-
files
-
Working with Variables & Operators
-
Understanding the Starting Code
-
Data Types Numbers & Strings (Text)
-
files
-
Using Constants
-
files
-
More on Strings
-
pdf
-
Introducing Functions
-
Adding A Custom Function
-
pdf
-
downloadable file
-
Returning Values
-
The (Un)Importance of Code Order
-
An Introduction to Global & Local Scope
-
More about the return Statement
-
file
-
Executing Functions Indirectly
-
files
-
Converting Data Types
-
files
-
Splitting Code into Functions
-
files
-
Connecting all Buttons to Functions
-
Working with Code Comments
-
More Operators!
-
pdf
-
pdf2
-
More Core Data Types!
-
file
-
file 2
-
Using Arrays
-
Creating Objects.
-
Accessing Object Data
-
file
-
Adding a Re-Usable Function That Uses Objects
-
pdf
-
undefined, null & NaN.
-
file
-
Importing Scripts Correctly with defer & async
-
summary pdf
-
wrap up
-
projects files
-
projects
-
projects files
Efficient Development & Debugging
Module #3 20 Lessons 10 min
Efficient Development & Debugging
Module #3 20 Lessons 10 min
In this module you’ll learn:
-
intro3h 26m 43s
-
Efficient Development & Debugging – An Overview3h 26m 43s
-
Configuring the IDE Look & Feel3h 26m 43s
-
Using Shortcuts3h 26m 43s
-
Working with Auto-Completion & IDE Hints3h 26m 43s
-
Installing IDE Extensions3h 26m 43s
-
Constants3h 26m 43s
-
Tweaking Editor Settings3h 26m 43s
-
Utilizing Different IDE Views
-
file
-
How to google Correctly
-
pdf
-
An Error Message! No Reason To Panic!.
-
Using console.log() to look into the Code.
-
Next-Level Debugging with the Chrome Devtools & Breakpoints
-
Files
-
Testing Code Changes Directly in the Devtools
-
Debugging Code directly Inside VS Code
-
Wrap up
-
files
Working with Control Structures (if Statements, Loops, Error Handling)
Module #4 63 Lessons 32 min
Working with Control Structures (if Statements, Loops, Error Handling)
Module #4 63 Lessons 32 min
In this module you’ll learn:
-
intro3h 26m 43s
-
pdf2m 58s
-
pdf1m 22s
-
Introducing if Statements & Boolean (Comparison) Operators3h 26m 43s
-
files4m 7s
-
Using if Statements5m 8s
-
files2m 55s
-
Working with if, else and else-if1m 39s
-
Beware When Comparing Objects & Arrays for Equality!
-
pdf
-
pdf 2
-
The Logical AND and OR Operators.
-
Understanding Operator Precedence
-
Beyond true false Truthy and Falsy Values.
-
pdf
-
file
-
file 2
-
Setting Up a Bigger Example Project (The Monster Killer)
-
Adding an Attack Function
-
files
-
file 2
-
Using if Statements for Checking the Win-Condition
-
Adding More if Statements & A Strong Attack Functionality
-
file
-
file 2
-
Time for a Heal Player Functionality!
-
files
-
Controlling the Conditional Bo … e (Without Boolean Operators!)
-
Adding a Reset Game Functionality
-
file
-
file 2
-
Validating User Input
-
Utilizing Global Constants as Identifiers in Conditional Code.
-
Adding a Conditional Battle Log
-
file
-
Introducing the Ternary Operator.
-
pdf
-
A Bit of Theory Statements vs Expressions.
-
pdf
-
Logical Operator Tricks & Shorthands
-
files
-
Working with the switch-case Statement
-
Introducing Loops
-
loops pdf
-
files
-
The for Loop.
-
files
-
The for-of Loop
-
file
-
The for-in Loop
-
control-16-while
-
The while & do-while Loops.
-
Controlling Loops with break.
-
files
-
files
-
Controlling Iterations with continue
-
files
-
more control with label statement
-
error handling
-
Throwing Custom Errors
-
pdf
-
Working with try-catch to Catch & Handle Errors.
-
Wrap Up
Behinf the scenes
Module #4 24 Lessons
Behinf the scenes
Module #4 24 Lessons
In this module you’ll learn:
-
Module Introduction
-
ES5 vs ES6+ (Next Gen JS) – Evolution of JavaScript
-
pdf
-
files
-
fFiles
-
var vs let & const – Introducing Block Scope.
-
pdf
-
files
-
Strict Mode & Writing Good Code
-
pdf
-
pdf2
-
files
-
pdf
-
Inside the JavaScript Engine – How the Code Executes
-
Primitive vs Reference Values
-
-
files
-
Garbage Collection & Memory Management
-
pdf
-
wrap
-
file
-
file
-
files
-
files
More on Functions
Module #4 35 Lessons
More on Functions
Module #4 35 Lessons
In this module you’ll learn:
-
Recapping Functions Knowledge – What We Know Thus Far.
-
Functions vs Methods
-
Functions vs Methods
-
files
-
Functions are Objects!.
-
Function Expressions Storing Functions in Variables.
-
files
-
Function Expressions vs Function Declarations.
-
pdf
-
Anonymous Functions.
-
files
-
files 2
-
Working on the Project Adding User Choices to the Game
-
Implementing the Core Game Logic
-
pdf
-
functions-05-arrow-functions.
-
Introducing Arrow Functions.
-
functions-06-finished-game-logic
-
Outputting Messages to the User
-
Default Arguments in Functions
-
files
-
files
-
Introducing Rest Parameters (Rest Operator).
-
Creating Functions Inside of Functions
-
files
-
functions-10-callback-functions
-
Understanding Callback Functions
-
functions-11-bind-finished
-
Working with bind().
-
Adding bind() to the Calculator Project
-
functions-revisited
-
call() and apply()
-
Wrap Up
-
functions-01-starting-code
-
functions-02-function-expressions.zip
Working with the DOM (Browser HTML Code) in JavaScript
Module #4 63 Lessons
Working with the DOM (Browser HTML Code) in JavaScript
Module #4 63 Lessons
In this module you’ll learn:
-
Module Introduction
-
What’s the DOM.
-
Document and Window Object
-
dom-01-starting-code.zip
-
file pdf
-
Understanding the DOM and how it’s created
-
Nodes & Elements – Querying the DOM Overview.
-
file pdf
-
file
-
pdf
-
Selecting Elements in the DOM
-
pdf
-
Exploring and Changing DOM Properties
-
Attributes vs Properties.
-
pdf
-
Selecting Multiple Elements & Summary.
-
pdf
-
Traversing the DOM – Overview
-
Traversing Child Nodes
-
Using parentNode & parentElement
-
dom-03-dom-traversing
-
Selecting Sibling Elements
-
DOM Traversal vs Query Methods.
-
file
-
Styling DOM Elements
-
pdf
-
Creating Elements with JS – Overview
-
Adding Elements via HTML in Code
-
Adding Elements via createElement().
-
file
-
Inserting DOM Elements
-
Cloning DOM Nodes
-
Live Node Lists vs Static Node Lists
-
Removing Elements
-
files
-
Insertion & Removal Method Summary.
-
pdf
-
files
-
Setting Up the Practice Project
-
files
-
Selecting the Modal and Add Button
-
dom-08-toggle-modal-visible-class.zip
-
Opening a Modal by Changing CSS Classes
-
Controlling the Backdrop
-
om-09-handling-movie-modal.zip
-
pdf
-
Fetching and Validating User Input
-
Creating a Movie in JavaScript & Clearing the Input
-
dom-11-adding-and-rendering-movies
-
Rendering Movie Items on the Screen
-
Deleting Movie Elements
-
files
-
dom-13-two-modals
-
Showing & Hiding the Are you sure Dialog
-
Starting with the Confirmation Logic
-
files
-
Finishing the App.
-
Wrap Up
-
files
-
dom-02-basic-selection-code.zip
-
dom-03-dom-traversing.zip
-
fles
-
files
More on Arrays & Iterables
Module #4 35 Lessons
More on Arrays & Iterables
Module #4 35 Lessons
In this module you’ll learn:
-
intro
-
pdf
-
What are Iterables and Array-like Objects
-
file
-
file 2
-
Creating Arrays
-
Which Data Can You Store In Arrays
-
arrays-03-push-pop-shift-unshift
-
push(), pop(), unshift(), shift() – Adding & Removing Elements
-
arrays-04-splice.zip
-
The splice() Method.
-
arrays-05-slice.zip
-
Selecting Ranges & Creating Copies with slice()
-
Adding Arrays to Arrays with concat()
-
arrays-06-concat.zip
-
arrays-07-indexof.zip
-
Retrieving Indexes with indexOf() & lastIndexOf()
-
arrays-08-find-findindex.zip
-
Finding Stuff find() and findIndex().
-
Is it Included.
-
Alternative to for Loops The forEach() Method
-
Alternative to for Loops The forEach() Metho
-
arrays-09-foreach.zip
-
arrays-10-map.zip
-
Transforming Data with map()
-
arrays-11-sort-reverse.zip
-
sort()ing and reverse()ing.
-
Filtering Arrays with filter().
-
arrays-12-filter-and-short-arrow-function.zip
-
Where Arrow Functions Shine!
-
arrays-13-reduce.zip
-
The Important reduce() Method
-
Arrays & Strings – split() and join()
-
arrays-15-spread-operator.zip
-
The Spread Operator (…)
Hi, I’m Saleem,
I will be taking you through lessons.
Create beautiful website with this Geeks UI template. Get started building a site today.
45
Lessons
10,500+
Students
12+
Learning Hours

What our learners are saying
12+ million people are already learning on Geeks
Markoskills helped me sharpen my development skills with clear,hands-on courses.i highly recommend it to anyone serious about growing as a developer
AB ASHTIAQ
Software Engineer at Palansite
Thanks to Markoskills , i improved fronted and backhand skills fast.it's the perfect platform for any web developer looking to grow
Alyana Saeed
Software Engineer at Classroom
Frequently Asked Questions.
Find answer to common questions about our curses, subscriptions, certification,and more.still need help? We're here for you !
Markoskills provides a variety of courses focusing on skill development in areas, such as web development , data science, and engineering architecture
To enroll,visit the markoskills website, browse the course catalog,select your desired course,and follow the enrollment instructions provided
Prerequisties vary by course. Some may require prior knowledge or experience, while others are designed for beginners. Check he course details for specifics information.
Yes,upon successfully completing a course, participants receive a certificates that can be shared with employers or added to professional profiles
Markoskills Offer subscription plans providing access to multiple courses . for the latest information on subscription options and pricing ,please refer to the website
Yes ,Markoskills offers solutions for organizations looking to upskills their workforce.contact their sales team through the website for more details visit
Markoskills provides support through varies channels incljding discussion forums ,direct messaging with instrutors, and a help center
email:support@markoskills.com
Join more than 1 million learners worldwide
Effective learning starts with assessment. Learning a new skill is hard work—Signal makes it easier.