Introduction

In this project, you’ll learn how to use HTML and CSS to create a multi-page magazine website with a two page layout. You’ll also revisit lots of HTML and CSS techiques from other projects.

Step 1: Heading and Background

Magazine-style websites often have lots of small items on a page. First you’re going to create a heading and background for your magazine.

Activity Checklist

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

    The project should look like this:

    screenshot
    screenshot
  • Let’s add a heading.

    You can think of a better title for your magazine.

    screenshot
    screenshot
  • Can you style the heading?

    Here’s an example, but you can choose your own style:

    screenshot
    screenshot
  • Now let’s create an interesting background using a gradient and choose a font for the magazine.

    Here’s some example style as a reminder of how to create a gradient:

    screenshot
    screenshot

Save Your Project

Step 2: Creating Columns

Websites often use multiple columns. Let’s create a two column layout for your magazine.

Activity Checklist

  • First create two column divs.

    Add the highlighted HTML to index.html:

    screenshot
    screenshot
  • Now style the column divs so that one floats to the left and the other floats to the right.

    screenshot
    screenshot

    Each column is less than 50% so there’s room for padding.

    You’ll need to add something to a column to see the effect.

  • Let’s add a kitten picture to the top of column 2.

    screenshot
    screenshot

    Notice that the kitten image is positioned about half-way across the page, in the second column.

    It’s a bit big though!

  • Let’s use max-width: to make images fit within their container.

    Add the following style to style.css.

    screenshot
    screenshot

    This will apply to all images you use in your magazine, not just the kitten.

  • Now add a class photo to the image so that you can style it:

    screenshot
    screenshot
  • And style the image to add a shadow and a twist to make the photo pop out of the page:

    screenshot
    screenshot

    Make some changes until you like the result.

Step 3: Style magazine items

Let’s make the layout a bit more interesting.

Activity Checklist

  • Add a div around your image with a class and add a h2 heading:

    screenshot
    screenshot
  • Now style the item and heading.

    Here’s an example, but you can make changes:

    screenshot
    screenshot

Save Your Project

Challenge: Add items to the left column

Can you add a ordered list and a gradient text sticker to the left column?

Here’s an example:

screenshot
screenshot

This is the code for the example, but you can change it or come up with your own.

HTML:

screenshot
screenshot

CSS:

screenshot
screenshot

Save Your Project

Step 4: Add a second page

Let’s add another page to your magazine website.

Activity Checklist

  • Add a new page to your project and name it page2.html:
screenshot
screenshot
  • Page 2 will be quite similar to the first page of your magazine so you can copy the html from index.html and paste it into page2.html.
screenshot
screenshot

Notice that both pages use the same style.css so they will share styles.

  • Change the <h1> title for page2:
screenshot
screenshot
  • Now you’ll need links between your pages to you can get to page 2 and back to the front page.

Go back to index.html. Add a link inside a div in column 2 in index.html:

screenshot
screenshot
  • Test that you can click on your new link and move to page 2 of your magazine.

Challenge: Fill in your second page

Here’s the code for the examples, but you can change the divs or come up with your own ideas.

screenshot
screenshot

Click the images icon to see the images that are available to use:

screenshot
screenshot

Remember that you can upload your own images to use. Make sure you have permission to use any images that you upload.

screenshot
screenshot

Step 5: Add an animation

Let’s add a fun animation to your magazine.

Activity Checklist

  • Go to index.html and include the greenrobot.png image at the top of your page.
screenshot
screenshot
  • Now add the CSS to animate your robot:
screenshot
screenshot

Challenge: Add another animation

Can you add an animation to the second page of your magazine?

screenshot
screenshot