Teaching HTML/CSS in School – some useful tools

I gave a presentation last week at the Bring and Brag preceding the CAS Wales / Technocamps conference in Swansea about a variety of different web-based tools you can use in school to teach HTML and CSS.

Mozilla Hackasaurus

This is a lovely site which is based on the X-Ray Goggles toolbar widget.  Essentially you drag the widget to your toolbar and once activated, it shows the source code of the site as a layer above the page.  It allows the user to show the code of various parts of the page and separates out the <div> tags and classes.

hackasaurus

It’s a great fun little app that takes the sometimes very complex viewed source code of a page and links it directly with the content.

googlehack

The hack part comes when you start editing the content.  Lift an image from another URL, edit the text, change the colour, size, etc.  Then you can commit the changes and publish (to a separate URL).  Of course as soon as you commit changes, the questions start flying!

Wow Miss – are you allowed to hack Google?

Are you going to be arrested?

Does everyone’s Google look like that now?

Without you actually teaching it, a number of key points come out:

  • the source code of every web page is available to view
  • images have their own URL
  • the page you are currently viewing, is stored locally on your computer
  • hitting F5 refreshes the page – your computer goes back to the server to get a new copy

Playing around with the code is simple – or can be made harder if the students want to challenge themselves.  Yes they can hack Facebook (a popular request).  The site also has some nice resources including the Hacktivity Kit – a guide to running your own Hack Jam.

Thimble

This is another Mozilla project aimed at web-based website building.  The site has a number of pre-prepared projects all of which run in a split-screen.  The projects guide students through various tasks all with the aim of getting used to using various HTML and CSS bits of code.  The projects themselves are fun – silly and fun, but make a really nice starter for a series of lessons on HTML / CSS.

thimble

I tried two of the projects on classes last week.  Two year 7 classes tried the Make Your Own Animal project.  They learned how to edit the HTML and switch the images around as well as some basics about HTML tags.  One of the classes was a very low set.  The concepts of image URLs were fine – some struggled with the motor control needed to copy and past precise bits of text.  The project also got them to describe the animal they created so we had some nice creative writing and literacy in there too!

thimble

A top set year 9 class tried out Bakery Bash.  Now this really is silly and has a screen full of dancing cat gifs.  There is nothing in this activity that could be described as remotely cross-curricular but it is FUN. Within minutes students were delving around in the web looking for the URLs for images.  Some sites didn’t show the image source on a right click so they went straight into the source code and started reading it.

bakery bash

A point on browsers

The obvious question when running Mozilla sites is, “do we have to use Firefox?”.  At my school, students are currently only able to use Internet Explorer.  Enabling browser choice is (one of the things) on my to-do-list.  I had a hunch this might be the case in other schools so I did a quick Twitter poll to see whether this was the case (please note this is very unscientific).

Well if nothing else it proved what I thought would be the case. (Clearly I should have asked what other browsers if there’s a choice but I didn’t.  At least they have a choice.)

Before the lessons I put a copy of Firefox Portable on all the students user areas.  Unfortunately it didn’t pick up the proxy for our filtering in school so wouldn’t work (which is odd as my year 10 students use Portable Apps with no problems – often running of memory sticks and still through the filter – I digress).

However Thimble worked just fine in IE.  Hackasaurus didn’t want to know.  We’ll sort the browser issue out soon.  Interestingly though Thimble also worked well on our paltry 8mb broadband connection (yes that’s 8mb shared between the several hundred users in the school).

Where Next After Thimble?

So, Thimble is great fun.  We made cats dance, we replaced cats with pictures of our friends etc.  We need a scheme of work.  Thankfully I have one up my sleeve!

We already teach a unit of work (in year 8 – I just didn’t have a year 8 class the day I tested Thimble).  Students create a website on either Caerphilly Castle or the Spanish Armada using Adobe Dreamweaver.  It’s a SoW with it’s merits but we’ve been struggling with the fact that essentially, most of the lessons are spent teaching the software which is not what we want to do.

So enter Dreamweaver split screen.

dreamweaver

The split screen is the same layout as Thimble.  If you edit the code and then click on the page view – it updates automatically (there are some CSS elements that need to be previewed in the browser). I showed students another site:

W3 Schools

.. and they were away.  This site acts as a library of HTML, CSS, XML etc. It also allows you to test code (again on a split screen basis) and see what it will do.  The student who’s work is shown above wanted a background graphic on his page so worked out how to edit the CSS himself.

But HTML is just a bit of coding – where’s the more advanced stuff?

I actually think that web development is a great intro to coding for kids.  They use the web already and so understand the way a website might look and behave.  However, in terms of computational thinking it’s not great (at this level anyway).  However once you have mastered the basics you can start introducing JavaScript to a web page without needing to download anything new.  No new software, no new IDE’s (integrated development environments), no changes to user profiles that scare technicians.  This is the stuff that makes the web interactive.

(My JavaScript capabilities are currently very limited – it’s a summer holiday project)

Codecademy

This is a site with lots of bite-size tutorials that run in the web browser.  They’re introducing new languages all the time but at the time of writing it’s Web (HTML and CSS) JavaScript and JQuery.  I’ve tried out the courses in Web and JavaScript and found both to be good.  Some students have been trialling the JavaScript at lunchtime and some have fared better than others.  It gets quite mathematical quite quickly.  The environment is excellent though and the courses are short enough that you could do 10 minutes a day (which is the aim of CodeYear).  You can also create courses there which offers huge potential for teachers to tailor make something suited to their scheme of work.

Codecademy gives out badges when you finish courses which can be shared on Facebook and Twitter.

CodeAvengers

Thanks to Russell Wareham for showing me this.  For students who want to learn JavaScript but find Codecademy too hard, try out CodeAvengers.  It’s a more gameified environment – which even gives little games as rewards for reaching certain levels.  The JavaScript tutorials are a little simpler as well.

codeavengers

Hopefully then some useful ideas on how to integrate a little, or a lot, of computer science / coding into ICT lessons.

Advertisements

4 thoughts on “Teaching HTML/CSS in School – some useful tools

  1. Thanks for mentioning Code Avengers. We truly believe it is the best resource for teachers and students to learn Javascript with HTML & CSS to be added soon. Watch this space….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s