Digital Unions

Tutorial and Resources

What are we going to do?

In this hands-on tutorial you'll create your own digital postcard. Think of it like a digital invite, telling your friends about the opportunties for developing digital skills.

You'll be introduced to the main languages of the web: HTML, CSS, and JavaScript. Once you've created your own remix of the digital postcard, you'll be able to share it with friends and family online.

Here's an example:



You will need

Before you get started make sure you have:

Create Your Own Remix

CodePen is a tool that allows you to write code in your web browser. You can use it write and edit HTML, CSS, and JavaScript code. Any changes you make will automatically update on the page.

CodePen encourages forking other peoples code. This means taking a copy of someone else's code so you can make you own changes and experiment with it. It’s a great way to play around with code created by other developers.

Let's fork a copy of the example digital postcard.

  1. Go to the digital postcard on CodePen
  2. Click the "Fork" button

Now you'll be able to play around with the code. If you make a mess and want to start fresh template, just go back and fork another copy.

Step 1 - HTML

HTML stands for HyperText Markup Language. It's the way we describe the structure and content of a page.

Get remixing the HTML. Try making these changes:

  • Customise the name on the invite
  • Choose a different logo or image
  • Create your own message on the front of the card
  • Customise the back of the card
  • Sign the card with your name
  • Put your name at the bottom, let people know you made it!

Step 2 - CSS

CSS are Cascading Style Sheets. These describe the way a page looks. If you change the CSS code it will change the design and layout of the page.

Now remix the CSS code. Try making these changes:

  • Make the background a different colour
  • Change the font used for the main text
  • Try changing the font size of the paragraphs on the back of the card
  • Choose a different colour for the the button
  • Make the button have rounded corners (hint: border-radius: 15px;)

Step 3 - JavaScript (Extension Activity)

JavaScript is the programming language used by all web browers. We can write code that makes our page interactive and dynamic.

Now remix the JavaScript code. Try making these changes:

  • Currently, the web browser is ignoring our JavaScript code because we've "commented: it out. Remove the /* from line 6, and the */ from line 11
  • The JavaScript is now active - try refreshing the page and watch what happens
  • Try altering the value inside fadeIn(). How does changing the number change the result?

This JavaScript makes use of a code library called jQuery. It's one of the most popular free JavaScript libraries, over 95% of all websites use it.

What next?

More about JavaScript

Learning more about JavaScript, and web libraries like jQuery are a great next step. Try this interactive walkthrough of the fundamentals of jQuery, or this tutorial video explaining jQuery.

Art and Design

You can use web technology to create interesting art. Try creating web animations using Paper.js, or explore the Processing.js library for processing and visualising data from the web

Web Games

Building games for the web is easier than ever before. Try Making A Goblin Game with HTML5, or Play My Code allows you to see the code behind HTML5 games other people have made.