JavaScript Programming – Full Course

Ecommerce Empire Academy

Learn JavaScript from scratch by solving over a hundred different coding challenges. Go here for the interactive browser version:

⭐️ Code ⭐️
Two versions:
πŸ”— Interactive version:
πŸ”— GitHub repo:

✏️ Created by Per Harald Borgen. Per on Twitter:

00:00 Intro
03:41 Passenger counter app
04:39 Setting up file
07:42 Create variable
12:27 Mathematical operations
16:16 Reassigning & incrementing
19:23 Adding button
21:41 onclick event listener
25:10 Using functions to write less code
28:48 First function
29:34 Function that logs sum
32:25 Function that increments
34:23 Increment on clicks
36:35 Display count
41:53 Document Object Model
43:47 Display count w/ innerText
44:30 Create save button
46:40 What is string?
48:16 First string variable
52:00 Log greeting to console
53:18 Strings vs. Numbers
56:07 Render welcome message
58:10 Improve message w/ string concatenation
1:00:28 Use plus equal for count
1:00:57 Create save feature
1:05:38 Debugging online
1:09:31 Set count to 0
1:12:28 Recap
1:15:47 Variables practice
1:17:42 Concatenate strings
1:18:43 Incrementing & decrementing
1:20:56 Strings & numbers
1:22:35 Rendering error message
1:25:52 Calculator challenge
​
Build Blackjack Game
1:31:27 Build Blackjack game
1:32:27 Add firstCard, secondCard, & sum
1:33:23 If…else conditionals
1:39:08 if…else statement
1:42:05 if/else…if/else statement
1:45:28 if…else statement for our game
1:47:32 hasBlackJack variable
1:49:38 isAlive variable
1:51:27 Practice boolean conditions
1:54:55 Add message variable
1:58:20 Link stylesheet
2:00:56 Add basic styling
2:05:19 Make start button work
2:11:13 Display message
2:13:48 Display sum
2:19:36 Display cards
2:21:34 New card button
2:25:16 Add to sum when newCard is clicked
2:28:36 Rename startGame function
2:30:52 Solving our cards problem w/ array
2:34:12 Arrays intro
2:39:30 Array indexes
2:43:50 Arrays w/ multiple data types
2:46:12 Adding & removing items from arrays
2:50:35 Creating cards array
2:51:43 Push new card to array
2:53:05 Counting
2:57:10 Loops
3:00:37 For loops & arrays
3:04:23 First array-based for loop
3:05:55 For loops, arrays, & DOM
3:08:55 Use loop to render cards
3:11:16 Avoid hard-coding values
3:12:51 Returning values
3:17:54 Use function to set card values
3:21:05 Generating random numbers w/ Math.random()
3:25:24 Math.random() * 6
3:27:11 Flooring number w/ Math.floor()
3:28:40 Create dice
3:30:23 Completing dice function
3:33:04 Make getRandomCard() work
3:36:00 getRandomNumber function
3:39:06 Assign values in startGame function
3:41:52 Card feature is broken
3:42:54 Logical AND operator
3:46:39 Logical operators
3:48:47 logical OR operator
3:51:52 Only trigger newCard() if you're allowed to
3:53:23 Object sneak peek
3:58:02 Objects
4:02:47 Create first object
4:06:08 Store player data
4:08:48 Methods on object
4:10:50 Recap
4:15:17 Objects & functions
4:17:21 if else
4:20:13 Loops & arrays
4:22:21 push, pop, unshift, shift challenge
4:25:50 Logical operators
4:27:50 Rock papers scissors
4:30:52 Sorting fruits

Build Chrome Extension
4:33:54 Build Chrome Extension
4:38:30 Add button & input tag
4:40:06 Style button & input tag
4:47:28 Make input button work w/ onclick
4:48:49 Refactor to addEventListener
4:51:11 addEventListener()
4:52:58 Refactoring
4:54:25 Create myLeads array & inputEl
4:56:49 Using let & const
5:00:11 Push to myLeads array
5:01:24 Push value from input field
5:03:56 Use for loop to log out leads
5:05:38 Create unordered list
5:07:39 Render leads in unordered list
5:11:22 How to render li elements w/ innerHTML
5:13:01 innerHTML
5:14:34 More innerHTML practice
5:16:26 Render li elements w/ innerHTML
5:17:37 Use createElement() & append() instead of innerHTML
5:21:16 Improving performance of our app
5:24:37 Create render function
5:26:40 Clear input field
5:28:47 Add a tag
5:35:53 Template strings
5:35:54 Write template string
5:36:28 Make template string more dynamic
5:37:12 Template strings on multiple lines
5:41:03 Refactor app to use template string
5:42:19 Style list
5:46:13 Preparing deployment
5:51:08 Deploying Chrome Extension
5:53:40 What is localStorage?
5:56:45 First localStorage
6:00:38 Storing arrays in localStorage
6:07:05 Save leads
6:09:36 Get leads
6:13:31 Truthy & falsy values
6:21:28 Guess expression: truthy or falsy?
6:23:52 Checking localStorage before rendering
6:27:33 Style delete button
6:30:52 Make delete button work
6:35:12 How function parameters can improve our code
6:41:09 Write function parameter
6:44:40 Functions w/ multiple params
6:47:54 Numbers as function params
6:49:40 Arguments vs Params
6:53:06 Arrays as params
6:55:02 Refactor renderLeads() to use parameter
6:56:46 Create tabBtn
7:00:07 Save tab url
7:02:46 Get current tab
7:07:09 Use Chrome API to get tab
7:13:32 Deploy final version
7:15:48 Recap
7:21:34 Practice
7:41:55 Outro

50 thoughts on “JavaScript Programming – Full Course”

  1. Thanks a lot for sharing our course, freeCodeCamp! ❀️
    If anyone wants to check out the interactive version of the course, click here πŸ‘‰ https://scrimba.com/learn/learnjavascript
    We also share tutorials & career advice for newbie devs on our YouTube channel, so please follow us if you’re interested in that 😎

    1. Grandmaster Name

      #scrimba Finally finally i have finished this video and completed three different projects . It took 8 days , but these days were very amazing , i am fully boosted , i am more confident and ya , i am looking to build more and more projects with scrimba . Lots of love to Per Harald the tutor , what an amazing way of teaching . ❀️❀️❀️ I will be completing more videos from scrimba Thanks a lot scrimba ❀️#scrimba

    2. @Grandmaster Name in section 1 lesson 8 it is saying that increment is not defined.pls help

    3. Heleno Licurgo do Amaral

      I’m start to use the Scrimba for this course and it’s a fantastic environment for learning code.
      Easy to use and fast.
      it’s also incorporate some functionalities from VSCode that I’m used.

  2. Aditya Roshan Patro

    TIMESTAMPS:

    00:00 Intro
    03:41 Passenger counter app
    04:39 Setting up file
    07:42 Create variable
    12:27 Mathematical operations
    16:16 Reassigning & incrementing
    19:23 Adding button
    21:41 onclick event listener
    25:10 Using functions to write less code
    28:48 First function
    29:34 Function that logs sum
    32:25 Function that increments
    34:23 Increment on clicks
    36:35 Display count
    41:53 Document Object Model
    43:47 Display count w/ innerText
    44:30 Create save button
    46:40 What is string?
    48:16 First string variable
    52:00 Log greeting to console
    53:18 Strings vs. Numbers
    56:07 Render welcome message
    58:10 Improve message w/ string concatenation
    1:00:28 Use plus equal for count
    1:00:57 Create save feature
    1:05:38 Debugging online
    1:09:31 Set count to 0
    1:12:28 Recap
    1:15:47 Variables practice
    1:17:42 Concatenate strings
    1:18:43 Incrementing & decrementing
    1:20:56 Strings & numbers
    1:22:35 Rendering error message
    1:25:52 Calculator challenge
    ​
    Build Blackjack Game
    1:31:27 Build Blackjack game
    1:32:27 Add firstCard, secondCard, & sum
    1:33:23 If…else conditionals
    1:39:08 if…else statement
    1:42:05 if/else…if/else statement
    1:45:28 if…else statement for our game
    1:47:32 hasBlackJack variable
    1:49:38 isAlive variable
    1:51:27 Practice boolean conditions
    1:54:55 Add message variable
    1:58:20 Link stylesheet
    2:00:56 Add basic styling
    2:05:19 Make start button work
    2:11:13 Display message
    2:13:48 Display sum
    2:19:36 Display cards
    2:21:34 New card button
    2:25:16 Add to sum when newCard is clicked
    2:28:36 Rename startGame function
    2:30:52 Solving our cards problem w/ array
    2:34:12 Arrays intro
    2:39:30 Array indexes
    2:43:50 Arrays w/ multiple data types
    2:46:12 Adding & removing items from arrays
    2:50:35 Creating cards array
    2:51:43 Push new card to array
    2:53:05 Counting
    2:57:10 Loops
    3:00:37 For loops & arrays
    3:04:23 First array-based for loop
    3:05:55 For loops, arrays, & DOM
    3:08:55 Use loop to render cards
    3:11:16 Avoid hard-coding values
    3:12:51 Returning values
    3:17:54 Use function to set card values
    3:21:05 Generating random numbers w/ Math.random()
    3:25:24 Math.random() * 6
    3:27:11 Flooring number w/ Math.floor()
    3:28:40 Create dice
    3:30:23 Completing dice function
    3:33:04 Make getRandomCard() work
    3:36:00 getRandomNumber function
    3:39:06 Assign values in startGame function
    3:41:52 Card feature is broken
    3:42:54 Logical AND operator
    3:46:39 Logical operators
    3:48:47 logical OR operator
    3:51:52 Only trigger newCard() if you’re allowed to
    3:53:23 Object sneak peek
    3:58:02 Objects
    4:02:47 Create first object
    4:06:08 Store player data
    4:08:48 Methods on object
    4:10:50 Recap
    4:15:17 Objects & functions
    4:17:21 if else
    4:20:13 Loops & arrays
    4:22:21 push, pop, unshift, shift challenge
    4:25:50 Logical operators
    4:27:50 Rock papers scissors
    4:30:52 Sorting fruits

    Build Chrome Extension
    4:33:54 Build Chrome Extension
    4:38:30 Add button & input tag
    4:40:06 Style button & input tag
    4:47:28 Make input button work w/ onclick
    4:48:49 Refactor to addEventListener
    4:51:11 addEventListener()
    4:52:58 Refactoring
    4:54:25 Create myLeads array & inputEl
    4:56:49 Using let & const
    5:00:11 Push to myLeads array
    5:01:24 Push value from input field
    5:03:56 Use for loop to log out leads
    5:05:38 Create unordered list
    5:07:39 Render leads in unordered list
    5:11:22 How to render li elements w/ innerHTML
    5:13:01 innerHTML
    5:14:34 More innerHTML practice
    5:16:26 Render li elements w/ innerHTML
    5:17:37 Use createElement() & append() instead of innerHTML
    5:21:16 Improving performance of our app
    5:24:37 Create render function
    5:26:40 Clear input field
    5:28:47 Add a tag
    5:35:53 Template strings
    5:35:54 Write template string
    5:36:28 Make template string more dynamic
    5:37:12 Template strings on multiple lines
    5:41:03 Refactor app to use template string
    5:42:19 Style list
    5:46:13 Preparing deployment
    5:51:08 Deploying Chrome Extension
    5:53:40 What is localStorage?
    5:56:45 First localStorage
    6:00:38 Storing arrays in localStorage
    6:07:05 Save leads
    6:09:36 Get leads
    6:13:31 Truthy & falsy values
    6:21:28 Guess expression: truthy or falsy?
    6:23:52 Checking localStorage before rendering
    6:27:33 Style delete button
    6:30:52 Make delete button work
    6:35:12 How function parameters can improve our code
    6:41:09 Write function parameter
    6:44:40 Functions w/ multiple params
    6:47:54 Numbers as function params
    6:49:40 Arguments vs Params
    6:53:06 Arrays as params
    6:55:02 Refactor renderLeads() to use parameter
    6:56:46 Create tabBtn
    7:00:07 Save tab url
    7:02:46 Get current tab
    7:07:09 Use Chrome API to get tab
    7:13:32 Deploy final version
    7:15:48 Recap
    7:21:34 Practice
    7:41:55 Outro

    1. @Ashish Kumar not true I look at comments more often than description thanks to this pal who posted time stamps, a good human

  3. KingPacavision

    Thank you so much for this course 7 hours and 44 minutes of gold. Took about a week to finish but it was totally worth it. Learned a ton.

    1. Midnight Demon Reaper

      Hey bro what’s up im curious to see what have you accomplished through ur journey… did u get hired and how much time it took u and thanks ❀️

    2. bro can you give me advice on what should i try to learn next after this course

  4. OMG so excited I finally was able to complete a course in general. I completed it in 3 days. Per’s way of teaching is outstanding and easy to understand he made everything so smooth by explaining most things in simple words and not complicated coding words and terms. Thank you so much!

    1. @Midnight Demon Reaper not working I’ve only been doing my own things. I wasn’t looking for a job for say

  5. The instructor for this lesson is one of the best I’ve come across so far. His video is as engaging as it can be to hold my attention, and lots of hands on practice. Excellent πŸ™‚πŸ‘

  6. Abdullah Rashid

    Knowing the basics of Python made this course just fly by. It true that when you learn one language, learning another is just the different syntax. The concepts are mostly same. Good luck to the new programmers. Just dont give up

    1. So true! My first language was C++, and so everything else is super easy πŸ˜›

    2. @TheCrownOfNoah honestly no one ever masters a language, unless you create one. Mastery requires knowing every bit of syntax etc. Expert is about as high as it goes typically

    3. take it from me bro. if you really want to be a good programer i suggest you to learn c++

  7. Let’s just appreciate how much time and effort this guy put in just so WE can learn to code for FREE

  8. Amazing job. I knew html and css but never figured out how to collaborate with JS even thought i knew the terms. The true tutorial examples finally made it happen for me, as it was like i was building a real project.

  9. One of the best courses I have had the chance to watch. Almost 8hours but completely worth it. Other teachers were kind of boring but Per really takes his time and explains how and why he uses his code. I like that. Getting to Scrimba to follow the Front end engineer career path.

  10. 3 days after its release, this video was my introduction to web development. 2 weeks ago I started my first job as a full stack developer. Work hard and never give up!

  11. Hello. Thank you very much for making this incredibly interesting and entertaining video. I really appreciate your help. Per is really awesome. He doesn’t rush the course but instead takes time to explain certain things that one might have already forgotten (HTML/CSS) or like things that are not really related to the course (Grammarly/Honey). He gives the impression of a person with whom it is really nice to be in the same company. Great teacher.

  12. This course is absolutely one of the best for Javascript beginner. I was totally blown away by how he goes over every step of the way through out the course and I felt very confident towards the end. Actually I learnt more than just JavaScript from this course. i.e, how to actually learn a new language(by actually working on a live project) and how not to be too overwhelmed by so many new concepts & Terminologies. He breaks down every single step and trains you so well. The 7+ Hr video is definitely worth the time as he goes over 2 Projects. Knowing Python or Java/ C++ will make the learning much easier though not required. However some prior knowledge of HTML and CSS are required. Thank you so much Per for making this awesome course!

  13. I built the passenger counter and the chrome extension and I can’t begin to explain how much I’ve learned your course is incredible man. thank you very much

  14. Some people are good at coding.
    Others are good at teaching.

    Finding a good coder who can combine that with good teaching is a priceless commodity. The fact that this level of vocational education is FREE in this day and age is nothing short of a blessing.

    Thank you so much!

  15. This is the first JS content to really break through with me and i can FEEL myself learning the more I go through the course.

    Things i used to struggle to read make waaay more sense due to the way the teacher asks you to go and try it yourself rather than just copy his code.

    insane value here.

    Big props to the teacher and freeCodeCamp for this content.

  16. Shruti Sharma

    Right now I am at 6:11:04 and , I can’t resist myself to appreciate the this course. The methodoloy is really very articulate, how he breaks down the complex problems into smaller parts and then solve it. Every second is worth it. Thank you!

  17. Subterranean_Solaris

    Am glad to have completed this course. Thank you Per for this superb tutorial. Here is a small contribution for everyone watching ; I discovered that if you want to retain your placeholder after saving an input, use this statement in the input.btn event listener : “inputEl.value = inputEl.textContent” just after the “myLeads.push(inputEl.value)” statement. GoodLuck!!!

  18. VIPUL VIBHUTI

    Per Harald Borgen, you are an amazing teacher. This is the first course I finished completely. The way you teach JS With DOM there are very few people who can do that. Many people learn JS like me but don’t really know how to use it on browsers and that is a pain point. Thank you soo much. Wish to meet you some day and thank you in person. ❀

  19. The Highlight

    Not many people has that skill to make you feel the progress. Insanely good teacher! Thank you sir!

  20. Deresia Scott

    This was excellent and very clear! Thank you!!! I’ve always struggled with JS and making it work with html and CSS but this is making me feel a lot more confident.

Comments are closed.