10 Free Resources for Learning JavaScript and HTML5

JavaScript Logo

The web isn’t a stale bag of text and pictures.   In our web browser, we can use Google maps to navigate and explore the world.   The browser enables us to play games, communicate, and learn using media.    Google, Microsoft, and many other players have worked hard to improve the speed and capabilities of the web by improving a core programming language in all web browsers: JavaScript.

If you’re looking for a way to start learning how to program, to build interactive experiences, to build mobile applications, or build games,  the JavaScript language has become a solid platform that exists in every web browser.

Douglas Crockford is a profound thinker and author in the JavaScript space.   He observes that programmers need to take time to learn the language well.   Programmers often make the mistake of simply “copying and pasting” JavaScript code around without understanding  some of the basic assumptions of the language.   I’ve collected a collection of tools and books to help programmers get started.    I’ve also included links that would benefit professional developers on HTML5, debugging tools, and node.js .

  • Eloquent JavaScript :  This is a nice e-book introduction to JavaScript.   I enjoy the discussion of object oriented JS.
  • Code Academy :   This online tutorial is awesome.  You learn JavaScript in small steps and immediately apply your knowledge completely in the browser.
  • Introduction to Chrome Developer Tools : Just getting started in web programming?   Make sure to review this tutorial to learn how to use Chrome’s debugging tools.
  • W3Schools : This site provides a reference for all web technologies including HTML, CSS, and JavaScript .
  • Khan Academy on CS : Khan Academy is rocking the world of computer science with their fun introduction to programming through Processing.js and JavaScript.  The presentation is very engaging.
  • JavaScript Enlightment : Here’s another nice e-book on JavaScript.
  • Mozilla JavaScript Guide : While this book provides an introduction to JavaScript, this guide also provides hints regarding the future of the language.
  • Dive into HTML5 : This book provides an introduction to advanced features of the browser like HTML5 and Canvas tag .   Drawing in the browser is very fun.  This book helps those interesting in making HTML5 games.
  • Essential Design JavaScript design patterns : Over time, software engineers have created names for common code patterns.   This free book provides a cool discussion of design patterns using the JavaScript language using examples for JQuery .
  • Getting Started with Node.js :   If you’re interested in learning how to use JavaScript on the server, this collection of links from StackOverflow will be very helpful.


Related Posts


“All I Want For Christmas” from @EduVue

The “Hour of code” event to introduce young people to computer science has been very well received by the community.   As time permits, I have been reviewing blog posts and retrospectives on the event. My friends from EduVue provided a nice reflection on the “Hour of code” event at their schools.   It’s exciting to hear that kids loved the teaching and desire to continue learning more about writing code and making apps. Make sure to follow the posts of these education technology professionals and EduVue. Jaime Vandergrift, Catherine “Cat” Flippen, Kate Matthews, Stacia McFadden, and Amy Pietrowski are inspiring people and teachers.

Please make sure to connect to EduVue on Twitter and Google+. The conversations are always real, practical, and fun. They have reviewed topics including mobile learning,education technology, design thinking, Google apps for education, and more.

Find the EduVue team on Twitter:


Related Posts


Photo taken from http://www.flickr.com/photos/rexxx/6436141867/sizes/m/


Creating Interactive Images with SVG

Inkscape & SVG


During a Google Developers Group session on HTML5, Dr. Allen introduced the group to a web technology called Scalable Vector Graphics (SVG). In instructional technology, SVG can be used to create interactive diagrams that respond to mouse clicks and mouse movements. Many information visualization tools utilize SVG to visualize complex data sets. (Check out http://d3js.org for examples) As a game programmer for the web, I’m excited to see people write browser based games with SVG. For example, check out this nice implementation of Tetris. .

SVG was created by the web community to enable browsers to draw images that keep their fidelity whether they are displayed on a large device or small. SVG accomplishes this purpose by providing commands for drawing shapes, lines, and paths.

In this post, I’d like to introduce this web technology to our readers using a festive example: A silly Christmas Card. In the image displayed below, an “outch” image is displayed when you click on the “angry bird.” If you move your mouse over the snow man image, a “Merry Christmas” image is displayed. Most modern web browsers support drawing SVG files. If you are comfortable with changing HTML, you will have no problem with SVG files.

Most of the SVG Christmas card was designed using a free tool called Inkscape. You can review a very complete users guide here. InkScape runs on Windows, Mac and Linux.

Google Docs users should also note that you can export Google Drawing files to SVG. Under the “file” menu, select “Download as…” followed by “Scalable Vector Graphics(.SVG).”

To make SVG’s interactive, you need to have a basic understanding of editing an SVG file. You can edit SVG files using your favorite text editor. W3Schools.com provides a great introduction to learning SVG and JavaScript from a code perspective.

Code break down for Christmas Card

In the following JavaScript code that appears after SVG tag, we defined a few functions to handle the interactive elements of the file. In Inkscape, I defined a named groups for the “snowMan”, “merryChristmas” message, the “outch” message, and “angryBird.” As we move our mouse over the snowman, we grab a reference to the “merryChristmas” message and display it. As the mouse leaves the snowman, we hide it.

To learn more about JavaScript programming, visit CodeAcademy.com .

If we click on the angry bird, we grab a reference to the “outch” element and display it. We schedule a function call that will hide the “outch” element after 2 seconds.

The following code shows how we connected mouse over events to the snowman group. Please note how we named the group using the ‘id’ attribute.

The following code shows how we connected a mouse click event to the angryBird group. Please note how we named the group using the ‘id’ attribute. You can edit the ‘handleClickForBird’ function to load other web pages using ‘window.open’ or anything else you can image.


Related Posts

Closing out the term- Reflecting on what worked and what failed miserably

Tomorrow is my last exam of the semester. Woohoo! Freedom! I’m not sure who’s more excited, me the professor, or my students. As always, it is a good idea to take some time to reflect and think about what has gone well this term and those things that probably should not be done again.

The Good.

I really enjoyed my microbiology class. I had several students this semester that had taken introductory biology with me in the past. I felt like the rapport in the classroom was great and I enjoyed getting to know a few of the students better. Some of them had really interesting stories to tell. Overall, the class went pretty smoothly. I use a flipped classroom model, where the students watch videos outside of class that are more of the traditional lecture format, and I use the classroom time for activities and group assignments. I also use clickers (we use Turning Point at our institution) which the students like and I can quickly find out where their weak points are. I still struggle with getting the students to prepare outside of the classroom, but I think the model is working. I am happy with the grade distributions and I feel like the level of difficulty is where it needs to be.

The Bad.

In an attempt to limit the amount of paper that sits on my desk each term, I started having students turn in lab assignments to me online. In principle this seems like a good idea, but as it turns out, it makes it much harder and takes longer for me to grade them. The students also seemed to struggle with the process of converting files to PDF and submitting them to the online drop box. I’m not sure if I’m going to throw this idea out completely next term or if I’m going to tweak it to make it easier for all of the parties involved.

The Ugly.

I really seemed to struggle this term with my Introductory Biology course. In general that class is a tough nut to crack. Most of the students are not at all interested in science and are just taking the course because they need a lab science and they were terrified of chemistry. Over the summer term I had come up with an idea to build fill-able outlines for my student to use during my lectures instead of just giving them my PowerPoint slides. My students really struggle with reading the textbook and capturing the main ideas so I wanted to give them a tool that they could use to guide their studies. It seemed to work well with my summer class. I really thought that it would be awesome for helping my students to get the main ideas. I was SO wrong. They focused so much on the outlines when I lectured that I don’t think they ever really heard me. It was terrible. I’d get stopped multiple times during lectures to go back in and fill in the blanks for them. Then, at the end of class, several students would come to the front of the room wanting me to give them my outline so they could get the exact wording that they missed. Talk about encouraging rote memorization. Maybe this would work better for my flipped classroom where they can stop the lecture and go back and fill in the blanks, but it did not work at all for my traditional lecture class. Fortunately I am not teaching this course in the Spring so I have some time to figure out a new strategy.

I am looking forward to the next few weeks of planning out the Spring term. I love to tweak my courses to make them better and I think I have a lot of material to work with after this semester.

17 Fun Tools To Teach Kids To Code by @ChrisBetcher


There are many benefits to teaching young people to code.   As a musician starts learning a piece of music,  the process can be daunting.   Musicians, however, naturally start breaking the song into parts.   By slowly mastering small phrases, scales, chords, and patterns, the song slowly emerges from the student.   The discipline of decomposition and persistence shows up in computer programming too.

Chris Betcher during a talk during the K12 Online Conference did a AWESOME introduction to a number of tools that help students get started with coding.    Mr. Betcher introduces the tools in order of learning complexity.     My five year old has been playing with BeeBot and Hopscotch.   It’s really fun to see him having fun programming.   His survey of tools starts with teaching students basic sequencing, looping, and branching.  For advanced students, he recommends tools to help students get started with Python and Ruby.

I also appreciate that Mr. Betcher highlights the ethos of sharing in programming.   Since the world of technology is changing rapidly, computer professionals are constantly teaching and learning from each other.   The act of reading code is an act of education.    The practice of pair programming is another fantastic way to pass on the craft of code in a social and collaborative way.

I hope you enjoy Chris Betcher’s talk!

Sequencing, Branching, and Looping using Blocks

  • Beebot: My little 5 year old has been enjoying this app.  In the game, you need to navigate a small robot through a maze.   The player needs to issue the right sequence of movement commands(forward, backward, left, right).   While this app is simple, it’s very fun.
  • Daisy the dinosaur
  • Kodable

Advanced Block Programs

  • Scratch: MIT’s Scratch from the “Life long kindergarden” lab at MIT is amazing since it introduces fun programming features using puzzle or visual programming.   Check out our full post on this tool here.
  • Hopscotch
  • Blockly : This is a great find! As a programmer, you can use this open source library to create your own visual programming environment.   I really want to create a robot control system with this!  From a teaching stand point, it has a number of samples that your students will find fun.
  • Star Logo

Game, Apps, and Robots

Traditional Coding

  • CodeAcademy.com: Many of my friends have enjoyed using this tool to start to learn how to code HTML, CSS, JavaScript, and Python.    On each tutorial page, you read a simple concept about programming.   On the same screen, you immediately get to apply the concept with a small exercise.   Since you can immediately apply your knowledge, this tool is much more engaging.
  • Python
  • Ruby for Kids
  • Hackety.com
  • Python for iOS

We would love to hear from you!

Do you have a favorite tutorial for introducing code to new programmers?


Related Posts