Code Your Holiday Cheers: Create Your Own Digital Greeting Card

At a school we currently partner with in the UK, Dr. Taylor and his Code Club students shared their holiday cheers with their school community and the BSD Education team by including student coded digital holiday cards in their recent school newsletter!

This is such a thoughtfully refreshing and environmentally friendly way to spread some holiday joy. Try out this sandbox as a cool digital “arts and crafts” activity!

We have prepared a fun activity (approximate duration: ~ 60 minutes) with resources and video tutorials so that you can do the same with your students just in time for the holiday season. We recommend this activity for ages 8 and above.

For younger students, you can do this as a class activity. For older students, you can print out or display the instructions from step 7 to challenge them to figure out and tinker with the code.

Below is the sample output that we have created at BSD:

Follow the 8 simple steps below and check out the video tutorial on how you can introduce this activity into your classroom.

Step 1:

Login to BSD Online

If you and your students already have a BSD account, simply login. If you are new to BSD Online, click on “Sign-up” to create a new account. It is advisable to login as this will allow you to save your work.

Step 2:

Introduce HTML and CSS

Spend 5 to 10 minutes to introduce or recap about the use and syntax of HTML and CSS with your students. Use these resources to help you.

Step 3:

Open sandbox mode

Direct students to sandbox mode as shown below:

Step 4:

Copying code into HTML and CSS file in sandbox

To help introduce the code to your class, we have put together the coding snippets from below. Direct students to copy and paste each of the relevant code into the correct files.

Paste this into the HTML file:

<div>
    <h1>Happy Holidays!</h1>
    <h2>Wishing you all the joy in the world!</h2>
    <img src=”https://image.flaticon.com/icons/svg/1066/1066181.svg” />
    <h3>From, BSD</h3>
</div>

Step 5:

Paste this into the CSS file:

@import url(‘https://fonts.googleapis.com/css?family=Lobster|Raleway’);
body {
   background-color: #3e4e88;
}

h1 {
   color: #e0fcff;
   font-size: 75px;
   font-family: ‘Lobster’, cursive;
}

h2 {
   font-size: 36px;
}

h3 {
   font-size: 30px;
}

div {
   width: 500px;
   height: 750px;
   background-color: #1a2c5b;
   text-align: center;
   border-radius: 5px;
   border: 6px solid #b8dff0;
   margin: 30px auto;
   padding: 20px;
   box-shadow: 10px 20px 20px rgba(0, 0, 0, 0.7);
   font-family: ‘Raleway’, sans-serif;
   color: white;
}

img {
   width: 300px;
}

Step 6:

Save your work!

Click the “Save” icon under your profile picture to save your work! This is very important so that you won’t lose any work. Remind students to keep saving regularly.

Step 7:

Time to customize!

Follow this video tutorial to learn how to customize the different parts of this digital holiday card!

1. Customize the content in HTML file:
   1. Find <h1>, <h2> and <h3> to update the text
   2. Find <img src= “ URL”/> to update the image. Use Flat Icon to find a suitable royalty free icon.
2. Customize the styling in the CSS file:
   1. Find the “body” selector to modify the background color.
   2. Find the selector <h1>, <h2> and <h3> to style the font by using:
      1. color to change the font color. Simply type in a color and sandbox will make some color suggestions
      2. font-family to change the font style. Below is a video to show you how to use Google Fonts.
      3. font-size to control the size. The “px” stands for pixels.
   3. Find the “div” selector to modify the following:
      1. width to adjust the width of the card
      2. height to adjust the height of the card
      3. background-color to adjust the color of the card
      4. border-radius to adjust the rounded corners of the card
      5. border to adjust the thickness and color of the border
      6. font-family to apply a different font style (remember you must have included this font when you import from Google Font)
      7. color to change the font color

Step 8:

Share with your community.

Once students have completed their digital cards, ask them to click on the link icon and click the toggle for “share with others” on the top right corner of their sandboxes. Alternatively, you may want to share the cards using the QR code. Simply take a screenshot of the QR code and share via a communication application of your choice.  

This project is so versatile that you can easily repurpose it after the holiday season as an event poster, invite or any other context for students to try out.

If you have any questions about this activity, reach out to us via our Intercom system located on the bottom left corner of the screen. Happy Holidays!