Course image for Learn JavaScript by building Tetris

Learn JavaScript by building Tetris

In this course, you will learn how to set up a project from scratch as well as gain a fundamental understanding of JavaScript by building your very own version of Tetris. This is a great course for those of you who have never touched code before or those of you with some basic understanding of JavaScript, that would like to go over the fundamentals again.

1 hours+ of total content
4.9
4 ratings
1049 students enrolled
Course Creator: Ania Kubow

Hang on...

Heads up!

This is an official course from Full Stack Developer learning path.

Goals

  • Understand fundamentals of JavaScript and work with it
  • Working with event listeners and DOM APIs in JavaScript
  • Create a web development project from scratch
  • Learn to create apps in JS by creating a game
  • Hands on JavaScript project
  • Upload the project on GitHub

Description

Hi, my name is Ania and I am a Software Developer. Welcome to my JavaScript tutorial for beginners. In this course, you will learn how to set up a project from scratch using the Atom code editor and your command prompt tool, as well as gain a fundamental understanding of JavaScript by building your very own version of Tetris. This is a great course for those of you who have never touched code before or those of you with some basic understanding of JavaScript, that would like to go over the fundamentals again.

This course consists of explainer videos that will run you through concepts such as 'Explaining Variables', 'What is a Function and how we use it', 'Understanding Arrays', and many more. These explainer videos are dotted throughout the Tetris project and play when we start to discover each javaScript concept or method. These explainer videos consist of imagery and diagrams for those of you who are visual learners. There are also multiple-choice questions at the end of selected lectures.

In this game of Tetris we will be covering the following inbuilt JavaScript methods:

  • addEventListener()
  • querySelector()
  • querySelectorAll()
  • keyCode()
  • Math.floor()
  • Math.random()
  • length
  • forEach()
  • splice()
  • clearInterval()
  • setInterval()
  • some()
  • innerHTML()
  • every()
  • add()
  • remove()
  • contains()

Course Structure

19 lectures 01:34:43 total duration

All Videos

(19 lectures • 01 hours and 34 minutes)
  Introduction (Watch video)
01:45
  Setting up the project (Watch video)
05:58
  HTML basics (Watch video)
06:56
  CSS Basics (Watch video)
02:53
  Explaining variables (Watch video)
05:14
  Working with Arrays (Watch video)
04:33
  What exactly is a function? (Watch video)
04:10
  Arrow Functions and forEach() (Watch video)
03:03
  Drawing Tetrominoes using classList.add() (Watch video)
10:23
  Timers and Intervals (Watch video)
06:00
  Using Modulus to define our place on the grid (Watch video)
04:07
  Keycodes and events (Watch video)
06:07
  Choosing items from Arrays (Watch video)
03:32
  Displaying the "Next Up" Tetromino (Watch video)
09:07
  Adding a start and pause game function. (Watch video)
03:10
  Splice() (Watch video)
02:58
  splice() contact() and appendChild() (Watch video)
08:14
  Game over using some() and innerHTML (Watch video)
02:28
  Finishing Up (Watch video)
04:05

Student feedback

4.9
Course Rating

100%

0%

0%

0%

0%

Reviews

Oct 11, 2021
Great
Oct 04, 2021
nice content
Sep 08, 2021
Amazing

Your Course Instructor

Course Instructor Image

Ania Kubow

Content creator at codedamn

Content creator at codedamn

Upgrade to codedamn Pro Plan and unlock more courses for accelerated learning. Unlimited courses, interactive learning and more.

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • All exclusive courses unlocked
  • Unlimited hands-on practice
Try codedamn Pro (14-day free refund)