Skip to main content

Mozilla Thimble - the best way to understand HTML is....

Although when we talk about coding we often think students need to learn programming languages, getting to grips with the HTML (hypertext markup language) that is used to build the World Wide Web is probably one of the most useful and engaging places to work.

When I need to make a website, my current tool of choice is the new Google Sites setup because although it limits what I can do in many ways, it gets the job done and makes a multi-page site with all of the clutter behind the scenes that I shouldn't have to worry about taken care of. With the old Google Sites though I had the ability to dig underneath and manually add my own HTML code in to get the result "just so" - and that knowledge of learning to code in HTML has been incredibly useful to me. That's one reason, when we talk about students learning to code, that I am so passionate about teaching how to write your own web and understand HTML. Even if all you do is tweak that YouTube embed code to make it the way you want it, the confidence to understand tags and muck about with them is really useful.

Thimble by Mozilla, is my favourite tool not just to teach coding in HTML, but also to actually hand code little bits myself (handy for knocking up an email signature for example).


The model is simple - on the left panel you can edit your code and on the right you see the page build itself live as you go.


The editor colour codes things, so if you make a mistake it generally does help you spot it (much easier than writing it in Notepad and then worrying you can't find your missing /> in your masterpiece.


The viewer updates as you type (although it is kind enough to let you finish a command before it updates the view as otherwise it would be very distracting to having it constantly flickering and changing as you type)

This view exposes the mistake I made with the size of the YouTube video frame

You can also set it to show the site as it will look on a computer screen or on a phone.


Finally, one thing that always has confused me with HTML is style sheets. Style sheets allow you to have one place where the presentation of your page is managed, and good practice is to not put too much formatting in the design itself as it is messy and complex to keep it up to date. I learned to code HTML before style sheets were a thing (yes, I am that old), so I've never used them, but Thimble makes yours for you and it is always there for you to go into and edit, and again as you change fonts, layout and colour the screen on the right adjusts in real time to give you feedback.

Thimble is free, you can make an account there and you can publish your pages from it. I perhaps wouldn't try to make a big multi-page site with it (but then, as I said, I'd just use Google Sites for that because life is too short).

If you don't know HTML commands but want to give it a try, it is useful to have a second tab open on your browser with a reference of some kind to all the commands you can use - there are many, my favourite is the W3Schools site.

Comments

Popular posts from this blog

Jamboard - New Tool

Jamboard has been around for a while as a high-end piece of digital office furniture from Google but the software is now part of G-Suite and therefore available to all dret.cloud users.

Staff or students can either go to jamboard.google.com for the web version (which is really only useful for viewing and sharing boards) or use the iOS app available on the Self-Service store.

What Jamboard provides is a lovely app to pull different kinds of documents from Google Drive or web pages, move and resize them and annotate over the top with different pen tools or a number of icons.

I plan to do a couple of blog posts about Jamboard in the coming days - one about the whole premise behind this kind of software and other comparing it to what up to now have been my go-to pieces of software, Google Keep and Microsoft OneNote.

If you'd like to see what Jamboard looks like in action, this (staged) teacher demonstration from Tom Mullaney gives a good overview.


Welcome to tips.dret.cloud

It's been a year since I started my role as an eLearning Lead with DRET, and what a year it's been! I've had the opportunity to lead on, and participate in, lots of training sessions, while visiting many classrooms and working with a host of talented teachers. It's incredible how you can show one example of how to use something new in the classroom, and subsequently see it being used and adapted a further dozen ways by different teachers. Throughout the year our team has been keeping notes on some of the best ideas we've come across, and we want to be able to share these ideas with everyone; thus, tips.dret.cloud was born.

tips.dret.cloud is essentially a scrapbook of ideas in one website. You can search for particular tools or areas of development you are interested in learning more about, and see how other teachers have used these tools to make a difference in their classrooms. There are also other resources, such as how-to guides, training videos, and useful lin…

Guest blog post - Pixi Maths

We recently started a new Spring cohort of our Challenge for eLearning CPD course with colleagues from the Corby area, including the author of Pixi Maths, Danielle Moosajee.
As a plenary activity for the first session, we used and demo'd Plickers - 'a simple tool that lets teachers collect real-time formative assessment data without the need for student devices.' It's a great tool which we've blogged about before, and here are Danielle's thoughts on it after using it class post-training:

I left the first Challenge 4 eLearning session full of biscuits and inspired! In a way, it was a shame that the Easter break fell so shortly afterwards as I was keen to try out some of the things we’d been introduced to.
A couple of years ago, a colleague had shown me the Plickers app. Students each receive a QR code with 4 orientations (A, B, C and D) and they hold their cards up to be scanned by an iPad in answer to a multiple choice question. Previously, I had laminated these …