Mô tả

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!


Bạn sẽ học được gì

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

Yêu cầu

  • Google Chrome Browser
  • No prior coding experience needed

Nội dung khoá học

30 sections

Course Overview

1 lectures
Course Overview
02:25

JavaScript Building Blocks

15 lectures
Variables
04:53
Navigating to new lines in the Chrome Console
00:22
Variables Lab
04:20
Variables Quiz
12 questions
Variables Cheat Sheet
01:31
Strings
05:40
Strings Quiz
9 questions
Strings Lab
05:45
Strings Cheat Sheet
01:06
Operators
07:48
Operators Quiz
13 questions
Operators Lab
07:06
Increment & Decrement Operators
04:51
Increment and Decrement Operators Quiz
7 questions
Operators Cheat Sheet
00:54

JavaScript Building Blocks: Mini Apps

4 lectures
Mini Project: Kelvin to Fahrenheit
02:39
Mini Project: Kelvin to Fahrenheit - Video Review
09:51
Mini Project: Cat Years
02:51
Mini Project: Cat Years - Video Walkthrough
08:22

JavaScript Objects

10 lectures
Objects
04:43
Objects Quiz
10 questions
Objects Lab
03:54
Objects Cheat Sheet
00:56
Objects - Dot & Bracket Notation
05:12
Object Dot and Bracket Notation Quiz
2 questions
Objects Dot & Bracket Notation Lab
04:40
Object Constructor Functions
06:26
Object Constructor Functions lab
06:03
The Secret Life of JavaScript Primitives
07:23

JavaScript Arrays

9 lectures
Arrays
04:27
Arrays lab
04:15
Arrays Quiz
5 questions
Array Methods Part 1
05:18
Array Methods Part 1 lab
04:19
Array Methods Quiz
8 questions
Array Methods Part 2
05:23
Array Methods Par 2 lab
06:54
Arrays Review
12:39

JavaScript Arrays: Mini App

2 lectures
Mini Project: Random Insult Generator
01:20
Mini Project: Random Insult Generator - Video Review
09:22

JavaScript Functions

6 lectures
Functions
04:26
Functions lab
03:46
Functions Deep Dive - Expressions, Anonymous functions & IIFEs
05:29
Functions Deep Dive lab
05:03
Function Scope
05:15
Function Scope lab
07:02

JavaScript Functions: Mini Apps

6 lectures
Mini App: Bear, Human, Gun Game
04:24
Mini App: Bear, Human, Gun Game - Video Walkthrough
18:25
Bear, Human, Gun Step by Step Walkthrough
10:12
Mini App: Calorie Calculator
03:32
Mini App: Calorie Calculator - Video Walkthrough
21:28
Calorie Calculator Step by Step Walkthrough
07:50

JavaScript Loops & Conditionals

6 lectures
Loops - Conditional Statements & Operators
07:54
Loops Part 1 lab
07:13
Switch Statements
03:51
Switch Statements Lab
07:36
Loops Part 2 - For Loops, While Loops & Do/While
07:37
Loops Part 2 lab
07:11

JavaScript Loops & Conditionals: Mini App

2 lectures
Magic Eight Ball
02:45
Magic Eight Ball - Video Walkthrough
09:12

JavaScript Regular Expressions

2 lectures
Regular Expressions Intro
08:48
Regular Expressions Resource
00:17

Context: This, Bind, Call & Apply

4 lectures
This & Bind
05:04
This & Bind Lab
05:59
This & Call
05:57
This & Call Lab
05:19

Functional Programming Primer

8 lectures
Functional Programming Part 1 - Intro and Filter
09:03
Functional Programming Part 1 lab
08:29
Functional Programming Part 2 - Map
07:26
Functional Programming Part 2 - Map
09:03
Functional Programming Part 2 lab
07:09
Functional Programming Part 3 - Reduce
07:37
Functional Programming Part 3 lab
08:17
Array Methods - Further Reading
00:10

JavaScript Algorithms

6 lectures
Identify Unique String
09:36
Identify Longest Word in a String
08:22
Permutation of Two Strings
09:34
Sum of Range
06:45
Remove Elements From Head
07:57
Palindrome
08:51

ES6

11 lectures
Let Statements
05:29
Let Statements Lab
07:57
Const Declaration
03:08
Template Literals
06:09
Template Literals Lab
06:32
Arrow Functions
05:25
Arrow Functions Lab
06:13
Spread Operator
06:15
Spread Operator Lab
06:28
forEach Method
04:37
forEach Method Lab
11:55

JavaScript Whiteboard Algorithm Challenges

36 lectures
Environment Setup
00:22
Name Swap - Built in Functions
08:44
Name Swap - Built in Functions - Final Code
00:24
Name Swap - Indices
04:40
Name Swap - Indices - Final Code
00:19
Remove Odd Number from Array with Modulus Operator and For Loops
08:45
Remove Odd Number from Array with Modulus Operator and For Loops - Final Code
00:35
Remove Odd Numbers from Array with Filter Method
05:28
Remove Odd Numbers from Array with Filter Method - Final Code
00:29
Repeat a String with for loop
08:00
Repeat a String with for loop - Final Code
00:39
Repeat a String with while loop
05:53
Repeat a String with while loop - Final Code
00:39
Find the Longest String with replace method and regular expressions
12:05
Find the Longest String - Final Code
00:46
Find the Longest String with replace method and regular expressions with For Of
08:27
Find the Longest String Part II - Final Code
00:43
Alphabetize String with sort() method
05:32
Alphabetize String - Final Code
00:23
Alphabetize String with sort() method and spread syntax
05:08
Alphabetize String Part II - Final Code
00:23
Watch and Code - Section
00:23
Reverse a String
11:57
Filter Strings in an Array
12:00
Find Largest Number in an Array - Codepen
00:01
Find Largest Number in an Array
13:36
Reverse a String with built in functions
03:28
Reverse a String with built in functions - Final Code
00:28
Reverse a String with spread syntax
01:43
Reverse a String with spread syntax - Final Code
00:16
Reverse a String with for loop
05:31
Reverse a String with for loop - Final Code
00:29
Reverse a String with for of loop
06:02
Repeat a String with for of loop - Final Code
00:32
Is Palindrome?
11:57
Palindrome - Final Code
00:49

JavaScript and the DOM

3 lectures
Introduction to the DOM
07:51
DOM tree nodes
06:07
More About Nodes
06:51

Project: Todo App with Local Storage - Beta Release

18 lectures
Release Schedule for Todo List App
00:13
Todo List Project Overview
04:42
Lesson Two - document.querySelector() and document.getElementById() methods
08:37
Lesson Two - Quiz
5 questions
Lesson 3 - Changing the DOM with document.textContent property
06:11
Lesson Three Quiz
1 question
Lesson 4 - More DOM methods and properties
10:07
Lesson 4 - Quiz
3 questions
Lesson 5 - User interaction and event listeners
04:10
Lesson 6 - Working with Forms
06:25
Setting Up Dev Environment
02:18
Todo App without Local Storage
13:41
Lesson 8 - Local Storage
06:10
Todo App with Local Storage
13:38
lesson 10 - CSS
03:09
lesson 11 - Hosting
02:17
lesson 12 - Sharing Your Code
02:23
Release Schedule for Todo List App
00:05

Project - Matching Game - Beta Release

10 lectures
Matching Intro
06:14
Matching Part 1
09:41
Matching Part 2
02:27
Matching Part 3
02:07
Matching Part 4
04:19
Matching Part 5
02:33
Matching Part 6
08:15
Matching Part 7
03:35
Matching Part 8
02:18
Matching Part 9
05:13

Quote Machine

5 lectures
Quote Machine HTML & CSS
01:45
Quote Machine HTML & CSS - Video Walkthrough
13:30
Quote Machine - JavaScript
07:28
Quote Machine - JavaScript - Video Walkthrough
16:20
Deploy to Netlify
01:37

Dog Therapy

9 lectures
Project Prerequisites
00:31
Dog Therapy Preview
01:01
Dog Therapy Preview - Video Walkthrough
01:36
JSON Data and AJAX Requests
01:38
JSON Data and AJAX Requests - Video Walkthrough
03:02
How to Make an AJAX Request with the fetch() Method
01:55
How to Make an AJAX Request with the fetch() method - Video Walkthrough
05:54
Build and Style our Page with HTML & CSS
01:36
Dog Therapy - JavaScript
04:05

Appendix 1: Build a Website with HTML & CSS

1 lectures
Front End Website Overview
01:50

Front End Developer HTML

10 lectures
Text Editor
02:35
HTML Intro
06:14
HTML Elements and Tags
06:56
HTML Comments and Structure
07:06
HTML Header
06:01
HTML Hero
04:28
HTML Services
08:42
HTML About
03:45
HTML Testimonials
06:40
HTML Footer
04:09

Front End Developer CSS

8 lectures
CSS Intro
05:32
Full Course Code
00:09
CSS Header
09:34
CSS Footer
02:46
CSS Hero
05:14
CSS Services
02:47
CSS About & Testimonials
03:03
CSS - Internal Navigation
04:04

Front End Cookbook

15 lectures
CSS Animations
06:32
CSS Animations - Video Walkthrough
15:40
CSS Animations Challenge
02:07
CSS Animations Challenge Video Walkthrough
15:02
CSS Transitions
04:41
CSS Transitions - Video Walkthrough
09:22
CSS Transitions Challenge: transition-function-timing
02:37
CSS Transitions Challenge - Video Walkthrough
09:27
Debugging
07:02
Debugging - Video Walkthrough - Part 1
06:06
Debugging - Video Walkthrough - Part 2
05:02
Debugging - Video Walkthrough - Part 3
04:49
Keeping Time with Moment.js
03:43
Keeping Time with Moment.js - Video Walkthrough - Basics
08:32
Keeping Time with Moment.js - Video Walkthrough - Christmas Countdown
11:46

Svelt - Build Apps with Svelt.js

4 lectures
New Instructor - John Smilga
00:25
Svelt Info
01:21
Section Requirements
03:34
Text Editor Setup
01:59

Svelte Project - Budget Calculator

48 lectures
Intro
02:46
Starter Application
04:40
Folder Structure
08:51
Setup Files
00:05
Add Global CSS & Font Awesome
03:02
Component Overview
04:45
Navbar Component Intro
05:43
Navbar Component
07:17
Title Component
03:32
Props Basics
09:43
CSS
09:32
Each Block
09:48
Expenses Data
04:04
Expenses Component
11:49
Else and Passing Props
12:56
Expense Component
04:24
If Block
03:51
Events
09:46
Component Communication
06:55
Props Drilling
09:14
SetContext and GetContext
10:02
createEventDispatcher
09:52
Clear Expenses Button
04:53
Reactivity
15:07
Form Setup
07:57
Two Way Binding
07:43
Empty Values Functionality
12:18
Form Submission
05:18
Add New Expense
06:28
setModifiedExpense
11:04
Pass Edit Values into Form
13:01
editExpense
06:16
Toggle Form
07:33
Lifecycle Functions
05:50
Setup Local Storage API
10:05
afterUpdate
06:39
slot basics
10:30
Complete Modal
04:32
Transition Basics
08:36
Transition Parameters
03:35
Transition - in: and out:
01:55
Modal Transitions
02:28
Simple Expense Transition
06:44
Key Expression in Each Block and Animate
09:26
HTTP Request using onMount
14:57
HTTP Request using #Await Blocks
06:50
Deploy on Netlify - Drag and Drop
03:44
Deploy on Netlify - Continuous Deployment
05:38

Svelte Project - Ecommerce App - Razor

92 lectures
Instructor Introduction
00:11
Project Demonstration
00:14
Intro
13:19
Intro
13:19
Setup Files
00:06
Bootstrap Svelte Application
03:22
Folder Structure and Resources
05:22
Setup Project Pages
07:27
Svelte Router Setup
09:06
Url Parameters
04:52
Hero Component
10:29
Local Data Structure
03:59
Svelte Store Benefits/Basics
05:32
Products Store Setup
11:23
Flatten Products
05:11
Store Unsubscribe
02:45
Store Unsubscribe Shorthand
02:20
Products Component Complete
05:36
Single Product Complete
07:45
Loading Component
04:46
Featured Products
06:43
Derived Stores
07:15
Single Product Page
11:41
svelte:head element
03:18
Small Navbar
09:35
Cart Button
03:27
Big Navbar
05:00
Links
04:36
Toggle Navbars
05:32
Basic Sidebar
07:01
Global Store Basics
08:17
Global Store Method
04:47
Setup Close Sidebar Function
05:46
Sidebar Transitions
01:45
Cart Basics
06:18
Cart Structure
11:36
Cart Store Initial Setup
07:10
Cart Items
08:16
Single Cart Item
06:50
Cart List Transitions
02:49
Cart Total
05:32
Remove Item
07:43
Increase Amount
08:45
Decrease Amount
04:56
Decrease Amount Refactor - OPTIONAL
01:14
Add To Cart
09:05
LocalStorage Setup
06:32
User Store Setup
04:20
Login/Logout Links
09:47
Checklist
05:13
Strapi Info
01:39
Bootstrap Strapi App
04:17
Products Content Type
03:15
Add Products
04:16
API Access
03:59
getProducts
05:30
Products Store
04:27
Image Problem Fix
04:21
Login Page - Variables
04:49
Login Page - HTML
13:23
Login Page - Basic Functionality
08:32
Login - General Overview
06:13
registerUser Function
11:17
loginUser Function
06:10
User Store Update
06:30
setupUser Function
10:56
navigate
05:06
Alert Basics
07:20
Configure Alert
10:54
Alert with Form Sumbissions
04:53
Close Alert Programmatically
02:15
Double Check Login Functionality
02:41
Checkout Page Overview
00:55
Checkout Page Basics
02:19
Restrict Access
02:48
Empty Cart
02:43
Checkout Form - Basic Setup
06:50
Setup Stripe Account
04:21
Stripe Elements - HTML
07:37
Stripe Elements - Javascript
08:52
Stripe Token
05:08
Empty Cart Error
01:43
Submit Order Function
03:53
Complete Submit Order
12:39
Complete App
13:07
Free Claudinary Account
07:40
Connect Claudinary with Strapi
07:05
Free Heroku Account
01:49
Install Heroku CLI
02:31
Deploy Strapi on Heroku
13:22
Setup Backend
05:46
Deploy Svelte APP on Netlify
02:20

FREE BONUS: Front End Framework - React

45 lectures
Getting Started From Scratch with React
12:10
React Code
00:02
Challenge - Using JSX
08:49
Code Refactor
03:01
Rendering One Element
03:54
Rendering Multiple Elements
04:20
Babel and React
07:07
Creating Functional Stateless Components
07:05
Stateless Functional Components Practice
04:17
Creating Class Components
06:17
Creating Class Components Practice
03:27
Styling Stateless Functional Components
08:04
Styling within Components
09:29
Styling Class Components
08:37
Building Your First Complex Component
06:11
Setting Up a Project
06:11
Building Our Components
03:50
Styling Our Components Part I
06:39
Styling Our Components Part II
05:30
Props Part I - Stateless Functional Components
07:10
Props Part II - Class Components
05:51
Props Part III - Color Spectrum Refactor
07:48
CodePen Challenges
00:05
CodePen Challenge I
03:36
Challenge 2
02:30
Challenge 3
05:25
Challenge 4
03:17
Challenge 5
03:33
Capstone Project - Image Links
00:12
Props Project
10:05
Iterating Through Lists
10:11
Iterating Through Lists Refactor
01:59
Filter and Map method on an Array
04:20
Rendering Two Filtered and Transformed Lists to the DOM
07:15
CodePen Challenge I
04:33
CodePen Challenge II
04:20
Color Spectrum Refactor
06:55
FriendLy App Refactor with Map method
07:17
FriendLy - Filter and Map two Lists to the DOM
06:54
Useless Note Take - Introduction to React Events
10:14
React Events Part II
08:36
Guess My Age - Intro to State
13:36
Meal Voter
13:50
React Forms
10:52
Ajax Requests and the Fetch API
18:45

Functions

1 lectures
Whitespace - New
00:49

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.