JavaScript Programming - Full Course

⭐️ Code ⭐️
Two versions:

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
Render welcome message
Improve message w/ string concatenation
Use plus equal for count
Create save feature
Debugging online
Set count to 0
Recap
Variables practice
Concatenate strings
Incrementing & decrementing
Strings & numbers
Rendering error message
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: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
Object sneak peek
Objects
Create first object
Store player data
Methods on object
Recap
Objects & functions
if else
Loops & arrays
push, pop, unshift, shift challenge
Logical operators
Rock papers scissors
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
Deploying Chrome Extension
What is localStorage?
First localStorage
Storing arrays in localStorage
Save leads
Get leads
Truthy & falsy values
Guess expression: truthy or falsy?
Checking localStorage before rendering
Style delete button
Make delete button work
How function parameters can improve our code
Write function parameter
Functions w/ multiple params
Numbers as function params
Arguments vs Params
Arrays as params
Refactor renderLeads() to use parameter
Create tabBtn
Save tab url
Get current tab
Use Chrome API to get tab
Deploy final version
Recap
Practice
Outro

[ashleyy]

Remarkable content ❤ For those interested in learning Javascript... books can also be amazing sources. These are the best:
Eloquent Javascript
Javascript in Less Than 50 Pages
Head First Javascript Programming
You`re welcome

[entertainmentisnecessary]

I remember the days when i have no idea what is all this . I have no idea what is id, class, objects and all. I felt overwhelmed but after consistent learning and practices, now i am able to create websites and make it interactive. Never felt more happier. To all those new beginners don't lose hope. Keep practicing it improves muscle memory. So, Don't give up.

[lordhuzi]

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

[mangeshpuranik]

The biggest problem with coding tutorials is they are not engaging enough. But I have rarely seen tutorial as engaging as this one. Too good :)

[abdullahrashid]

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

[manishpatil]

freecodecamp will go in history as a legend

[legityash]

Even paid courses don't provide the amount of knowledge you're providing for free. You're great Sir. 🌟🌟🌟🌟

[kcode.codeandtech]

The guy is very great person when lecturing, he dont only teaches you JavaScript besides he teaches you the mindset of a programmer like problem solving and critical thinking, What a great person and lecture!

[Esbna]

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!

Edit almost 2 years after:
*For the skeptics*
I was really ecstatic when I made this comment so I might have overlooked a few things. I see some of you did not believe me, and I think it is good to be skeptic about things you read on the internet. However, the comment was true. Seven months after my first line of code, I was hired as a full stack developer at age 21.
Now the caveats.
Number 1: I am a physics dropout so you could say I had a math and problem-solving background. However, I wasn't really good at physics, that's why I dropped out to be a dev.
Number 2: when I said "work hard and never give up"(in retrospect it sounds super corny), I really mean it. I was full blown 8-10 hours a day learning to code. Even most weekends. I missed going out with my friends or going o vacation or whatever. Also, I had the privilege of having that time, as I was studying and living with my parents. And also, I kind of gambled here, because I dropped out without telling my parents, so if I failed I would have lost a full year of college which was very risky and they wouldn't have been very proud.
Number 3: Today the job market is more difficult than 2 years ago. However, don't get disappointed as those things tend to be cyclic and it should get better.
So to conclude I would say that maybe depending on your situation and how much dedication you want to put to it, you may be able to land a job after 1-1.5 years of studying

*For the ones who want resources*
Many asked for resources and roadmaps
I recommend 2 things that were useful for me. Firstly, as you did in this tutorial, build projects. Even if they are fully copied from another person. It will help you understand.
Also, now I will give you a mini roadmap. It will be order, but if you get bored of something, you may skip it and return afterwards. You might not grasp fully concepts when you skip something important, but it is better to be a bit confused but entertained than to call it quits.
Google any concept you don't understand
0. Learn git. Very important.
1. Fully understand javascript and ES6 as much as possible.
2. Get into the basics of react, node and express and build some small projects where you consume REST APIs from a React SPA. You should eventually learn to use a react state manager such as redux or zustand.
3. Learn a database. I started with MongoDB which is quite good and free to deploy in MongoAtlas. You can use the mongoose ORM to interact with the DB from nodejs. I recommend you eventually learn SQL though as it is really powerful (I recommend PostgreSQL)
4. Learn TypeScript. Do not skip this, it is extremely important
5. Learn authentication via JWT in express.
6. Learn the Next.js framework.
7. Learn to deploy on Netlify and Vercel for free.
8. Build an app that will look good on your resume, try to make it something useful.
9. Learn websockets. How to communicate with socketio from node to react.
10. This is no longer programming, but build a good CV, search how to make it pass ATS, make it eyecatching, highlight your skills and apps you made. I didn't but you can make a portfolio. Definitely make a LinkedIn account and connect with other tech people. Have an appropriate picture, add your skills and education or work experience if you have it.
11. Study leetcode. You will probably get some programming challenges in your job interviews so be prepared. Also learn soft skills you can use for non technical questions you will be asked in the interview
12. Learn Agile Methodologies such as SCRUM and learn to use JIRA(recruiters will love that, I promise)
Now you're ready to start applying to everything. I applied to about 50 jobs and got 2 interviews. In both I did really good. You will get few chances with no experience, so do not waste them.
While you're looking for a job, you can learn more really useful technologies. I recommend Docker, GraphQL, basic AWS, nginx, Nest.js, React Native, maybe other framework other than react or other language other than javascript. But, more importantly get deeper knowledge of everything you learned before.

I can't handle resources on here because can't post urls on yt comments. However, if you want to ask me for resources or anything about programming, DM me at instagram, i'm grego_kun.
Happy coding!

[adityaroshanpatro]

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

[ashaindie.]

I'm a computer Science student in college and this has been one of the only ways I've been able to learn. They really just give you a book filled with code and hope that you get the gist. It's been so hard trying to grasp everything they throw at you without even giving practical examples. I'm not even thirty mins into this video, and it has helped me more than any college class has.

[Techbelles]

How can one person be this good in coding and also In teaching? I hope you realize you are a multiple dose of blessings to this generation. Thank you Per Borgen !

[jgalvan]

I just denied a bootcamp that wanted $16k and told myself this morning on my TO-DO List to just get started! this is it ! the next two days are going to be exciting for me

[vipulvibhuti]

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. ❤

[trashgamer]

ive watched more then 100 tutorials on youtube on all kinds of programing languages and this is hands down the best one by miles, thank you my friend.

[elissitdesign]

I am beyond words right now. Your teaching style is impeccable! I finally understand basic JavaScript. I was a total hack before with not knowing reasons for doing things. So amazing!

[zoopabig]

Per! You are full of energy, funny and just a great teacher! If all teachers were like that at schools we would live in a much better world today! Thank you sooo much! I love javascript!

[ua]

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!

[demolazer]

A big smile spread across my face when I clicked the icon to get the chrome extension working. An excellent tutorial, one of the best I've seen on any language.

[imni]

Hello..just finished this. This is the first long tutorial I ever finished. Quite underrated..the way you recap everything with words but also with activities. I also love how excited you are when micro tasks are completed. I usually avoid accents for tutorials, but I thought wrong. You are interesting and engaging to listen to. I sincerely want to thank you for this tutorial.