Resources‎ > ‎Using Google Sites‎ > ‎

Custom HTML, CSS, and Javascript or jQuery using the HTML box

A few months ago, google deployed the HTML box gadget, which allows users to insert their own custom css styles, javascript/jQuery, and html. This is a data dump on various resources and code snippets you can use to get familiar with it. NOTE: you will need at least some understanding of html, css, and a basic understanding of programming to use most of this stuff effectively (aside from completely transferable code snippets). Familiarity with js/jQuery is of course also helpful.

To get a box, head to the top left of the editor page, hit "Insert" and then "HTML Box." Go to the gadget's properties to access the editor. It has nice line numbering, syntax highlighting, and even (rudimentary) error checking.

Here's google's page on the subject (with an example carousel):

For basic learning html, js, or css, I've had positive experiences with (their js tutorial, at least, is great and very in-depth -- though people with basic familiarity might want to skim the lessons, especially at the beginning), and for less-structured, sandbox-style learning, mozilla has a great online editor called thimble. I also like w3chools, but more as a resource (for remembering what attribute that html tag can have) than a learning method.

This StackOverflow question about displaying "click to expand" style elements is great - it gives 3 different methods, using jQuery, plain javascript, and css alone:

In a similar vein, here's a little documentation/tutorial on jQuery's toggle() function

More on this:

To learn about what jQuery is and how to use it, go straight to the source:

Although I haven't played with it much, seems to be a cool, multipaneled approach to building and sharing web code.

google gooru seems to have some interesting apps-related content (including Sites-related) also seems to be pretty interesting an useful.

Check out for examples (coming soon)

Look for this to be added to in the future, and PLEASE, if you come across any useful resources or code snippets you think we might use, POST THEM. Thanks!