Instruction Challenge


Create a set of visual instructions for your fellow students from scratch using HTML & CSS. The instructions must be for a task related to journalism.

PartDueTime needed
A Design &
B Documentation
Nov 23 2015, 11:59pm2.5 hours (150 minutes)
C FeedbackNov 24 2015, 11:59pm40 minutes
D ResponseNov 25 2015, 11:59pm20 minutes


This assignment aims to build understanding of the following:

  • kerning
  • leading
  • headings
  • classes
  • lists
  • line-height
  • letter-spacing
  • Assignment details

    Part A: Design

    Part B: Documentation

    Part C: Feedback

    Part D: Response

    Examples of Student Work

    Click on any of the images below to see a full example of Parts A and B of the Challenge.

    Instruction Challenge by Annabelle Guitierez

    Professional Examples


    Part A: Design

    Step 1: Read

    Read the following book sections:

    Step 2: Find

    Find instructions for a task related to journalism to share with your classmates.

    2a. Think about things you are interested in that relate to journalism, and search for them on Wikihow.

    2b. Choose instructions for a simple task, containing 5-10 steps.

    2c. Think of a name for your website that relates to the kind of instructions your site will show.

    2d. Copy the instruction text from wikihow into the text editor of your choice.

    2e. Choose a two colors using split complement in Adobe Color.

    Make three tints of those colors (25%, 50% & 75% of the full color value), plus black and white to use for all elements of your website, including:

    Write down the hecadecimal references for each of your colors and tints. You will need to use them later.

    2f. Format the instructions to fit in your new website. They must contain:

    Step 3: Create Accounts

    3a. Create a Mozilla Thimble account.

    3b. Create a Flickr account.

    Step 4: Find resources

    4a. Search for images on Flickr and one video on Youtube that help illustrate your instructions.

    4b. Record the embed code for every Flickr image you find. It is in a box like this:

    And look like this:

    4c. Copy the entire contents of the 'share html' code box on Flickr, and paste it into the program called TextEdit, like in the image above.

    4d. Copy the part of the code that begins 'https://farm8' and ends with '.jpg'. This is the part of the code you will need to use the image in your project.

    4e. Repeat these steps for every image you find on Flickr that you want to use in your instructions.

    Note: If you can't find images or video that are relevant, you can make your own, and upload them to Flickr and Youtube.

    Step 5: Create website

    5a. Log in to Mozilla Thimble.

    5b. Open the Instruction Challenge on Mozilla Thimble and click the 'remix' button in the top right hand corner. You will see a screen that looks like this:

    5c. Follow the instructions in the left panel. When you make changes to the code on the left side, the web page on the right side will change.

    5d. Replace the colors in the webpage with the the colors and tints you chose earlier.

    5e. Save your work, and copy the link that appears when you save. Paste the link into a text editor of your choice and save it on your computer or hard drive. You will need to add this link to your assignment submission on Webcampus.

    5f. Take a screenshot of your finished page. You will need to add this to your assignment submission on Webcampus, too.

    Step 6: Record

    Keep track of the colors you've used in your website.

    6a. Write a list of the colors you have used in your website in the text editor of your choice.

    6b. Repeat these steps for each color on your list. The end result of this process should be a list that looks like this:

    Colors in my Code Challenge

    • NAVY BLUE = #1C4A63
    • AQUA = #1593A1
    • LIGHTER NAVY = #1C597A
    • YELLOW = #1E904

    You will need these numbers for Part B of your challenge.

    Step 7: Prepare

    Prepare your screenshot for uploading to WebCampus.

    7a. Crop your screenshot so only your finished instructional website is in the image. Your screenshot should not contain the code panel.

    7b. Optimize your photo or screenshot for correct display in Webcampus. Make sure your saved screenshot or photograph has the following details:

    7c. Save the optimized copy of your screenshot on the computer and in Google Drive.

    Part B: Documentation

    Step 1: Write

    Write in a text editor of your choice (for example Microsoft Word, OpenOffice, or Google Documents), one to two sentences (50 words) about your website.

    1a. Add the list of hexidecimal references to your reflective writing document.

    1b. Answer one of the following questions about your webpage:

    1c. Save this text document on your computer/hard drive.

    Step 2: Submit

    Click on the 'Webcampus Discussion Board' link at the top of this page.

    2a. Create a new thread by clicking the 'Create Thread' button in the top left corner of the Discussion Board forum.

    2b. Add your optimized image to your thread.

    2c. Copy and Paste your writing from the text editor to WebCampus.

    2d. Create a link to your Code Challenge on Mozilla Webmaker, and add it to your thread.

    2e. Save your thread.

    Part C: Feedback

    Step 1: Look

    Read and view the Challenges posted by your class members in the discussion forum.

    Step 2: Choose

    Choose three of your fellow students threads to give feedback comments. Do not comment on threads that have three feedback comments already; this ensures every submission entry will get three answers.

    Tip: If you give feedback early, you will get more choice as others will not have had a chance to give feedback yet.

    Step 3: Write

    3a. In the text editor of your choice, write your feedback. Provide the following information in your feedback:

    3b. Save these answers on your computer or removable hard drive.

    Step 4: Submit

    4a. Create a reply thread for each of the three Challenges you chose to answer by clicking the blue ‘Reply’ button on the bottom left corner of the thread.

    4b. Copy and paste your answers from your text editor into the reply threads for each question and submit your reply thread.

    Part D: Respond

    Step 1: Read

    Read the feedback posted in your discussion forum thread.

    Step 2: Think

    Think about the feedback you received, and identify which comments were most helpful.

    Step 3: Write

    3a. In the text editor of your choice, write a response to the feedback. In this response:

    3b. Save this response on your computer or removable hard drive.

    Step 4: Submit

    4a. Create one reply comment for all the feedback you received by clicking the same blue ‘Reply’ button used in Part C. This will add a reply below all of the comments you received.

    4b. Copy and paste your response from your text editor into the reply thread and submit your reply thread.