Review: JQuery via Code School

Tools

After wading out of the kiddie pool (with Khan Academy’s HTML/CSS Basics), I felt ready for a plunge into interactive web design. Code School’s tone is a bit more grown up, but not quite as presumptive of background knowledge as Udacity’s courses, which largely lack scaffolding (baby steps up to larger concepts).

While Khan Academy also has a robust JavaScript tutorial, I’m not keen on another few hours of middle school humor. Let’s acknowledge that KA does this for its primary audience, elementary students, and it does so very effectively. But it does get old for anyone just looking to just skill up and get outta there.

So, let’s take the plunge into the most popular JavaScript library, JQuery.

Course: Introduction to JQuery

Requisites: HTML and CSS (intermediate); programming (basic)

Time commitment: 3-5 hours

Sequence: JQuery is one of the most popular coding tools for web design (it’s technically a JavaScript library), so it should be one of your first steps after getting a strong handle on HTML/CSS. While some may opt for JavaScript first, many web instructors (notably Jen Kramer of Harvard Extension School and Lynda.com) recommend learning JQuery before JavaScript; a cursory understanding will go a long way to framing your concept of what interactive websites really do.

Instructional design: 9/10

+Video intros to each unit keep the user engaged, and helps to contextualize concepts, a la mind maps.

+Very little fluff. Crisp, well-paced visuals.

+ Content is chunked into 6 units. Each unit is broken down into 2-4 key concepts, each of which has follow-up practice exercises.

+ Extensive skill break-down and scaffolding eliminate remediation needs – it’s near impossible to “miss a step.”

+ Content is pertinent – no one-off skills you’ll never use again.

-The user’s work does not always carry over task-to-task, like you would see in, say, Codecademy. It’s a bit cumbersome to re-type your code from the previous screen.

Interface design: 5/10

jquery_v2

+Logical visual flow from directions at the top, DOM in the middle, and console input (where you do your work) at the bottom.

-A lot of visual toggling that ultimately feels inefficient – a third column with directions, for example, would eliminate the constant “look-up, look-down” visual pattern which, on a larger screen, can be a concern for visual load.

-Poor segregation of items on the screen – lesson title, directions, and output all run together visually.

+White space is easy on the eyes, and feels like a PDE/code editor. Look at me, Mom – I’m a programmer!

-Not responsive to mobile devices (the dreaded Scroll of Death).

Support: 4/10

+Most common mistakes come back with a specific suggestion – feels like personalized learning in that way.

-No community support, no 1-on-1 support for uncommon mistakes or overall confusion.

Ease-of-use: 7/10

While the interface takes some getting used to (it’s not immediately obvious where the user’s “sandbox” lies), the clear and scaffolded instructional design more than makes up for the visual confusion. Suitable for 13 years and up.

Overall: 5/10

Next steps:  Make a JQuery-rich website with Codecademy.

Advertisements

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