Introduction

In this project, you’ll be introduced to HTML & CSS by learning how to make your own customised birthday card.

Step 1: What is HTML?

HTML stands for HyperText Markup Language, and is the language used to make webpages. Let’s have a look at an example!

Activity Checklist

  • You’ll be using a website called Trinket to write HTML. Open this Trinket: jumpto.cc/web-intro. If you’re reading this online, you can also use the embedded version of this Trinket below.
  • The code that you can see on the left of the Trinket is HTML. On the right of the Trinket you can see the webpage that the HTML code has made.

    HTML uses tags to build webpages. Can you see this HTML at line 8 of your code?

    <p>Hi. My name is Andy.</p>

    <p> is an example of a tag, and is short for paragraph. You can start a paragraph with <p> and end a paragraph with </p>.

  • Can you spot any other tags? One other tag you might have spotted on line 9 is <b>, which stands for bold:

    <b>running</b>

    Here are some more:

    • <html> and </html> mark the start and end of the HTML document;
    • <head> and </head> is where stuff like CSS goes (we’ll get to that later!);
    • <body> and </body> is where your website content goes.

    screenshot

  • Make a change to one of the paragraphs of text in the HTML (on the left). Click ‘Run’ and you should see your webpage change (on the right)!

    screenshot

  • If you have made a mistake and want to undo your changes, you can click the menu button and then click ‘Reset’. Try it!

    screenshot

Save Your Project

You don’t need a Trinket account to save your projects!

If you don’t have a Trinket account, click the down arrow and then click ‘Link’. This will give you a link that you can save and come back to later. You’ll need to do this every time you make changes, as the link will change!

screenshot

If you have a Trinket account, the easiest way to save your webpage is to click the ‘Remix’ button on the top of the Trinket. This will save a copy of the Trinket on your profile.

screenshot

Challenge: Add another paragraph

Can you add a 3rd paragraph of text to your webpage, below the other 2? Remember that your new paragraph should start with a <p> tag, and end with </p>.

Here’s how your webpage should look:

screenshot

Can you add bold and underlined text to your new paragraph? You should use <u> and </u> for underlined text.

Save Your Project

Step 2: What is CSS?

CSS stands for Cascading Style Sheets, and is the language used to style webpages and make them look nice. You can link your webpage to a CSS file in the <head> of an HTML document like this:

screenshot

Activity Checklist

  • CSS lists all of the properties for a particular tag. Click the ‘style.css’ tab to see the CSS for your webpage.

    screenshot

  • Find this code:

    p {
        color: black;
    }

    This CSS code has one property for paragraphs, which is that the text colour should be black.

  • Change the word ‘black’ in the CSS to ‘blue’. You should see the text colour of all paragraphs change to blue.

    screenshot

Save Your Project

Challenge: Add more style

Can you make the paragraphs of text orange? Or the background grey?

screenshot

Save Your Project

Step 3: Making a birthday card

Let’s use what you’ve learnt about HTML and CSS to make your own custom birthday card.

Activity Checklist

  • Open this Trinket: jumpto.cc/web-card, or use the embedded version below if you’re reading this online.

Don’t worry if you don’t understand all of the code. This birthday card looks pretty boring, so you’re going to make some changes to this HTML and CSS.

  • Click the button on the front of the card, and you should see it open to reveal the inside.

    screenshot

  • Go to line 13 of the code. Just like in the earlier example, you can edit any of the text in the HTML to customise the card.

    screenshot

  • Can you find the HTML for the robot image? (Hint: it’s on line 16!) Change the word robot to sun, and you’ll see the image change!

    screenshot

    You can use any of the words boy, diamond, dinosaur, flowers, girl, rainbow, robot, spaceship, sun, tea, or trophy.

  • You can also edit the CSS of the birthday card. Click on the tab for “style.css”. It begins with all of the CSS for the outside of the card. Change the background-color to lightgreen.

    screenshot

  • You can also change the size of an image. Go to line 29 of the CSS, and change the width and height of the outside image to 200px (px stands for pixels).

    screenshot

  • The font can be changed too. Go to line 24 and change the font-family to Comic Sans MS and the font-size to 16pt.

    screenshot

    You can use other fonts like arial, Impact and Tahoma.

Save Your Project

Challenge: Create a personalised card

Use everything you’ve learnt about HTML and CSS to finish making a personalised card. It doesn’t even have to be a birthday card, it could be for any occasion!

Here’s an example:

screenshot

You can find more CSS colour names at jumpto.cc/colours

Save Your Project

Now that you’ve finished your card, you can share or email it to someone.

screenshot