JavaScript Full Course

(Premium Version with Certificate)

Enroll ~~$169~~ $39 Free Preview

Premium Highlights

Enhanced Learning Experience

An ad-free learning experience with progress tracking, easy-to-navigate content.
Certificate of Completion

Earn a Certificate of Completion from a course with 5 million+ views. Add a competitive edge to your resume.
Detailed Course Breakdown

Easily find and revisit specific skills with our detailed course breakdown and search featuindentindent
Support SuperSimpleDev

Your purchase supports SuperSimpleDev, helping us to continue producing high-quality educational videos and content.

Certificate

https://supersimple.dev/certificates/javascript

Course curriculum

1. Introduction
  FREE PREVIEW
2. Course Links
  FREE PREVIEW
1. 2.1 Intro to the Project
2. 2.2 Basics of Math and Syntax
3. 2.3 Practical Examples of Math
4. 2.4 Order of Operations and Brackets
5. 2.5 Example of Order of Operations
6. 2.6 Examples of Brackets
7. 2.7 Math with Floats
8. 2.8 How to Calculate Money
9. 2.9 How to Round Numbers
10. 2.10 Practical Example of Rounding
11. 2.11 Search for Code On Your Own
12. 2.12 Conclusion and Exercises
1. 3.1 String = Text
2. 3.2 Syntax for Strings
3. 3.3 Different Types of Values
4. 3.4 Strings and Order of Operations
5. 3.5 Calculating Money with Strings
6. 3.6 Recreate an Entire Line of Text
7. 3.7 Use Strings with Other Features
8. 3.8 Double-Quote Strings
9. 3.9 Escape Characters
10. 3.10 Template Strings and Interpolation
11. 3.11 Multi-Line Strings and Which String to Use
12. 3.12 Conclusion and Exercises
1. 4.1 Set Up Code Editor
2. 4.2 HTML Review
3. 4.3 HTML Syntax
4. 4.4 Multiple Spaces are Combined Into 1 Space
5. 4.5 CSS Review
6. 4.6 CSS Syntax
7. 4.7 HTML Attributes
8. 4.8 Syntax Rules for Attributes
9. 4.9 Class Attribute
10. 4.10 The HTML Structure
11. 4.11 title Element
12. 4.12 Live Server Setup
13. 4.13 VSCode Setup
14. 4.14 script Element = Add JavaScript to Website
15. 4.15 onclick Attribute
16. 4.16 Comments
17. 4.17 HTML CSS Comments
18. 4.18 console.log()
19. 4.19 Conclusion and Exercises
1. 5.1 Lesson Setup
2. 5.2 Variables
3. 5.3 Use Variables in a Calculation
4. 5.4 Save a Calulation in a Variable
5. 5.5 Save a String in a Variable
6. 5.6 Syntax Rules for Variables
7. 5.7 Semicolons ;
8. 5.8 Change the Value of a Variable (Re-assigning)
9. 5.9 Syntax for Re-assigning
10. 5.10 Re-assigning a Variable to Itself
11. 5.11 Cart Quantity Project Intro
12. 5.12 Cart Quantity Project Setup
13. 5.13 Create the HTML
14. 5.14 Show Quantity Button
15. 5.15 Increase Quantity Buttons
16. 5.16 Reset Cart Button
17. 5.17 Shortcuts for Re-assigning Variables
18. 5.18 Best Practices for Naming Variables
19. 5.19 const
20. 5.20 var
21. 5.21 typeof with Variables
22. 5.22 Conclusion and Exercises
1. 6.1 Lesson Setup
2. 6.2 Booleans
3. 6.3 Syntax Rules for Booleans
4. 6.4 Comparison Operators
5. 6.5 === Triple Equals
6. 6.6 Order of Operations for Comparison Operators
7. 6.7 If Statements
8. 6.8 Practical Example of If Statements
9. 6.9 Syntax Rules for If Statements
10. 6.10 If Statements and Variables
11. 6.11 Rock Paper Scissors Project Setup
12. 6.12 Create the HTML Elements
13. 6.13 Algorithm
14. 6.14 Math.random()
15. 6.15 Algorithm for Generating a Move
16. 6.16 Logical Operators
17. 6.17 Convert Random Number into Move
18. 6.18 OR and NOT Operators
19. 6.19 Save Computer Move in a Variable
20. 6.20 Scope
21. 6.21 How to Access a Variable Outside a Scope
22. 6.22 Scope and var
23. 6.23 Compare the Moves and Get the Result
24. 6.24 Display the Result in a Popup
25. 6.25 Recap of Algorithms
26. 6.26 Make the Paper Button Interactive
27. 6.27 Make the Scissors Button Interactive
28. 6.28 Truthy and Falsy Values
29. 6.29 Why Do We Use Truthy and Falsy Values
30. 6.30 NaN (Not a Number)
31. 6.31 undefined
32. 6.32 Ternary Operator
33. 6.33 Guard Operator
34. 6.34 Default Operator
35. 6.35 Conclusion and Exercises
1. 7.1 Lesson Setup
2. 7.2 Function Lets Us Reuse Code
3. 7.3 Syntax Rules for Functions
4. 7.4 Rock Paper Scissors Project Setup
5. 7.5 Create a Function for Picking Computer Move
6. 7.6 Functions Create a Scope
7. 7.7 Use Functions in the Project to Reuse Code
8. 7.8 Return Statement
9. 7.9 Syntax Rules for Return Statement
10. 7.10 Use Return Statement in Project
11. 7.11 Tracing the Code
12. 7.12 Global Variable vs Return
13. 7.13 Use Return Statement in the Rest of the Buttons
14. 7.14 Set Up Code to Learn Parameters
15. 7.15 Parameters
16. 7.16 Syntax Rule for Parameters
17. 7.17 Multiple Parameters
18. 7.18 Default Value of Parameters
19. 7.19 Use Parameters in the Project
20. 7.20 Reuse the Code for the Other Buttons
21. 7.21 Use Functions Inside a Function
22. 7.22 Conclusion and Exercises
1. 8.1 Lesson Setup
2. 8.2 Objects
3. 8.3 Get Values Out of an Object
4. 8.4 Change a Value in an Object
5. 8.5 Syntax Rules for Objects
6. 8.6 Add and Delete Properties of an Object
7. 8.7 Object is Another Type of Value
8. 8.8 Why We Use Objects
9. 8.9 Objects Project Setup
10. 8.10 Save the Score as an Object
11. 8.11 Update the Score When Playing the Game
12. 8.12 Display the Score
13. 8.13 Create the Reset Score Button
14. 8.14 More Details About Objects Setup
15. 8.15 Dot Notation and Bracket Notation
16. 8.16 We Can Save Any Type of Value in an Object
17. 8.17 Save a Function in an Object
18. 8.18 Method = Function Inside an Object
19. 8.19 JSON
20. 8.20 Built-in JSON Object
21. 8.21 Built-in localStorage Object
22. 8.22 Save a Value In localStorage
23. 8.23 Get a Value From localStorage
24. 8.24 Save the Score in localStorage
25. 8.25 Reset the Score and Set a Default Value
26. 8.26 Simplify the Code Using Truthy and Falsy Values
27. 8.27 Simplify the Code More Using Default Operator
28. 8.28 null
29. 8.29 Auto-Boxing
30. 8.30 Objects are References
31. 8.31 Interesting Behaviors of References
32. 8.32 We Can't Compare Objects Directly
33. 8.33 Destructuring Shortcut
34. 8.34 Destructuring Multiple Properties
35. 8.35 Shorthand Property
36. 8.36 Shorthand Method
37. 8.37 Conclusion and Exercises
1. 9.1 Lesson Setup
2. 9.2 Document Object Model (DOM)
3. 9.3 Syntax Rules for the DOM
4. 9.4 document.title
5. 9.5 document.body
6. 9.6 HTML Elements Inside JavaScript
7. 9.7 document.body.innerHTML
8. 9.8 document.querySelector()
9. 9.9 Get and Modify a Button Element
10. 9.10 Get Specific Button with Class Selector
11. 9.11 Save Button in Variable
12. 9.12 Project Intro and Setup
13. 9.13 Create HTML Elements for Subscribe Button
14. 9.14 Make Subscribe Button Interactive
15. 9.15 innerText Property
16. 9.16 Separate HTML and JavaScript Code
17. 9.17 Rock Paper Scissors Project Setup
18. 9.18 Display the Score on the Page
19. 9.19 Block Elements
20. 9.20 Update the Score on the Page
21. 9.21 Reset the Score on the Page
22. 9.22 Display Result and Moves on the Page
23. 9.23 Create the HTML for Shipping Calculator
24. 9.24 Get the Text in a Textbox (input Element)
25. 9.25 Display Shipping Cost on the Page
26. 9.26 Values From the DOM are Strings
27. 9.27 onkeydown = listen for keyboard events
28. 9.28 Calculate Shipping Cost on Press Enter
29. 9.29 Type Coercion More Examples
30. 9.30 window Object
31. 9.31 Conclusion and Exercises
1. 10.1 Lesson Setup
2. 10.2 Add CSS to Subscribe Button
3. 10.3 Style the Subscribe Button One by One
4. 10.4 classList = control the class attribute
5. 10.5 Style the Button Differently When Subscribed
6. 10.6 classList.remove()
7. 10.7 Style the Text on the Page
8. 10.8 margin = space on the outside of an element
9. 10.9 Style the Textbox
10. 10.10 Style the Calculate Button
11. 10.11 Set Up Rock Paper Scissors for Styling
12. 10.12 Style Rock Paper Scissors One by One
13. 10.13 -img- Load the Rock Image Onto the Page
14. 10.14 Style the Rock Image
15. 10.15 Filepaths
16. 10.16 Load Paper and Scissors Images Onto the Page
17. 10.17 Style the Buttons One by One
18. 10.18 Style the Result
19. 10.19 Style the Moves
20. 10.20 Generate the HTML for Result and Moves
21. 10.21 Separate JavaScript into a File with script Element
22. 10.22 Organize JavaScript Files Into a Folder Using FilePaths
23. 10.23 Organize CSS Into a Folder using link Element
24. 10.24 Conclusion and Exercises
1. 11.1 Lesson Setup
2. 11.2 Arrays
3. 11.3 Get and Change Values in an Array Using Square Brackets
4. 11.4 Syntax Rules for Arrays
5. 11.5 typeof Array
6. 11.6 .length = Number of Values in the Array
7. 11.7 .push() = Add a Value to the Array
8. 11.8 .splice() = Remove Values from an Array
9. 11.9 Todo List Project Intro
10. 11.10 Todo List Project Setup
11. 11.11 Create the HTML for Todo List
12. 11.12 Make Todo List Interactive
13. 11.13 Reset Text Box After Adding Todo
14. 11.14 While Loops
15. 11.15 Trace the While Loop
16. 11.16 Syntax Rules for While Loops
17. 11.17 For Loops
18. 11.18 While Loop vs For Loop
19. 11.19 Looping Through an Array
20. 11.20 Shortcuts for Looping Through an Array
21. 11.21 Accumulator Pattern
22. 11.22 Accumulator Pattern - Result is an Array
23. 11.23 Loop Through the Todo List
24. 11.24 Generate the HTML for the Todo List
25. 11.25 div Element
26. 11.26 Display the Todo List HTML on the Page
27. 11.27 Re-Generate the HTML After Adding a Todo
28. 11.28 Main Idea of JavaScript
29. 11.29 Exercises
30. 11.30 Generate a Delete Button for Each Todo
31. 11.31 Make the Delete Button Interactive
32. 11.32 input type="date" = Create a Date Selector
33. 11.33 Display Due Date on the Page
34. 11.34 Add Due Date when Creating a Todo
35. 11.35 Set Up CSS File for Todo List
36. 11.36 Create CSS Grid for the Todos
37. 11.37 Add Spacing to Todo List Grid
38. 11.38 Style the Inputs
39. 11.39 Style the Add and Delete Buttons
40. 11.40 Align Todo List Grid
41. 11.41 More Details About Arrays Setup
42. 11.42 Arrays are References
43. 11.43 Array Destructuring
44. 11.44 break and continue
45. 11.45 continue in a While Loop
46. 11.46 Loops With Functions
47. 11.47 Conclusion and Exercises
1. 12.1 Lesson Setup
2. 12.2 Review of Functions
3. 12.3 Functions are Values
4. 12.4 Anonymous Functions and Hoisting
5. 12.5 method = Function Saved in an Object
6. 12.6 Pass a Function into a Function
7. 12.7 setTimeout() = Run a function in the Future
8. 12.8 Asynchronous Code
9. 12.9 setInterval()
10. 12.10 Rock Paper Scissors Project Setup
11. 12.11 Create and Style the Auto Play Button
12. 12.12 Make the Auto Play Button Interactive
13. 12.13 clearInterval = Stop setInterval()
14. 12.14 Setup to Learn More Advanced Function Features
15. 12.15 forEach() = Better Way to Loop Through an Array
16. 12.16 Todo List Project Setup
17. 12.17 Use forEach() in the Todo List
18. 12.18 continue and break in forEach Loop
19. 12.19 Exercises
20. 12.20 Arrow Functions
21. 12.21 Arrow Function Shortcuts
22. 12.22 Practical Examples of Arrow Function
23. 12.23 Top-Level Function vs Arrow Function
24. 12.24 Use Arrow Functions in Todo List
25. 12.25 Arrow Functions in Objects
26. 12.26 addEventListener()
27. 12.27 addEventListener() vs onclick attribute
28. 12.28 addEventListener() in Rock Paper Scissors
29. 12.29 addEventListener() with keydown
30. 12.30 addEventListener() in Todo List Add Button
31. 12.31 document.querySelectorAll()
32. 12.32 addEventListener() Using a Loop
33. 12.33 Setup to Learn More Array Methods
34. 12.34 array.filter()
35. 12.35 array.map()
36. 12.36 Closures
37. 12.37 Conclusion and Exercises
1. 13.1 Final Project Intro
2. 13.2 Download the Starting Code
3. 13.3 Project Setup
4. 13.4 Intro to Git
5. 13.5 Install Git
6. 13.6 Set Up Git
7. 13.7 Save Changes Into Git
8. 13.8 View and Undo Changes in Git
9. 13.9 Start the Final Project
10. 13.10 Find the Code for Something on the Page
11. 13.11 Set Up JavaScript in the Final Project
12. 13.12 Save the Data
13. 13.13 Save the Data for the Rest of the Products
14. 13.14 Generate the HTML for 1 Product
15. 13.15 Insert the Product Details into the HTML
16. 13.16 Combine the HTML Together
17. 13.17 Put the Combined HTML on the Page
18. 13.18 Fix Currency Formatting
19. 13.19 Commit = Save Changes Into Git
20. 13.20 Benefits of Generating the HTML
21. 13.21 Generate the HTML for All the Products
22. 13.22 Git History
23. 13.23 Make Add to Cart Button Interactive
24. 13.24 Create a Cart Array in a Separate File
25. 13.25 Data Attributes
26. 13.26 Syntax Rules for Data Attributes
27. 13.27 .dataset = Get Data Out of Data Attribute
28. 13.28 Add Products to the Cart Array
29. 13.29 Increase Quantity if Product is Already in the Cart
30. 13.30 Save Product Id to the Cart Instead of Product Name
31. 13.31 Save Add to Cart Code Into Git
32. 13.32 Calculate the Cart Quantity
33. 13.33 Put Cart Quantity on the Page
34. 13.34 Conclusions and Exercises
1. 14.1 Naming Conflicts with -script- tags
2. 14.2 Create a Module
3. 14.3 type="module"
4. 14.4 export and import from a Module
5. 14.5 2 Things to Know About Modules
6. 14.6 Benefits of Modules
7. 14.7 Save Modules Changes Into Git
8. 14.8 Make products.js a Module
9. 14.9 Entry Point
10. 14.10 Separate Cart Code into Functions
11. 14.11 Rename to cartItems
12. 14.12 Move addToCart() Function into cart.js
13. 14.13 Links ("a" Element)
14. 14.14 Add JavaScript to Checkout Page
15. 14.15 Save the Data for the Checkout Page
16. 14.16 Normalizing the Data
17. 14.17 Generate the HTML for the Checkout Page
18. 14.18 Get the Product Details Using the Id
19. 14.19 Insert Product and Cart Details into HTML
20. 14.20 Combine the HTML Together
21. 14.21 Put the HTML on the Page
22. 14.22 Display Price Correctly on Checkout Page
23. 14.23 Move formatCurrency() Code into Separate File
24. 14.24 Use Modules to Share Code Between Files
25. 14.25 Make Delivery Option Selectors Independent
26. 14.26 Make the Delete Link Interactive
27. 14.27 Save the Product Id to Delete in a Data Attribute
28. 14.28 Remove Product From Cart
29. 14.29 Update the HTML After Removing From Cart
30. 14.30 Save Cart in localStorage
31. 14.31 Load Cart From localStorage
32. 14.32 Conclusion and Exercises
1. 15.1 What is an External Library
2. 15.2 How to Load an External Library
3. 15.3 Some Details About External Libraries
4. 15.4 Intro to DayJS
5. 15.5 Load DayJS Into Project
6. 15.6 How to Use DayJS
7. 15.7 Do Calculations with the Date
8. 15.8 Display Date in Easy-to-Read Format
9. 15.9 Load External Libraries with JavaScript Modules
10. 15.10 Load DayJS with JavaScript Modules
11. 15.11 Default Exports
12. 15.12 Save the Data for the Delivery Options
13. 15.13 Save Delivery Option Id in the Cart
14. 15.14 Generate HTML for the Delivery Options
15. 15.15 Calculate the Delivery Date and Insert it into the HTML
16. 15.16 Insert the Delivery Price Into the HTML
17. 15.17 Combine the HTML and Put it on the Page
18. 15.18 Make the Delivery Option Selector Checked
19. 15.19 Display Delivery Date at the Top
20. 15.20 Make Delivery Options Interactive
21. 15.21 Update Delivery Option in the Cart
22. 15.22 Update the Page When Selecting Delivery Option
23. 15.23 Details About Regenerating the HTML
24. 15.24 MVC = Model, View, Controller
25. 15.25 Separate OrderSummary and PaymentSummary in Different Files
26. 15.26 Set Up the Payment Summary File
27. 15.27 Calculate the Cost of the Products
28. 15.28 Calculate the Shipping Price
29. 15.29 Calculate the Rest of the Prices
30. 15.30 Generate the HTML for the Payment Summary
31. 15.31 Put the HTML on the Page
32. 15.32 Update Payment Summary After Removing Product
33. 15.33 Update Payment Summary After Changing Delivery Option
34. 15.34 Conclusion and Exercises
1. 16.1 Manual Testing
2. 16.2 Automated Testing
3. 16.3 How to Run Automated Tests
4. 16.4 Create More Test Cases
5. 16.5 Basic Test Cases and Edge Cases
6. 16.6 Retest the Code
7. 16.7 Naming Test Cases
8. 16.8 Test Suites
9. 16.9 Jasmine Testing Framework
10. 16.10 Run Tests Using Jasmine
11. 16.11 Create Tests Using Jasmine
12. 16.12 More Jasmine Tests
13. 16.13 Failing Test in Jasmine
14. 16.14 More Details About Jasmine
15. 16.15 Folder Structure for Tests
16. 16.16 Test Coverage
17. 16.17 Create addToCart Tests
18. 16.18 Mocks
19. 16.19 Order Matters When Mocking
20. 16.20 Mock localStorage.setItem
21. 16.21 Add More Expectations
22. 16.22 Add Existing Product Test
23. 16.23 Integration Tests
24. 16.24 Set Up Integration Test
25. 16.25 Test How the Page Looks
26. 16.26 Test the Product Quantity
27. 16.27 Test How the Page Behaves
28. 16.28 Check the Page After Delete
29. 16.29 Check the Cart After Delete
30. 16.30 Integration Test Cleanup
31. 16.31 Hooks
32. 16.32 Cleanup and Save to Git
33. 16.33 Conclusion and Exercises
1. 17.1 Intro to Object-Oriented Programming
2. 17.2 Convert cart.js into OOP
3. 17.3 Move functions into cart object
4. 17.4 "this"
5. 17.5 Move other functions into cart
6. 17.6 Why we use Object-Oriented Programming
7. 17.7 Try out the code
8. 17.8 Try addToCart
9. 17.9 Create multiple objects
10. 17.10 Test multiple objects
11. 17.11 Use function to create objects
12. 17.12 Classes
13. 17.13 Use class to create objects
14. 17.14 constructor
15. 17.15 private properties and methods
16. 17.16 Create Product class
17. 17.17 Convert all products into classes
18. 17.18 Use Product class in Amazon project
19. 17.19 Inheritance
20. 17.20 Add more specific properties
21. 17.21 Discriminator property
22. 17.22 Display size chart on the page
23. 17.23 Polymorphism
24. 17.24 Built-in classes
25. 17.25 More details about "this"
26. 17.26 "this" inside a function
27. 17.27 "this" and arrow functions
28. 17.28 OOP vs Procedural
1. 18.1 Intro to backend
2. 18.2 HTTP
3. 18.3 URL
4. 18.4 Send the HTTP request
5. 18.5 The network tab
6. 18.6 Get the response in code
7. 18.7 URL Paths
8. 18.8 404 Not Found Error
9. 18.9 Status codes
10. 18.10 Documentation page
11. 18.11 Different types of responses
12. 18.12 Browser uses GET requests
13. 18.13 Load products from backend
14. 18.14 Convert products into classes
15. 18.15 Use products in Amazon project
16. 18.16 Callbacks
17. 18.17 Testing with a backend
18. 18.18 done function
19. 18.19 Promises
20. 18.20 Convert callback into promise
21. 18.21 Why we use promises
22. 18.22 Promises flatten code
23. 18.23 Resolve a value
24. 18.24 Promise.all
25. 18.25 fetch
26. 18.26 Get the response from fetch
27. 18.27 Use fetch in project
28. 18.28 Use fetch in tests
29. 18.29 Async Await
30. 18.30 Use async await in project
31. 18.31 More details about async await
32. 18.32 Error handling in callbacks
33. 18.33 Error handling in promises
34. 18.34 Error handling in async await
35. 18.35 More details about try catch
36. 18.36 Manually create errors
37. 18.37 Use backend to create order
38. 18.38 POST request
39. 18.39 Use async await to wait for response
40. 18.40 Check the response in the Console
41. 18.41 Save the orders
42. 18.42 Save order after place order
43. 18.43 Add error handling to orders
44. 18.44 Go to orders page
45. 18.45 URL parameters
46. 18.46 Get the parameters out of the URL
47. 18.47 Multiple URL parameters
48. 18.48 How to create the tracking page
1. JavaScript Final Test
2. Double check your completion & name before receiving your certificate!

About this course

517 lessons
22 hours of video content
Certificate of Completion
~~$169~~ $39

Unlock your superior learning experience NOW

Elevate your learning and support quality education today.

Certificate of Completion
Detailed course breakdown
Ad-free, easy-to-navigate content

JavaScript Full Course

Premium Highlights

Enhanced Learning Experience

Certificate of Completion

Detailed Course Breakdown

Support SuperSimpleDev

Certificate

Course curriculum

Introduction

1. JavaScript Basics

2. Numbers and Math

3. Strings

4. HTML CSS Review, console.log

5. Variables

6. Booleans and If-Statements

7. Functions

8. Objects

9. Document Object Model (DOM)

10. HTML, CSS, and JavaScript Together

11. Arrays and Loops

12. Advanced Functions

13. Start the Amazon Project and Intro to Git

14. Modules

15. External Libraries

16. Testing

17. Object-Oriented Programming

18. Intro to Backend, Callback, Async Await

Final Test

About this course

Unlock your superior learning experience NOW