Wednesday, 27 September 2017

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.

No comments:

Post a Comment

Thank you for visiting our blog and leaving a comment. All comments have to be moderated before appearing on the live site.