Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development JavaScript

Javascript Tutorial and Projects Course

Basic Introduction to Javascript by Building Many Interesting Projects
Rating: 4.7 out of 54.7 (1,545 ratings)
13,755 students
Created by John Smilga
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • students will know what is Javascript
  • students will know how to add Javascript to their projects
  • students will know the basics of working with Javascript
  • students will build few simple projects using Javascript

Course content

17 sections • 355 lectures • 39h 58m total length

  • Preview02:34
  • Goals
    01:43
  • Structure
    02:16
  • Video Blur Fix
    01:37
  • Course Review
    00:32

  • Dev Setup Intro
    01:00
  • VS-Code and Chrome
    03:26
  • Extensions
    11:35
  • Emmet
    03:37

  • Basics Intro
    00:17
  • Basic Project
    03:10
  • Inline Javascript
    03:15
  • Internal Javascript
    07:51
  • External Javascript
    10:01
  • Cleanup Workspace
    01:08
  • Helper Methods
    10:06
  • Statements and Comments
    12:02
  • Variables
    08:47
  • Assign Variable Value Later
    04:22
  • Variable Naming Rules
    06:04
  • const, let, var
    05:14
  • Quotation Marks
    05:51
  • String Concatenation
    05:25
  • Numbers Basics
    08:21
  • Numbers - Additional Features
    08:24
  • Implicit Type Conversion
    12:00
  • Data Types
    08:13
  • Arrays
    11:14
  • Functions - Declare, Invoke
    06:26
  • Functions - Parameters, Arguments
    12:56
  • Functions - Return
    13:21
  • Function Expressions
    07:43
  • Objects
    08:23
  • Conditional Statements - Basics
    05:57
  • Conditional Statements Continued
    07:02
  • Equality
    04:24
  • Logical Operators
    04:24
  • Switch Statement
    07:27
  • while Loops
    05:55
  • do while loops
    02:57
  • for loop
    04:03

  • Connecting The Dots
    00:24
  • String Properties and Methods
    16:34
  • Template Literals
    06:10
  • Array Properties and Methods
    11:50
  • Exercise - Full Name
    10:13
  • Exercise - Calculate Total
    14:40
  • Value vs Reference
    05:51
  • Null and Undefined
    02:15
  • Truthy and Falsy
    04:34
  • Ternary Operator
    04:16
  • Global Scope
    07:25
  • Local Scope
    07:02
  • Variable Lookup
    06:52
  • Callback Functions, Higher Order Functions
    15:07
  • Array Iterators
    02:22
  • forEach
    09:44
  • map
    10:43
  • filter
    03:55
  • find
    08:30
  • reduce
    09:48
  • Math Object
    08:33
  • Date Object
    09:18

  • Preview02:39
  • DOM - General Concepts
    08:40
  • Window and Document Overview
    04:15
  • Get Element By ID
    06:51
  • Get Elements By Tag Name
    08:31
  • Get Element By Class Name
    02:33
  • Query Selector and Query Selector ALL
    06:45
  • Navigate the DOM - Children
    04:54
  • Navigate the DOM - parentElement
    03:06
  • Navigate the DOM - nextSibling, previousSibling
    04:28
  • Navigate the DOM - nextElementSibling, previousElementSibling
    01:15
  • textContent nodeValue
    02:57
  • getAttribute() setAttribute()
    08:09
  • classList and className
    09:28
  • createElement - createTextNode - appendChild
    08:09
  • insertBefore
    03:43
  • replaceChild
    02:23
  • prepend innerText
    03:10
  • remove removeChild
    04:52
  • innerHTML and textContent
    08:24
  • Change CSS with style property
    05:07
  • Events Overview
    01:53
  • Click Event
    07:23
  • Function Reference
    04:51
  • Mouse Events
    05:17
  • Key Events
    04:13
  • Event Object
    10:48
  • CurrentTarget vs Target
    07:33
  • Event Propogation - Bubbling- Capturing
    10:39
  • Event Propogation Example
    07:31
  • Forms
    05:48
  • Local Storage
    09:22
  • Local Storage With Multiple Values
    09:05

  • Intro
    01:17
  • Preview00:06
  • Setup
    04:11
  • Preview04:10
  • Color Flipper - Simple Javascript
    08:58
  • Color Flipper - Hex
    10:16
  • Preview02:25
  • Counter JS
    11:14
  • Preview04:45
  • Reviews JS
    22:40
  • Preview02:48
  • Navbar General Concepts
    04:08
  • Navbar JS
    07:56
  • Preview03:44
  • Sidebar Manual Setup
    03:07
  • Sidebar JS
    05:51
  • Preview03:39
  • Modal Challange
    02:42
  • Modal JS
    03:02
  • Preview07:14
  • Questions General Concept
    02:54
  • Questions JS - Traversing the DOM
    07:32
  • Questions JS - Using Selectors Inside the Element
    10:19
  • Preview06:56
  • Display Items When Page Loads
    14:39
  • Refactor
    03:12
  • Filter Buttons HTML
    01:57
  • Filter Buttons JS
    11:42
  • Dynamic Filter Buttons
    04:01
  • Unique Categories
    07:29
  • Dynamic Filter Buttons Complete
    09:40
  • Preview01:12
  • Video HTML
    02:44
  • Video Overlay Setup
    02:42
  • Video JS
    04:59
  • Video Preloader
    04:51
  • Preview03:31
  • Scroll HTML
    10:37
  • Scroll - Setup Date
    02:11
  • Scroll - Toggle Simple Setup
    06:16
  • Scroll - Toggle Dynamic
    10:44
  • Scroll - Fixed Navbar
    08:50
  • Smooth Scroll Setup
    10:23
  • Smooth Scroll Complete
    10:53
  • Preview11:42
  • Tabs JS
    10:56
  • Preview05:53
  • Set Date
    19:51
  • Calculate Remaining Time
    27:47
  • Time From Now
    04:10
  • Preview04:26
  • Lorem Ipsum JS
    17:20
  • Preview03:22
  • GroceryBud - HTML
    05:09
  • GroceryBud - Select Elements
    03:13
  • GroceryBud - addItem Setup
    07:26
  • GroceryBud - truthy shortcut
    03:32
  • GroceryBud - display alert
    05:29
  • GroceryBud - addItem
    08:49
  • GroceryBud - setBackToDefault
    02:34
  • GroceryBud - clear items
    06:54
  • GroceryBud - select edit and delete buttons
    07:23
  • GroceryBud - delete item
    07:18
  • GroceryBud - edit item
    11:16
  • GroceryBud - localStorage info
    04:25
  • GroceryBud - addToLocalStorage
    08:38
  • GroceryBud - removeFromLocalStorage
    05:39
  • GroceryBud - editLocalStorage
    04:46
  • GroceryBud - load items from localStorage
    06:49
  • Preview01:29
  • Slider HTML
    03:34
  • Slider General Concepts
    05:14
  • Slider JS Setup
    03:27
  • Slider JS - Slides Approach
    06:06
  • Slider JS - Button Approach
    02:48

  • Intro
    00:53
  • Object Basics
    06:13
  • Nested Objects, Bracket Notation
    11:59
  • 'this' - Keyword Basics
    08:20
  • "this" - Keyword Advanced
    07:10
  • Factory Functions
    06:42
  • Constructor Functions
    07:48
  • Constructor Property
    04:51
  • Prototype Property
    09:58
  • Property Lookup
    05:45
  • ES6 Class Syntax
    12:14
  • Call
    09:42
  • Apply, Arguements
    05:42
  • Bind
    02:15
  • Button Example
    08:48

  • Preview01:20
  • Starter
    00:11
  • Counter - HTML
    03:10
  • Counter Setup
    07:56
  • Counter - Select Elements
    05:13
  • Counter - Functions
    04:05
  • Counter - Complete
    05:43
  • Counter - Class Refactor
    03:43
  • Gallery Intro
    01:08
  • Gallery - HTML
    09:24
  • Gallery - Select Elements
    06:37
  • Gallery - Open Modal Setup
    12:10
  • Gallery - Open Modal Complete
    12:06
  • Gallery - Close Modal
    06:31
  • Gallery - Prev and Next
    05:22
  • Gallery - Select Images
    05:30
  • Gallery - Class Refactor
    00:39

  • Intro
    00:18
  • IFFE
    08:59
  • Hoisting
    06:26
  • Closure
    08:28
  • Closure - Basic Example
    03:53
  • Closure - Complete Example
    08:52

  • ES6 Module Intro
    02:20
  • VAR, LET, CONST
    06:07
  • Function Scope and Block Scope
    10:18
  • Template Strings
    03:43
  • Template Strings - HTML
    05:25
  • Tagged Template Literals
    11:08
  • Arrow Functions - Basics
    14:16
  • Arrow Functions - Objects and "this"
    06:55
  • Arrow Functions - Select Elements and "this"
    04:47
  • Default Parameters and Hoisting Gotchas
    03:50
  • Array Destructuring
    05:24
  • Swap Variables
    02:39
  • Object Destructuring
    05:03
  • Destructuring Function Parameters
    03:01
  • New String Methods
    07:32
  • For of - Loop
    03:59
  • Spread Operator - Basics
    05:26
  • Spread Operator - Objects
    03:01
  • Spread Operator - DOM Elements
    03:27
  • Spread Operator - Functions Arguments
    03:38
  • Rest Operator
    10:36
  • Array.of
    02:06
  • Array.from - Strings and Arguments Object
    04:34
  • Array.from - DOM Elements(NodeList)
    07:00
  • find, findIndex,every,some
    08:59

Requirements

  • Basic knowledge of HTML, CSS
  • Computer
  • Text Editor
  • Web Browser

Description

Three fundamental languages of the web are HTML, CSS and Javascript.

Html is used for structure, CSS is used for styling and Javascript is used for functionality.

 Reasons to learn Javascript

Number One - Javascript is the most popular programming language in the world.

Number Two - Javascript is de facto language of the web

Number Three - Javascript is Easy to learn

Number Four - Knowing Javascript provides great opportunity to get a job

Number Five - Javascript is Everywhere.Javascript is not web-exclusive anymore. Its on the servers (NODE.JS), cross-platform desktop-apps etc...

This step by step course is intended for everyone who wants to start working with Javascript. 

We will cover what is Javascript, how to add Javascript to our projects, how to start working with Javascript and at the end we will make few simple projects. A basic knowledge of HTML, CSS would be preferred.

Who this course is for:

  • Anyone who wants to start working with Javascript

Featured review

David Ballock
David Ballock
32 courses
6 reviews
Rating: 5.0 out of 57 months ago
Fantastic Course! I've taken many different courses on Udemy and there is little doubt that John Smilga is my favourite instructor. John efficiently delivers the course material by starting with some theory which is then followed with a lot of practical examples. This method really reinforces important concepts and student understanding. John is the best

Instructor

John Smilga
Instructor
John Smilga
  • 4.7 Instructor Rating
  • 6,725 Reviews
  • 55,135 Students
  • 7 Courses

Hello, I am John Smilga and I am a web developer. I live and work in Los Angeles, CA. I spend most of my day, experimenting with HTML, CSS and Javascript (and it's endless list of frameworks). I enjoy coding and the challenge of learning something new everyday. You can also find me at youtube channel Coding Addict.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.