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
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 😎
#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
@Grandmaster Name in section 1 lesson 8 it is saying that increment is not defined.pls help
Thank you so much.
Thanks Per! You are the best!!!
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.
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
Clicking on “Read More” was my mistake 😂
@Porkupine yeah i’m on phone!
omg thank you❤ you’re a legend
You the real mvp
@Ashish Kumar not true I look at comments more often than description thanks to this pal who posted time stamps, a good human
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.
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 ❤️
bro can you give me advice on what should i try to learn next after this course
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!
@Midnight Demon Reaper not working I’ve only been doing my own things. I wasn’t looking for a job for say
@FC Patience all of u
@Freddy for real bro 😂😂
@Freddy for real bro 😂😂
@Freddy do u know how much programmers make 😂😂
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 🙂👍
Then you must see how the CSS evangelist teaches, his vibe sticks whit you so godly ~
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
thanks for the msg
Totally agree
So true! My first language was C++, and so everything else is super easy 😛
@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
take it from me bro. if you really want to be a good programer i suggest you to learn c++
Let’s just appreciate how much time and effort this guy put in just so WE can learn to code for FREE
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.
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.
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!
you must be a genius to become a fullstack developer within 9 months, Lier
@Mr Survivor Yes, really.
👍🏿
lmao can’t tell if you are joking. If you’re not, congratulations!
@Kalpak Dt can u send urs
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.
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!
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
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!
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.
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!
i just finished the course and i woud do it again
What software is this I mean we’re he runs his code
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!!!
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. ❤
Not many people has that skill to make you feel the progress. Insanely good teacher! Thank you sir!
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.