Open Thinkering



More on P2PU’s School of Webcraft

HTML HuntingAs I’ve mentioned, I’m dipping into P2PU’s School of Webcraft. I actually know how to do most of the stuff so far asked of me in the tasks, but I really value four things involved in the process.

  1. The social element (you don’t seem to get this at, for example, Codecademy)
  2. Filling in gaps in my knowledge (I didn’t learn any of this sequentially; sometimes I’m missing some building blocks)
  3. Reviewing other people’s work (some people obviously do the bare minimum, others are super-dedicated)
  4. The opportunity to become a mentor (once you’ve learned something, there’s the opportunity to then teach it)

An example of the second item on my list is the P2PU task Some Tags for You to Meet. I learned about the <time> and the <q> HTML tags, the former being used to provide a machine-readable way of parsing the start of, for example, an event. The latter is used for short quotations that are included within a paragraph of text. Handy.

There’s plenty more of these on the Mozilla Developer Network but, for the time being that’s enough. ๐Ÿ™‚

If you’re an educator you should be all over P2PU like a rash. Seriously.

Get that cool Google-style ‘reveal’ effect on your site.

Go to See how certain elements are revealed only when you move your mouse? That’s รผber-cool in my book. I wanted the same for the main part of my site –ย but have the coding skills of a rhino. ๐Ÿ™

Fortunately, my good friend Paul Lewis (@aerotwist) is a bitย lot of a coding ninja. In fact, he’ll soon be packing his bags for Sweden to work for Fi, one of the foremost web design companies in the world. He took about 3.1 seconds to knock up the relevant scripts, etc.

So now, if you go to you’ll notice that the bullet points fade in when you move the mouse. Classy. ๐Ÿ˜€

I’ve rewritten the README file included in the zip file below to make it more understandable by mere mortals, but you’ll still need to know your way around HTML. I’ll do my best to help if you get stuck and add a comment below, but I’m making no promises!

A quick way to add a ‘sparkline’ to your blog.

See that little graph thing at the bottom of this blog? It’s called a sparkline and shows the number of visitor over the last month. Here’s how to add one to your own blog, courtesy of Google Analytics and a WordPress plugin!

The only slightly tricky bit is replacing:


It shows you how to do it here, but it over-complicates things and is slightly out-of-date.

If you want to brush up on your HTML, you could do worse than this guide! ๐Ÿ˜€