Thimble Hacktivity Kit

for Journalists

Contents

This is a hackable kit to help teach introductory HTML and CSS to journalists. As the journalism industry figures out how best to use technology, people in all areas of newsrooms are using the web in different ways every day. This introduction can help journalists become familiar with code they may encounter in their news organization's content management system and serve as an introduction for continued study into coding and journalism.

View other kits! View all hacktivities!

Big Picture

Participants will understand that:
- 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 Web is made out of building blocks that they can rearrange to create new things through an iterative process.
- 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 and ensure that journalistic ethics are followed 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: color/hex numbers, fonts/sizes, class, positioning values, div
The Results:
- Learners will work through the <Crash Course to HTML and CSS. They will then Hack the Web: with Thimble to work with the concepts they just learned.
The Event Type:
- Kitchen Table Event
Tell the story:

Since this kit is hackable, learners can use work with (and remix!) any individual part of the kit, or work through the entire kit. In an event or series of events using the entire kit, participants will learn how to wrangle web design, HTML, and CSS by making their own web pages, swapping images, closing broken tags, and making news articles pretty. Once learners feel comfortable with these tasks, they'll move on to the Biasing the News hacktivity and close with a hacktivity that brings together coding skills and an understanding of journalistic ethics on the web to create a Storify of social web elements.
Circle Up Module
- What is the web made out of?
- How does HTML & CSS allow you to be creative?
- How did feedback help you iterate and improve your project?
- Add your own here.

Introductions

Additional Resources

Hacktivities

Icebreaker
Welcome and introductions

A Strong Wind Blows: for the Open Web
Diving In
Hack the Web: with Thimble
Hands on Hacking
Bias the News: Give New Context
Feedback and Iteration

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?
Assessment
How did your learners do? Here is a helpful guide for assessing their work.