Thimble

Ways of the Web Hacktivity Kit

Big Picture

  1. Participants will understand that:
    • the Web is made out of building blocks that they can rearrange to create new things through an iterative process.
    • HTML is a language used to tell computers how to build webpages so that humans can consume them
    • CSS means cascading style sheets
    • Parts of a webpage include HTML, CSS, graphic assets and text content
    • The combination of an opening tag and its corresponding closing tag and the content in between is called an element
    • It is important to write code following standards so that it is accessible to different kinds of users
    • There are resources on the web for webmaking
    • What information is public on the web
    • How to verify sources on the web
    Learners will be able to :
    • Create their own webpages using the following HTML tags : <html>, <head>, <title>, <body>, <h1>,<h2>, etc, <p>, <ul> & <ol>, <li>, <img>, <a>
    • Style their webpages using the following CSS properties: positioning values, hex numbers/color, fonts/sizes, class, div

  2. The Results:

    • Learners will use Thimble to make a new project.

  3. The Event Type:

  4. Tell the story:

    In the How-to session my participants will learn how to wrangle web design, HTML and CSS by making their own web pages, swapping images, closing broken tags and creating their own how-to tutorials.

  5. Circle Up Module

    • What is the web made out of?
    • What does "open web" mean?
    • How should you protect your data on the web?
    • How does HTML & CSS allow you to be creative?
    • How did feedback help you iterate and improve your project?
    • Add your own here.

Introductions

  1. webmaker_logo

    Introduction to Webmaker

  2. Introduction to Thimble

  3. howtouse

    How to Use this Kit

  4. howtouse

    Crash Course in HTML and CSS

  5. Setting Up a Kitchen Table Event

Additional Resources

Hacktivities

  1. Icebreaker

    A Strong Wind Blows: for the Open Web step02_strongwind_thimble

  2. Diving In

    Make Your Own How-to: with ThimbleHack the Web

  3. Hands on Hacking

    Alter Ego/Evil Twin: the Opposite of Me Remix Page

  4. Playtesting and Feedback

    Learners share their projects.
    Is the user:
    • following the instructions?
    • getting the joke?
    • understanding the commentary?
    Have learners form groups and take notes.
    Start a discussion by having learners complete sentences.
    • I thought you did a nice job with/of ___.
    • You might want to improve ___.
    • Your idea was fun/interesting because ___.
    • What you made was ___ and it made me think/feel ____.
    Let your learners review each other's work.

    When they're finished with their reviews, ask them what next steps would be for each project. How can each project be iterated and improved upon?

  5. Assessment

    How did your learners do? Here is a helpful guide for assessing their work.