Thimble

Hack the Web:

with Thimble

Steps

  1. step02_projectsThimble
    Thimble helps you edit live

    Start hacking a news article. We have a Thimble page all ready for you to hack. Learn how to transform a blob of text into an article format welcome on any news organization website. Read through the comments on the left side of the page for tips on how to edit the article.

  2. Start editing some HTML code

    Feel free to work alone or in a team. Play around styling the text. Here are some changes you can make to this example Al Jazeera article:

    • Make the first sentence the main headline
    • Make the second sentence the secondary headline
    • Add paragraph tags to the paragraphs
    • Make the last modified information italic
    • Put this image (http://www.dw.de/image/0,,16233560_401,00.jpg ) in under the last modified information
    • Make “Tight race” a second headline
    • The sentence starting “If another party wins ... “ is a quotation from http://www.reuters.com/article/2012/09/11/us-dutch-election-idUSBRE88A0UW20120911
      Add the tags to make it into a blockquote.
    • “Parties In The Dutch Election” is a second headline and the party names should be in an unordered list

  3. CSS is next!

    After editing the HTML, you can use this Thimble to start working on editing CSS. Here are some example edits you can make:

    • Make the headline font Arial
    • Make the "Last modified" font blue and size 8px
    • Give the blockquote a background colour of #E0E0DE, font size 0.8em and font family Georgia
    • Centre the "Parties In The Dutch Election" heading and make it the Georgia font
    • Give the unordered list a background colour of #F2D59D

    To practice CSS skills even more, try this a challenging CSS assignment. Try to make the list of Dutch parties into an info box. To do this you will need to use properties like padding and margin. Refer back to the CSS cheatsheet for help.

  4. Wrapping up
    step03_thimbleInterface

    Session facilitators will float around to help learners that get stuck. In the upcoming Hands on Hacking hacktivity, learners will have a specific task to complete, so for now, the focus is on playing with Thimble and getting used to the interface.

    Extra credit: Have learners publish their projects and post them to a blog or save links in an Etherpad. Encourage learners to create their own Thimble using text from a story they've worked on or copying and pasting from their favorite site. See if they can copy, or improve on!, the formatting of the text on the original page.

Materials

Discussion

Have participants talk about their hacks and display their pages. Ask them what they had to do to create their project. Reinforce the idea that in HTML, elements have opening and closing tags. Ask learners why syntax and web standards are important.

Following the presentations, facilitators should direct participants to other resources in their community or online to learn more about hacking and web design/development. Provide individual constructive feedback during presentations.