Javascript The Basics For Beginners

JavaScript for Beginners: Projects based learning, whiteboard animations, coding in the browser and quizzes.

Last updated 2022-01-10 | 4.6

- Learn basics of JavaScript
- Create Interactive Webpage and deploy to the web
- Build projects as you learn concepts to get a taste of building applications on a small scale

What you'll learn

Learn basics of JavaScript

Create Interactive Webpage and deploy to the web

Build projects as you learn concepts to get a taste of building applications on a small scale

Become interview ready with whiteboard algorithm challenges

Build a Portfolio Page with HTML & CSS

Visually understand the JavaScript Language

Look under the hood to understand how JavaScript works

* Requirements

* Google Chrome Browser
* No prior coding experience needed

Description

This isn't the only JavaScript course you should ever take...but it should be your first!

JavaScript the Basics is your one stop course to enter into the language of JavaScript. We are going to start from scratch and build up our understanding of the world's most popular programming language together.

View JavaScript in action with whiteboard videos optimized for viewing on your smartphone. This is truly a course that you can engage with no matter where you are. Take your JavaScript eduction on the go! With whiteboard videos you get to visualize what JavaScript does under the hood.

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

There will be lots of quizzes on the JavaScript syntax we have just covered. The goal of this course is to move slow and allow these concepts and syntax to sink in through repetition.

This course is also full of mini-projects that allow you to apply the JavaScript you are learning to actually building something that you can use. We focus on small to mid-sized projects aimed at the skill level of a beginner to intermediate JavaScript student.

Learning JavaScript is like learning a language. This course won't make a false promise of saying you will master JavaScript overnight. However, this course will immerse you into the world's most popular programming language.

JavaScript Syntax
JavaScript Building Blocks
- Build a Kelvin to Fahrenheit Converter
- Build a Cat Age estimator
JavaScript Best Practices
JavaScript Objects
JavaScript Arrays
- Build a Random Insult Generator
JavaScript Functions
- Build a Calorie Tracker
- Build a Rock, Paper, Scissors game
JavaScript Conditionals
- Build a Magic 8 Ball
JavaScript Regular Expressions
JavaScript Functional Programming
JavaScript Algorithms
JavaScript ES6 Syntax
Build a Portfolio Page with HTML & CSS
Practice for Real World JavaScript Whiteboard Interview Questions
Make an Interactive Webpage: TODO List with Local Storage
Make an Interactive Webpage: Matching Game
Make an Interactive Webpage: Magic 8 Ball

You'll finish this course with an understanding of JavaScript that will let you take a deeper dive into the language and possibly launch you into a new career as a JavaScript web developer.

Learning a new language can be difficult and even feel intimidating. JavaScript the Basics makes the the learning process feel accessible and welcoming!

There are a lot of JavaScript courses out there in which you can make some pretty great projects. But unless you know JavaScript you are just copying and pasting. This course won't offer you empty promises like moving from "zero to hero" but it will help you to take the first steps in the right direction.

This isn't the only JavaScript Course you should ever take. But it should be your first!

This course expands monthly! Get it now and check back often for updates!

Who this course is for:

Those who are JavaScript Newbies
Those with no previous coding experience
Those who want to learn on the go by watching whiteboard videos optimized for smartphones and tablets
Those who want a thorough step by step introduction to the JavaScript language
Those coders who want a visual and hands on playground environment to reinforce what they have learned
Those who want to learn how to build their first JavaScript Application
Those who want to learn how to build a portfolio page with HTML & CSS

Course content

29 sections • 396 lectures

Course Overview 1 lectures

Course Overview Preview 02:25

JavaScript Building Blocks 15 lectures

Variables Preview 04:53

Navigating to new lines in the Chrome Console Preview 00:22

Variables Lab Preview 04:20

Variables Quiz

Variables Cheat Sheet Preview 01:31

Strings Preview 05:40

Strings Quiz

Strings Lab Preview 05:45

Strings Cheat Sheet Preview 01:06

Operators Preview 07:48

Operators Quiz

Operators Lab Preview 07:06

Increment & Decrement Operators Preview 04:51

Increment and Decrement Operators Quiz

Operators Cheat Sheet Preview 00:54

JavaScript Building Blocks: Mini Apps 4 lectures

Mini Project: Kelvin to Fahrenheit Preview 02:39

Mini Project: Kelvin to Fahrenheit - Video Review Preview 09:51

Mini Project: Cat Years Preview 02:51

Mini Project: Cat Years - Video Walkthrough Preview 08:22

JavaScript Objects 10 lectures

Objects Preview 04:43

Objects Quiz

Objects Lab Preview 03:54

Objects Cheat Sheet Preview 00:56

Objects - Dot & Bracket Notation Preview 05:12

Object Dot and Bracket Notation Quiz

Objects Dot & Bracket Notation Lab Preview 04:40

Object Constructor Functions Preview 06:26

Object Constructor Functions lab Preview 06:03

The Secret Life of JavaScript Primitives Preview 07:23

JavaScript Arrays 9 lectures

Arrays Preview 04:27

Arrays lab Preview 04:15

Arrays Quiz

Array Methods Part 1 Preview 05:18

Array Methods Part 1 lab Preview 04:19

Array Methods Quiz

Array Methods Part 2 Preview 05:23

Array Methods Par 2 lab Preview 06:54

Arrays Review Preview 12:39

JavaScript Arrays: Mini App 2 lectures

Mini Project: Random Insult Generator Preview 01:20

Mini Project: Random Insult Generator - Video Review Preview 09:22

JavaScript Functions 6 lectures

Functions Preview 04:26

Functions lab Preview 03:46

Functions Deep Dive - Expressions, Anonymous functions & IIFEs Preview 05:29

Functions Deep Dive lab Preview 05:03

Function Scope Preview 05:15

Function Scope lab Preview 07:02

JavaScript Functions: Mini Apps 6 lectures

Mini App: Bear, Human, Gun Game Preview 04:24

Mini App: Bear, Human, Gun Game - Video Walkthrough Preview 18:25

Bear, Human, Gun Step by Step Walkthrough Preview 10:12

Mini App: Calorie Calculator Preview 03:32

Mini App: Calorie Calculator - Video Walkthrough Preview 21:28

Calorie Calculator Step by Step Walkthrough Preview 07:50

JavaScript Loops & Conditionals 6 lectures

Loops - Conditional Statements & Operators Preview 07:54

Loops Part 1 lab Preview 07:13

Switch Statements Preview 03:51

Switch Statements Lab Preview 07:36

Loops Part 2 - For Loops, While Loops & Do/While Preview 07:37

Loops Part 2 lab Preview 07:11

JavaScript Loops & Conditionals: Mini App 2 lectures

Magic Eight Ball Preview 02:45

Magic Eight Ball - Video Walkthrough Preview 09:12

JavaScript Regular Expressions 2 lectures

Regular Expressions Intro Preview 08:48

Regular Expressions Resource Preview 00:17

Context: This, Bind, Call & Apply 4 lectures

This & Bind Preview 05:04

This & Bind Lab Preview 05:59

This & Call Preview 05:57

This & Call Lab Preview 05:19

Functional Programming Primer 8 lectures

Functional Programming Part 1 - Intro and Filter Preview 09:03

Functional Programming Part 1 lab Preview 08:29

Functional Programming Part 2 - Map Preview 07:26

Functional Programming Part 2 - Map Preview 09:03

Functional Programming Part 2 lab Preview 07:09

Functional Programming Part 3 - Reduce Preview 07:37

Functional Programming Part 3 lab Preview 08:17

Array Methods - Further Reading Preview 00:10

JavaScript Algorithms 6 lectures

Identify Unique String Preview 09:36

Identify Longest Word in a String Preview 08:22

Permutation of Two Strings Preview 09:34

Sum of Range Preview 06:45

Remove Elements From Head Preview 07:57

Palindrome Preview 08:51

ES6 11 lectures

Let Statements Preview 05:29

Let Statements Lab Preview 07:57

Const Declaration Preview 03:08

Template Literals Preview 06:09

Template Literals Lab Preview 06:32

Arrow Functions Preview 05:25

Arrow Functions Lab Preview 06:13

Spread Operator Preview 06:15

Spread Operator Lab Preview 06:28

forEach Method Preview 04:37

forEach Method Lab Preview 11:55

JavaScript Whiteboard Algorithm Challenges 36 lectures

Environment Setup Preview 00:22

Name Swap - Built in Functions Preview 08:44

Name Swap - Built in Functions - Final Code Preview 00:24

Name Swap - Indices Preview 04:40

Name Swap - Indices - Final Code Preview 00:19

Remove Odd Number from Array with Modulus Operator and For Loops Preview 08:45

Remove Odd Number from Array with Modulus Operator and For Loops - Final Code Preview 00:35

Remove Odd Numbers from Array with Filter Method Preview 05:28

Remove Odd Numbers from Array with Filter Method - Final Code Preview 00:29

Repeat a String with for loop Preview 08:00

Repeat a String with for loop - Final Code Preview 00:39

Repeat a String with while loop Preview 05:53

Repeat a String with while loop - Final Code Preview 00:39

Find the Longest String with replace method and regular expressions Preview 12:05

Find the Longest String - Final Code Preview 00:46

Find the Longest String with replace method and regular expressions with For Of Preview 08:27

Find the Longest String Part II - Final Code Preview 00:43

Alphabetize String with sort() method Preview 05:32

Alphabetize String - Final Code Preview 00:23

Alphabetize String with sort() method and spread syntax Preview 05:08

Alphabetize String Part II - Final Code Preview 00:23

Watch and Code - Section Preview 00:23

Reverse a String Preview 11:57

Filter Strings in an Array Preview 12:00

Go to https://codepen.io/robgmerrill/pen/LzmZOG for the lesson

Find Largest Number in an Array - Codepen Preview 00:01

Find Largest Number in an Array Preview 13:36

Reverse a String with built in functions Preview 03:28

Reverse a String with built in functions - Final Code Preview 00:28

Reverse a String with spread syntax Preview 01:43

Reverse a String with spread syntax - Final Code Preview 00:16

Reverse a String with for loop Preview 05:31

Reverse a String with for loop - Final Code Preview 00:29

Reverse a String with for of loop Preview 06:02

Repeat a String with for of loop - Final Code Preview 00:32

Is Palindrome? Preview 11:57

Palindrome - Final Code Preview 00:49

JavaScript and the DOM 3 lectures

Introduction to the DOM Preview 07:51

DOM tree nodes Preview 06:07

More About Nodes Preview 06:51

Project: Todo App with Local Storage - Beta Release 18 lectures

Release Schedule for Todo List App Preview 00:13

Todo List Project Overview Preview 04:42

Lesson Two - document.querySelector() and document.getElementById() methods Preview 08:37

Learn how to use the document.getElementById() and document.querySelector() methods.

Lesson Two - Quiz

Lesson 3 - Changing the DOM with document.textContent property Preview 06:11

Lesson Three Quiz

Lesson 4 - More DOM methods and properties Preview 10:07

Lesson 4 - Quiz

Lesson 5 - User interaction and event listeners Preview 04:10

Lesson 6 - Working with Forms Preview 06:25

Setting Up Dev Environment Preview 02:18

Todo App without Local Storage Preview 13:41

Lesson 8 - Local Storage Preview 06:10

Todo App with Local Storage Preview 13:38

lesson 10 - CSS Preview 03:09

lesson 11 - Hosting Preview 02:17

lesson 12 - Sharing Your Code Preview 02:23

Release Schedule for Todo List App Preview 00:05

This section of the course is being release during the month of June of 2018. Updates will be daily until the course is complete!

Project - Matching Game - Beta Release 10 lectures

Matching Intro Preview 06:14

Matching Part 1 Preview 09:41

Matching Part 2 Preview 02:27

Matching Part 3 Preview 02:07

Matching Part 4 Preview 04:19

Matching Part 5 Preview 02:33

Matching Part 6 Preview 08:15

Matching Part 7 Preview 03:35

Matching Part 8 Preview 02:18

Matching Part 9 Preview 05:13

Quote Machine 5 lectures

Quote Machine HTML & CSS Preview 01:45

Quote Machine HTML & CSS - Video Walkthrough Preview 13:30

Quote Machine - JavaScript Preview 07:28

Quote Machine - JavaScript - Video Walkthrough Preview 16:20

Deploy to Netlify Preview 01:37

Dog Therapy 9 lectures

Project Prerequisites Preview 00:31

Dog Therapy Preview Preview 01:01

Dog Therapy Preview - Video Walkthrough Preview 01:36

JSON Data and AJAX Requests Preview 01:38

JSON Data and AJAX Requests - Video Walkthrough Preview 03:02

How to Make an AJAX Request with the fetch() Method Preview 01:55

How to Make an AJAX Request with the fetch() method - Video Walkthrough Preview 05:54

Build and Style our Page with HTML & CSS Preview 01:36

Dog Therapy - JavaScript Preview 04:05

Appendix 1: Build a Website with HTML & CSS 1 lectures

Front End Website Overview Preview 01:50

Front End Developer HTML 10 lectures

Text Editor Preview 02:35

HTML Intro Preview 06:14

HTML Elements and Tags Preview 06:56

HTML Comments and Structure Preview 07:06

HTML Header Preview 06:01

HTML Hero Preview 04:28

HTML Services Preview 08:42

HTML About Preview 03:45

HTML Testimonials Preview 06:40

HTML Footer Preview 04:09

Front End Developer CSS 8 lectures

CSS Intro Preview 05:32

Full Course Code Preview 00:09

CSS Header Preview 09:34

CSS Footer Preview 02:46

CSS Hero Preview 05:14

CSS Services Preview 02:47

CSS About & Testimonials Preview 03:03

CSS - Internal Navigation Preview 04:04

Front End Cookbook 15 lectures

CSS Animations Preview 06:32

CSS Animations - Video Walkthrough Preview 15:40

CSS Animations Challenge Preview 02:07

CSS Animations Challenge Video Walkthrough Preview 15:02

CSS Transitions Preview 04:41

CSS Transitions - Video Walkthrough Preview 09:22

CSS Transitions Challenge: transition-function-timing Preview 02:37

CSS Transitions Challenge - Video Walkthrough Preview 09:27

Debugging Preview 07:02

Debugging - Video Walkthrough - Part 1 Preview 06:06

Debugging - Video Walkthrough - Part 2 Preview 05:02

Debugging - Video Walkthrough - Part 3 Preview 04:49

Keeping Time with Moment.js Preview 03:43

Keeping Time with Moment.js - Video Walkthrough - Basics Preview 08:32

Keeping Time with Moment.js - Video Walkthrough - Christmas Countdown Preview 11:46

Svelt - Build Apps with Svelt.js 4 lectures

New Instructor - John Smilga Preview 00:25

Hi everyone! We are entering into a new part of the course where we learn one of the hottest up and coming frameworks, Svelt.

I started learning this framework a number of months ago and immediately wanted to share this with others. However, I didn't want to teach a framework that I was still learning so I reached out to a great teacher who I have personally learned from, John Smilga, to teach the course.

We have different approaches but I have found that he teaches with great clarity and simplicity. I absolutely loved this content and hope that you will too!

Svelt Info Preview 01:21

Section Requirements Preview 03:34

Text Editor Setup Preview 01:59

Svelte Project - Budget Calculator 48 lectures

Intro Preview 02:46

Starter Application Preview 04:40

Folder Structure Preview 08:51

Setup Files Preview 00:05

Add Global CSS & Font Awesome Preview 03:02

Component Overview Preview 04:45

Navbar Component Intro Preview 05:43

Navbar Component Preview 07:17

Title Component Preview 03:32

Props Basics Preview 09:43

CSS Preview 09:32

Each Block Preview 09:48

Expenses Data Preview 04:04

Expenses Component Preview 11:49

Else and Passing Props Preview 12:56

Expense Component Preview 04:24

If Block Preview 03:51

Events Preview 09:46

Component Communication Preview 06:55

Props Drilling Preview 09:14

SetContext and GetContext Preview 10:02

createEventDispatcher Preview 09:52

Clear Expenses Button Preview 04:53

Reactivity Preview 15:07

Form Setup Preview 07:57

Two Way Binding Preview 07:43

Empty Values Functionality Preview 12:18

Form Submission Preview 05:18

Add New Expense Preview 06:28

setModifiedExpense Preview 11:04

Pass Edit Values into Form Preview 13:01

editExpense Preview 06:16

Toggle Form Preview 07:33

Lifecycle Functions Preview 05:50

Setup Local Storage API Preview 10:05

afterUpdate Preview 06:39

slot basics Preview 10:30

Complete Modal Preview 04:32

Transition Basics Preview 08:36

Transition Parameters Preview 03:35

Transition - in: and out: Preview 01:55

Modal Transitions Preview 02:28

Simple Expense Transition Preview 06:44

Key Expression in Each Block and Animate Preview 09:26

HTTP Request using onMount Preview 14:57

HTTP Request using #Await Blocks Preview 06:50

Deploy on Netlify - Drag and Drop Preview 03:44

Deploy on Netlify - Continuous Deployment Preview 05:38

Svelte Project - Ecommerce App - Razor 92 lectures

Instructor Introduction Preview 00:11

Project Demonstration Preview 00:14

Intro Preview 13:19

Setup Files Preview 00:06

Bootstrap Svelte Application Preview 03:22

Folder Structure and Resources Preview 05:22

Setup Project Pages Preview 07:27

Svelte Router Setup Preview 09:06

Url Parameters Preview 04:52

Hero Component Preview 10:29

Local Data Structure Preview 03:59

Svelte Store Benefits/Basics Preview 05:32

Products Store Setup Preview 11:23

Flatten Products Preview 05:11

Store Unsubscribe Preview 02:45

Store Unsubscribe Shorthand Preview 02:20

Products Component Complete Preview 05:36

Single Product Complete Preview 07:45

Loading Component Preview 04:46

Derived Stores Preview 07:15

Single Product Page Preview 11:41

svelte:head element Preview 03:18

Small Navbar Preview 09:35

Cart Button Preview 03:27

Big Navbar Preview 05:00

Links Preview 04:36

Toggle Navbars Preview 05:32

Basic Sidebar Preview 07:01

Global Store Basics Preview 08:17

Global Store Method Preview 04:47

Setup Close Sidebar Function Preview 05:46

Sidebar Transitions Preview 01:45

Cart Basics Preview 06:18

Cart Structure Preview 11:36

Cart Store Initial Setup Preview 07:10

Cart Items Preview 08:16

Single Cart Item Preview 06:50

Cart List Transitions Preview 02:49

Cart Total Preview 05:32

Remove Item Preview 07:43

Increase Amount Preview 08:45

Increase amount video

Decrease Amount Preview 04:56

Decrease Amount Refactor - OPTIONAL Preview 01:14

Add To Cart Preview 09:05

LocalStorage Setup Preview 06:32

User Store Setup Preview 04:20

Login/Logout Links Preview 09:47

Checklist Preview 05:13

Strapi Info Preview 01:39

Bootstrap Strapi App Preview 04:17

Products Content Type Preview 03:15

Add Products Preview 04:16

API Access Preview 03:59

getProducts Preview 05:30

Products Store Preview 04:27

Image Problem Fix Preview 04:21

Login Page - Variables Preview 04:49

Login Page - HTML Preview 13:23

Login Page - Basic Functionality Preview 08:32

Login - General Overview Preview 06:13

registerUser Function Preview 11:17

loginUser Function Preview 06:10

User Store Update Preview 06:30

setupUser Function Preview 10:56

navigate Preview 05:06

Alert Basics Preview 07:20

Configure Alert Preview 10:54

Alert with Form Sumbissions Preview 04:53

Close Alert Programmatically Preview 02:15

Double Check Login Functionality Preview 02:41

Checkout Page Overview Preview 00:55

Checkout Page Basics Preview 02:19

Restrict Access Preview 02:48

Empty Cart Preview 02:43

Checkout Form - Basic Setup Preview 06:50

Setup Stripe Account Preview 04:21

Stripe Elements - HTML Preview 07:37

Stripe Elements - Javascript Preview 08:52

Stripe Token Preview 05:08

Empty Cart Error Preview 01:43

Submit Order Function Preview 03:53

Complete Submit Order Preview 12:39

Complete App Preview 13:07

Free Claudinary Account Preview 07:40

Connect Claudinary with Strapi Preview 07:05

Free Heroku Account Preview 01:49

Install Heroku CLI Preview 02:31

Deploy Strapi on Heroku Preview 13:22

Setup Backend Preview 05:46

Deploy Svelte APP on Netlify Preview 02:20

FREE BONUS: Front End Framework - React 45 lectures

Getting Started From Scratch with React Preview 12:10

React Code Preview 00:02

Challenge - Using JSX Preview 08:49

Code Refactor Preview 03:01

Rendering One Element Preview 03:54

Rendering Multiple Elements Preview 04:20

Babel and React Preview 07:07

Creating Functional Stateless Components Preview 07:05

Stateless Functional Components Practice Preview 04:17

Creating Class Components Preview 06:17

Creating Class Components Practice Preview 03:27

Styling Stateless Functional Components Preview 08:04

Styling within Components Preview 09:29

Styling Class Components Preview 08:37

Building Your First Complex Component Preview 06:11

Setting Up a Project Preview 06:11

Building Our Components Preview 03:50

Styling Our Components Part I Preview 06:39

Styling Our Components Part II Preview 05:30

Props Part I - Stateless Functional Components Preview 07:10

Props Part II - Class Components Preview 05:51

Props Part III - Color Spectrum Refactor Preview 07:48

CodePen Challenges Preview 00:05

CodePen Challenge I Preview 03:36

Challenge 2 Preview 02:30

Challenge 3 Preview 05:25

Challenge 4 Preview 03:17

Challenge 5 Preview 03:33

Capstone Project - Image Links Preview 00:12

The following lecture uses live links that may or may not change in the future. While working on the project if you use a link and it appears broken you can just replace it with another link of your choice and the code will work just fine :)