Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course:
The "Feed-A-Star-Mole HTML" Lesson is part of the full, Build a Game Project: Feed-A-Star-Mole course featured in this preview video. Here's what you'd learn in this lesson's course:

Brian begins writing the HTML for the game and introduces the data attribute.

Get Unlimited Access Now

Transcript from the "Feed-A-Star-Mole HTML" Lesson

>> Brian Holt: So I'm gonna start up here with a section or you could have it be a div, it doesn't really matter. And I'm just going to call it bg for background. And this is gonna be where I put my background.
>> Brian Holt: In here, I'm gonna have a bunch of what I called whole containers.

>> Brian Holt: I gave them each an ID. So let's just do that, an ID of equal to something like, hole-0. Remember from Jen's class that an idea is unique for each one of these, right. So each one of them is going to be hole zero, hole one, hole whatever.

And Inside of that, stadium, put that on the whole container, put that on the image. I have multiple divs here, okay. So inside of that I have another div that's going to be the hole, class = "hole".
>> Brian Holt: The id = "hole-0".
>> Brian Holt: And then here inside of that, I'm gonna have an image.

>> Brian Holt: So, this is gonna be an image, and right now I'm just gonna put into something like mole-hungry or something like that.
>> Brian Holt: And it's all just gonna be mole.
>> Brian Holt: Okay, now I need 12 of these.
>> Brian Holt: Which is a lot of copying and pasting, right? So I could sit here and copy and paste this a bunch, and then go back and change all the numbers.

Let's just go ahead and grab it from, rather than sit here and write all of it out, we have mole.html. I am going to grab it from out of here.