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.
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:
After editing the HTML, you can use this Thimble to start working on editing CSS. Here are some example edits you can make:
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.
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.
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.