Learn JavaScript by Building 7 Games – Full Course

Ecommerce Empire Academy

Learn JavaScript by building 7 retro games.

✏️ Ania Kubów created this course. Check out her channel:

💻 GitHub Links:
Rock Paper Scissors:
Memory Game:
Whac-a-mole:
Breakout:
Frogger:
Connect Four:
Space Invaders:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:56) Rock Paper Scissors
⌨️ (0:18:42) Memory Game
⌨️ (1:04:37) Whac-a-mole
⌨️ (1:30:39) Breakout
⌨️ (2:31:10) Frogger
⌨️ (3:40:02) Connect Four
⌨️ (4:08:23) Space Invaders

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

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

    1. but i understand tamil base videos..
      upload tamil base videos in programming language

    2. Watching the first time through just to understand what can be done. Following each project for the second time to actually do what can be done. Thank you for a great video tutorial.

    3. Dzięki Ania, wszystko bardzo ładnie wytłumaczone, dzięki za kurs, fajnie, że Polka robi tak międzynarodową karierę 🙂

  1. 3:44:25 emmet is built into vscode so you can just type div*n to get that many divs at, 3:45:15 instead of manually adding the class you can instead make 42 plain divs then add the other 7 with the class using emmet like so, div#taken*7

  2. The explanation is so clear and precise. Thank you freeCodeCamp and Ania for the providing this course.

  3. Thanks for sharing such videos, it’s always great to see how to build multiple things

  4. Thanks to the FreeCodeCamp because of your tutorials and some practise I can finally say proudly I am a developer thanks guys you are the one who teaches for free not even a single penny ! You deserve subs and likes I will try my best to share these awesome tutorials with my friends and mates ☺

    1. @Ashutosh Tiwary he’s not really a developer he works at walmart still only commentating to get his video recognize.

    2. @Ashutosh Tiwary I didn’t mastered js , maybe you can say I am right now in intermediate ?

  5. Have done this course years ago, amazing it is remake, it will help kids develop their html & css & javascript dynamics, with that stack being well developed limits are low, you can build anything, next step is making requests to API, learn basic architeture and some framework for js.

  6. A tip for anyone coding the rock vs papers vs scissors challenge.
    When she begins to type out the conditions for the winner, you only have write conditions for the player has won, otherwise the computer won.
    This will reduce the amount of if-statements.

    1. not only that but she could write an array with rps , and the random will return what is in that index

    2. Chengusoyane Kargbo

      @why r u like dis With “floor”, the computer never chooses ‘”paper”. You have to use “ceil” to get that result.

  7. CHITUS💖⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    Thanks to the FreeCodeCamp because of your tutorials and some practise I can finally say proudly I am a developer thanks guys you are the one who teaches for free not even a single penny ! You deserve subs and likes I will try my best to share these awesome tutorials with my friends and mates ☺

  8. Dominik Grothe

    Had to know javascript among other things for my web technology project in my studies. This course has supported me incredibly well, thank you!

  9. eduardo besquin

    Ania
    Thank you very much for this excellent tutorial, it’s great for learning and practicing

  10. In the memory game code I can still click on the same card twice and that will trigger the cardsChosen[0] === cardsChosen[1] condition. We do blank the images and reset everything BUUUUT the code still goes through the second if statement inside our checkMatch function. I did a quick fix which is to empty both cardsChosen[0] and cardsChosen[1] upon detecting the user clicked on the same image, like so:

    if (optionOneId == optionTwoId) {
    alert(‘You have clicked the same image!’);
    cardsChosen[0] = [];
    cardsChosen[1] = [];
    cards[optionOneId].setAttribute(‘src’, ‘images/blank.png’)
    cards[optionTwoId].setAttribute(‘src’, ‘images/blank.png’)
    }

  11. Thank you Anita. I’ve rarely explored coding for making games but recently had a project and realized how important it is to challenge myself to creating games and how important it is to learn some of those hidden gems in JS and upping my skills.

  12. hi Ania, love this video, thank you! Question: how can I display a different color and / or italics after the results get displayed? have tried a few ways and still not working. thank you 🙂

  13. Hippolyte Deparis

    You are an absolute champ, I learnt more in a few hours with this video that with an entire year of JS courses

  14. I enjoyed quite a lot building the Space Invaders. It blows my mind how many logic can we have behind animation. 😀 Love your videos Ania and the way you teach them. Rock on!!

  15. Desk Solutions

    I really enjoyed this course, worth watching and I really learning something new from it. The way of her teaching is super cute.

  16. In the Memory Game, there’s a little bug still when you click on the same image: the alert shows up, the cards’ choice gets reset, but you still win a point for a match. One way to solve it is by having the conditional statement itself reset the cardsChoice & Id, AS WELL AS typing “return;” at the end to prevent the checkMatch() function from running further.

    Hope it helps folks!

Comments are closed.