Introduction

In this project, you’ll create a set of linked rooms where each room is a different web page which you can decorate with HTML.

Instructions: Click the doors to move between rooms.

Step 1: Linking to another web page in the same project

Web projects can be made up of lots of HTML files linked together.

Activity Checklist

  • Open this trinket: jumpto.cc/web-rooms.

    The project should look like this:

    screenshot
    screenshot
  • The trinket should autorun and you will find yourself in the Hall:

    screenshot
    screenshot
  • Look at the list of file tabs for this trinket. Can you see tvroom.html? Click on it.

    screenshot
    screenshot

    This is another html file in the same project.

  • To get to tvroom.html you need to add a link in index.html.

    Add the highlighted code inside the <div> with the class room:

    screenshot
    screenshot
  • Test your trinket by clicking on the TV Room link to see the tvroom.html webpage.

    Note that tvroom.html also has its own tvroom.css style file which defines the layout for this page.

    screenshot
    screenshot

Save Your Project

Step 2: Add another room

Now let’s add another room, a Games Room.

  • Click on the add page + button:

    screenshot
    screenshot

    Type gamesroom.html as the page name:

    screenshot
    screenshot
  • The HTML for the Games Room is very similar to tvroom.html so copy that and paste it into gamesroom.html.

    Edit the highlighted items so they say Games not TV:

    screenshot
    screenshot
  • Your gamesroom.html now uses gamesroom.css which doesn’t exist yet.

    Create gamesroom.css by clicking on the add page + button.

  • The CSS for the Games Room is very similar to tvroom.css so copy that and paste it into gamesroom.css.

    screenshot
    screenshot
  • Add a link from the Hall to the Games room:

    screenshot
    screenshot
  • Test your project by clicking on the Games Room link

    The Games Room should look like this:

    screenshot
    screenshot

    Not very exciting, but you can fix that in the next challenge.

Save Your Project

Save Your Project

Step 4: Adding a background image

Let’s decorate the hall with a background image.

Activity Checklist

  • Edit the style.css to add a background image to the Hall:

    screenshot
    screenshot

    The image will be repeated to fill the whole room.

Save Your Project

Challenge: Add wallpaper to the Games Room

Can you decorate the games room with a background image?

You can use the space-invader.png background image which is included in your project.

You’ll need to:

  • Add a background-image: to the .room CSS for the Games Room.

The decorated room should look like this:

screenshot
screenshot

Save Your Project

Challenge: Make it yours!

Add more rooms to your project. Remember that you can use copy and paste to save time and then just change the things that need to be different.

For each room you will need to:

  • Create a .html file
  • Add door links to and from the new ‘room’
  • Create a .css file with the styles for your new room and its doors

You can change the background-color: for each room. Click on the images icon to see the background images you can choose from:

screenshot
screenshot

Save Your Project