A simple template-format guide to programming in JavaScript for beginners

About

Over the years I've had lots of people ask me how to program, and while I've always tried to find online courses or even find time to teach people myself, online courses often aren't free or are inconsistent and my schedule gets busier and busier. That being said, this was important enough to me that I've set aside a week to create an intro to programming course. The course contains ten lessons split across two chapters. In total it's roughly 60 pages of an intro to programming textbook. It's aimed at people with no programming experience, and very little knowledge about computers in general is required. The course takes you from learning the syntax of variables all the way to creating your first game. The difference between this course and the interactive courses I'll list below is the end goal. This course is less strectured, and encourages you to break things and be creaive. By the end you'll have a file you can share with other people or even host on your own website, and it can be anything you want.

Other Resources

This is by no means a perfect or complete course. If you finish chapter 10 and want more, I'd be more than happy to create more content or just give advice if you'd like. I will also outline some resources that may be helpful in your introductory phase as well as later on as an experienced programmer.

• • Apple's Swift Playground is a great resource for being introduced to programming, and I would highly recommend this in addition to or even instead of my own course especially for younger audiences.
• • Free Code Camp has thousands of amazing interactive tutorials for anybody from a first time programmer to experienced full stack developers looking to learn a new technology.
• • Kahn Academy is yet another
• • Codecademy is another great online interactive course.
• • MDN Web Docs has information on JavaScript APIs I may not have covered in the course. For example, you can click on Math on the originally linked page to see all of the functions available in the Math API.
• • Stack Overflow is a forum dedicated to programming problems. If you Google an error message or a concept you're curious about and add "JavaScript" to the search, you're bound to end up on a Stack Overflow page at some point. But if you can't find what you're looking for there feel free to shoot me an email.
• • HTML Color Codes will make it easier to pick and visualize colors when you get to chapter 2.

Advice

Learning to program is difficult, mostly because it's a brand new way to think about things. It's approaching problems from a different mindset than you're used to. I'm a big believer that anybody can do it, but it will just take practice. It would be amazing if you got through all ten lessons without any struggle, but an experienced programmer will breeze through in a day and be annoyed I didn't use common shortcuts. And while it's certainly important to keep at it and not get discouraged, it's also important to take breaks. I can't tell you how many times, even while developing this guide, I've been stuck on a problem I just couldn't easily solve but taking a break, or even just going to bed and trying the next day solved it for me easily. Your brain needs time to process all of this information, and sometimes that needs to happen before you can use it to solve the next problem. My last piece of advice would be to break things, tweak things, and build things on your own. All of the code in this guide can be changed, and you can always create your own functions, animations, etc. Worst case scenario you break the file and need to undo your changes.

Getting Started

The language we'll be using is JavaScript, which means there are very few tools you'll need to get started. To begin download the required files from here and double click to unzip them. Once unzipped you'll see a "chapter1" folder, open that and then open the "lesson1" folder inside. Double click the index.html file to open it in your browser, then double click main.js and begin reading! We'll continue getting started over there. See you in lesson 1!

Table Of Contents

Chapter 1

In the first chapter we'll teach the basics of the JavaScript language. Syntax, functions, loops, and other useful tools. By the end of the chapter you'll technically have all the tools required to build just about anything, but probably not the experience.

Lesson 1 - Intro, Comments, Logs

Lesson 2 - Functions, APIs

Lesson 3 - If statements, For loops

Lesson 4 - Arrays, Objects

Lesson 5 - Scope

Chapter 2

In the second chapter we focus mostly on programming concepts and practicing what we learned in chapter one. To keep things interesting we'll practice by creating animations and games instead of boring forms and text interfaces.

Lesson 6 - Canvas Basics

Lesson 7 - Data Structures & Loop Practice

Lesson 8 - Canvas Animations

Lesson 9 - First Game

Lesson 10 - Bonus