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
5.0
1 rating
864 developers learning
Course Creator: Ania Kubow

Hang on...

Heads up!

This is an official course from Frontend Web 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

Course Reviews

Your Course Instructor

Course Instructor Image

Ania Kubow

Content creator at codedamn

Content creator at codedamn
codedamn logo

We ♥ quality. And we would love to see your growth. Hence, codedamn comes with a pro plan for advanced and accelerated learning!

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
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice
Try codedamn Pro (7 day free refund)