EAK Hackable Valentine’s Cards
Code your own heartfelt creation, and share it with a loved one!
Introduce your students to HTML and CSS - coding languages used by professional web developers - in a fun and collaborative way.
Key words: code editor, HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), hexadecimal
Activity 1:
1. Go to eraseallkittens.com/hackable-cards
2. Select the card which appeals to you most. You will be able to replace the text, not the image.
3. Click on your selected card. (You can always come back and choose another card in the future.)
4. You will see a new window. In the code editor window (on the left hand-side), change the black text in the script. Depending on the card you have chosen it will look something like the below:
<body>
<p>Dear Flynn,</p>
<h1>I like you more than cupcakes</h1>
<p>Happy Valentine’s Day<br>
- Bert</p>
<body>
Make sure your personalised message is polite and friendly. Remember, you should never share anything online which may be offensive, cause alarm or distress to others.
5. In the preview window (on the right-hand side), see how the modifications you make to the code change the appearance on the card.
6. Play with the HTML syntax. What happens when you change the black text in the body <body>, header <h1>, paragraph <p>.
When you are happy with your design, simply click the tick.
8. Share your card via Facebook, Twitter, WhatsApp and/or download your card. You can then print and post it OR email it as an attachment.
You’ve done brilliantly to hack and share a Valentine’s Day card. ‘Pick a card’ and choose another design to remix in ‘Basic’ mode OR why not move on to Activity 2 where you’ll program in the ‘Advance’ mode with CSS - see below.
Activity 2
1. Click the ‘Advanced’ mode.
2. Use the same method of modifying the text in black. In the Header, change the font size and colour. What happens when you put a 4 in front of 70px (470px).
font-size: 470px;
font-family: 'Norican';
color: black;
text-align: center;
3. Now change the text-alignment. You can choose ‘center’, ‘left’ or ‘right’.
4. Change the font. Norican, OpenSans, KGNextToMe are incorporated into the cards. You can also try additional fonts such as: Arial, Verdana and Helvetica.
5. Make the same changes to the Paragraph. Play about to see what effects you can create using CSS.
6. Now change the gradient colours of the background given in hexadecimal (hex) colour codes: linear-gradient (#F9F1DH, #DDC9HC). Modify the hex using a random selection of numbers and letters (from A to F only) or visit color-hex.com for more colour ideas.
Extension Activity:
Develop your 21st Century Skills such as critical thinking, creativity and problem solving skills with Erase All Kittens. Students can trial the online game here.
Watch this video to find out more about a career as a Web Developer.
This resource has been developed by Erase All Kittens, available as a downloadable PDF here.