2- Create an HTML Adventure

Activity Progress:

Let’s check out my HTML Game:

Download the game: Sonic Game

The video below explains how the game works.

Step 1: Make Your Video Game Storyboard

Make sure to ask for the worksheet and watch the video below.


Step 2: Create Your HTML and CSS Files

The game will be built with these files. This video shows you how to make them.


Step 3: What is Jsfiddle? Starting Your Code

Click here to open https://www.jsfiddle.net

This is how we can play with HTML and CSS and see how they work immediately.


Step 4: Creating Your Title

Your game needs a Title. This is how you will create the Title bar for each page of your adventure.


Step 5: Save Your Progress!

Make sure to save your progress on your computer so that you can play it on the computer once you are done.
JSFIDDLE is NOT saving your work.


Step 6: Create Your Images With Canva

Ignore my instructions about logging into the VGDC account.
If you do not have a password for Canva, please ask an instructor for your login.


Step 7: Creating an Assets Folder

Assets is another word for objects that you need.
This is where we will store the images you create in Canva.


Step 8: Making Your Start.html Image

We will use Canva to create the image for your first page.
It needs to be 500 pixels wide and 500 pixels tall.


Step 9: Finishing Start.html File

Once you complete the start.html file, the other files are pretty easy to do.


Step 10: Building the Rest of the Game

This video explains how to build each page after the start page. If something doesn’t make sense, please ask for help.


When you are finished with your game, upload a zipped file into the assignment.
If you don’t know how to zip a file, ask help from an instructor.