TOPIC 1: GAMING SYSTEMS
Imagine that you were meeting with someone in a foreign country who had never played a video game. Not even Pac-Man or Mario. They’ve never played a single video game. You wanted to describe video games, so you started talking about XBox and Nintendo and Wii, but the person just looks back at you with a blank stare. They’re completely confused. They don’t even know what an XBox is, or a Nintendo, or a Wii. So how would you describe these things to someone who has no idea? When you think of an XBox, or a Nintendo, or a Wii, what do they all have in common? What are they?

TOPIC 2: CROSSOVER GAMES
Whenever you see the same game show up in different systems, you may not realize it, but that took a lot of hard work. A game that was designed to work for XBox is not exactly a game that was designed to work for Nintendo. And vice versa. Each game that gets programmed has to be designed for a specific system based on the programming rules of that system. Does that make sense or are you starting to get confused?

TOPIC 3: THE ONLINE SYSTEM
When you go online to play games, you often go to a specific website to find a specific game. Even if it’s a game you can also play on another system, the fact that you can play it online means that someone took the time to program it to work online as part of a web page. In this class, you’re going to be learning about how to program things that work online. And that means you’ll have to know how to set up a web page before you can try and put things in it.

TOPIC 4: SOURCE CODES
Every single web page, including this one, is built on a code. Most people never see that code because they don’t need to. Most people just want to look at the stuff on the page like images, videos, and text. But if they wanted to see all that code behind the scenes, there’s an easy way to do it. Follow the teacher’s instructions to learn how you can look at ANY source code on ANY web page (including Google, Instagram, YouTube, or any of your favorite websites).

TOPIC 5: HTML IS THE SKELETON
So let’s stop and think about this for a second. You can’t create something fun to play on a web page unless you actually have a web page. And in order to create a web page, you have to know a coding language called HTML, or Hyper Text Markup Language, which many people refer to as the “skeleton” of a web page. Without a skeleton, you could never stand up, move around, or even look the way you look. Today’s design will ONLY teach you about HTML (the skeleton code), how to set it up, and how to add things. During the next lesson, you’ll learn how to make the skeleton code look a little nicer with a completely different coding language.

STEP 1: SETTING UP FOLDERS
Find your U:Drive and create a New Folder called VGD2 (written in ALL CAPS). Go into your new VGD2 folder and create five subfolders called (1) LG5_basicjs, (2) LG6_canvasjs, (3) LG7_threejs, (4) LG8_gamejs, and (5) misc. Throughout the semester, as we build different files and documents, you will store each one in the appropriate folder so that you stay organized. You will even be graded on the organization of your folders near the end of LG5, so help each other stay organized.

STEP 2: FINDING NOTEPAD
Go to the Start Menu at the bottom left corner of your computer monitor and look for a program called Notepad (but not NOTEPAD++), then blow it up (or maximize it) so that it’s the only thing on your screen.

STEP 3: SAVING A FILE
Go to the “File” tab at the top of Notepad and click “Save” or “Save As” to save your document. You will be saving this file as “lesson1_skeleton.html” in your “LG5_basicjs” folder. You must not forget the “.html” at the end of the file name that you’re saving. The teacher will be doing this on the screen so that everyone can follow along.

STEP 4: CHANGING FORMAT
Go to the “Format” tab at the top of Notepad and click “Word Wrap” so that your text doesn’t go off the page. Then choose a font type and a font size (20 or higher is best) that you can read clearly. Do not choose a fancy font type because this isn’t about trying to look pretty or weird. This is about finding a font that is the easiest for both you and your computer’s browser (like Google Chrome, Firefox, or Microsoft Edge) to read clearly.

STEP 5: CATCHING EVERYONE UP
If you have successfully completed everything from Steps 1-4, there’s a good chance at least a few people in the room are not as fast as you. One of those people could even be your partner. Look around to see who needs help so that we can get everyone caught up. The sooner everyone is caught up, the sooner we can get started with some real programming.