Learn JavaScript by Building 7 Games – Full Course
In this tutorial course, you will learn JavaScript by coding 7 retro grid-based games. Learn by doing and have 7 great projects for your career portfolio by the end of the course. Each game is done with minimal styling for you to take and make your own.
? Course from Ania Kubow. Check out her channel: https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw
вђпёЏ Course Contents вђпёЏ
вЊЁпёЏ (01:55) Memory Game – Level 1
? Code: https://github.com/kubowania/memory-game
Learn:
• push()
• querySelector()
• SetAttribute()
• getAttribute()
• appendChild()
• Math.random()
• sort()
• For loops
• createElement()
вЊЁпёЏ (11:39) Whack-a-mole – level 1
? Code: https://github.com/kubowania/whack-a-mole
Learn:
• querySelector()
• addEventListener()
• setInterval()
• classList
• forEach()
• Arrow functions
вЊЁпёЏ (19:47) Connect Four – level 1
? Code: https://github.com/kubowania/connect-four
Learn:
• querySelector()
• addEventListener()
• onclick
• classList.contains()
• classList.add()
• For loops
• Arrow functions
вЊЁпёЏ (27:37) Nokia 3310 Snake – level 2
? Code: https://github.com/kubowania/Nokia3310-Snake
Learn:
• querySelector()
• addEventListener()
• setInterval()
• keyCodes
• pop()
• unshift()
• push()
• classList.contains()
• classList.add()
• classList.remove()
вЊЁпёЏ (43:10) Space Invaders – level 2
? Code: https://github.com/kubowania/space-invaders
Learn:
• querySelector()
• addEventListener()
• Switch cases
• keyCodes
• indexOf()
• includes()
• classList
• setInterval()
• clearInterval()
• push()
вЊЁпёЏ (59:06) Frogger – level 2
? Code: https://github.com/kubowania/Frogger
Learn:
• querySelector()
• addEventListener()
• setInterval()
• clearInterval()
• forEach()
• classList.contains()
• classList.add()
• classList.remove()
вЊЁпёЏ (1:19:38) Tetris – level 3
? Code: https://github.com/kubowania/Tetris
Learn:
• querySelector()
• addEventListener()
• Array.from()
• getElementsByClassName()
• Math.floor()
• Math.random()
• forEach()
• classList.contains()
• classList.add()
• classList.remove()
• setInterval()
• clearInterval()
• some()
• style.backgroundImage
• splice()
• concat()
• appendChild()
• Arrow functions
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
big thx for this vidio it realy helped me allot thx you very mutch miss and i hope from my hart you can keep up your amising work
What JavaScript launcher is she using?
What's the name of the software she is using to code??
I'm going to try get a job with your projects
I'm going to try get a job with your projects
One question:why you are not using semicolons after end of every statement???
Where is the result..result maters ?‍♂️
why no semicolon in the code? :/ I am doing the first game
Sos genial explicando! Gracias ?. AgrГ©gale subtitulado en espaГ±ol por favor.
wow, you are so beautiful
This is awesome! One funny comment, when writing the style for the grid div you put display flex…..css grid is out there!!
so at 4:57 she created a document.addeventlistener but then at 5:39 when she added in the array list of images she removed it but didn't explained why
Hello, can I know what IDE you are using?
Hi thanks for there games . i need the source code of these games plz share it with us.
What!, she codes sooo fast
Awesome vid, which editor is this?
Had to slow it down to 75% to keep up with her coding.
Damn you did that so fast.
Hello Teacher Ania, thank you very much for you videos!! I would like to ask a question regarding the connect4game, why did you code the onclick thing in three nested levels? I'm confused about the differences between i and index, why do we have to use both of them? Again, thank you very much
Memory Game- Confused on resultDisplay.textContent=cardsWon.length cardsWon.length is 2 ??? So the textContent property counts the integer as 1???? please Explain in simple words if anyone is here… thankyou
WoW….!!!
Thanks FreeCodeCamp, subtitles please .
I feel like i got click-baited…
These days I'm struggling with learning. It's been a couple of months already and I feel like I'm not advancing like others whose "zero to dev in 6 months" stories fill up my email from all those newsletters I've subscribed to.
This game series is like my hope at the moment. I have this dream: I will watch the instructions until I understand the logic correctly, take notes along the way, go to a cafГ© and work on them whilst sippin' on some delicious mocha. and it will be good.
All in all, thanks for all the effort Ania!
If your memory game doesn't work it's because the code described in the video is incomplete. Review the code in git and you will see you are missing some things.
your eyes are so beautiful!!!!
10:17 Line 55 appeared magically
card.Array.sort(() => 0.5 – Math.random())
Cool, thanks! I've been working with JavaScript a bit and most of this makes sense. However, on the second game, "Wack-a-mole."
Line 17:
hitPosition = randomPosition.id;
I notice "hitPosition" isn't defined as a variable. It's just a random string assigned to randomPosition.id. I didn't know you could do this in JavaScript, I thought it would have to be defined as a variable first. Strangely, it broke when I added the let keyword, as in:
Line 17:
let hitPosition = randomPosition.id;
Could anyone tell that why is the whole js script is written inside that addListener() function in the first game?
If I did snake exactly the way you did it but I did it on an android using Acode would you expect it to worked? I triple checked the code and the start button still wont work to start the snake.
Lack of explanations.