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

31 thoughts on “Learn JavaScript by Building 7 Games – Full Course

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

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

  3. 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!

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

  5. 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;

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

Leave a Reply

Your email address will not be published. Required fields are marked *