Review: HTML/CSS lab via Codecademy

Tools

I’m a big proponent of experiential learning (aka “learning by doing,” aka “constructivist pedagogy”). As a classroom teacher, I saw time and time again how student understanding would skyrocket once learners got their hands dirty with applying new skills. And it’s no surprise — harking back to John Dewey’s Experience and Education, progressive education advocates have been clamoring for more “makerspaces” where learners can, on their own terms, fudge everything up and then put it all back to together again.

Which brings us to Codecademy. Not always the most engaging, but certainly a standby. But things are changing! Taking a cue from the makerspace movement, Codecademy has built a laboratory for you to properly fudge up HTML and CSS, and then properly put it back together again. Let’s take a look at how they structure this sometimes unwieldy process of discovery education.

 

codecademy 1

Course: Make a Website Projects

Requisites: Basic HTML/CSS (up to text styling and positioning)

Time commitment: 4-6 hours

Sequence: After wrapping your head around features like attributes, rules, and tags, many learners are left with a lot of good vocabulary but not a lot of practice to conceptualize how these web design elements work to form a cohesive website experience. This course is a great place to solidify your intermediate layout and styling skills within a simulated web design environment, giving a feel for a web designer’s workflow. Furthermore, getting a handle on visual arrangement (a big piece of front-end development) is foundational to effective incorporation later on of interactive functionality — otherwise, you have a lot of bells and whistles but an awful user experience.

Instructional design: 9/10

+ Intra-unit information chunked task-by-task for comprehension, and scoped narrowly (only 5-7 tasks) to prevent user from feeling overwhelmed with a litany of new concepts at once

+ Skills scaffolded well across 15 separate website design simulations – starts out at text styling and gradually works up to grid systems and responsive design

+ Gradual release of responsibility across the 15 simulations. At first, 90% of HTML/CSS is pre-built, but by the culminating simulation, 0% of code is provided, with only a task list and resource URL’s as guideposts

– No exposure to Sass concepts despite emphasis on Bootstrap. If providing exposure to layout shortcuts (Bootstrap), the same should be done for CSS ones (Sass). It’s important to bake-in these frameworks with front-end training – even if for novices – as pre-processors more and more become the norm

 

Interface design: 5/10

Shutterbugg Codecademy

+ Code editor simulation has authentic feel, and can incorporate extra-Codecademy files

+ Left-to-right paneling provides logical workflow: task/resources to code to output

– Not mobile-friendly (this is where Code School has done well, albeit with some scrolling issues)

– Browser simulation cannot be detached to a second screen

 

Support: 4/10

+ “Get Help” button offers readily accessible glossary and discussion forums

– Forums are sparsely populated and unmoderated

– One-on-one support services are not clearly defined/previewed

 

Ease-of-use: 7/10

+ Takes no time to get up and running, as first unit provides fleshed out code that users can tweak to their heart’s content

+ Learning experience is highly extensible, allowing user to try out any variation at any point, even integrating outside files and documents into CMS-like file repository

– Bugs are still being worked out with simulating image integration and scrolling

 

Overall: 5/10

+ Progression of tasks and gradual release of responsibility are designed well, and play off of each other to challenge but not frustrate

– Support is nearly non-existent, therefore borderline-committed users may exit after a few inevitable dead-ends

 

Next steps:

Learn a Zurb’s Foundation, a web design framework, with Lynda.com

Review: HTML5 via edX

Tools

edx content screen

HTML5. Big, scary acronym. But here’s what you need to know: it is a big reason why the web feels way more efficient than it did a few years ago. Did you notice that around 2014, a bunch of websites began integrating superior videos, graphics, maps, and sign-in features? These bells and whistles are largely enabled through HTML5, the most recent iteration of what Tim Berners-Lee created for his fellow scientists at CERN 35 years ago. This version builds on the principle of rapid navigability, but with neat little interoperability features like sticking geolocation on your once humdrum e-commerce site.

edX, an emerging e-learning site, offers an HTML5 MOOC taught by some esteemed computer scientists at the agency that regulates HTML5, W3C. The upshot: this is an excellent course for those familiar with HTML/CSS functionality but not up-to-date with the guiding principles behind universal markup design, accessibility standards, authoring features, and interoperability constraints.

For the sake of objective measure, we’ll assess the course using the Quality Matters rubric, a standard of e-learning evaluation. Here are four criteria we’ll look at, with analysis to follow:

  1. Course Overview and Introduction
  2. Learning Objectives (Competencies)
  3. Assessment and Measurement
  4. Instructional Materials

Course Overview and Introduction

Videos are a great way to get to know your instructors in an asynchronous environment, and edX capitalizes on this capability in this HTML5 course as well as in their recent Implementation and Evaluation of Education Technology course. The instructors conduct personal, video-based introductions, but also present bite-sized background knowledge pieces that prime the remote learner’s mental model; the user doesn’t have to guess at the format and tone going forward. This bodes well for user confidence.

Furthermore, edX leverages DemoX, a mini-course that walks users through the edX experience and resolves most barriers to entry for first-timer MOOC users.

Learning Objectives

Here is a look at the week zero introduction module:

HTML5 edX

The introductory week does a nice job of not only presenting overarching content and learning goals, but also expounds upon contextualization of skills – exactly how the competencies in the course play into web development as a whole. Web IT terminology is notoriously amorphous, so giving concrete contexts really helps the learner to frame how concepts will formulate within the course as well as sketching out likely scenarios for application thereafter.

One weakness, per the Quality Matter rubric, is the lack of clear learning outcome statements. While these are presented within the syllabus in lucid, learner-centered language, objectives are rather inaccessible for the rest of the course, mainly referred to in indirect introductory statements or nested within the lesson at large.

Assessment and Measurement

Each module has a formative assessment evaluating learned terminology and skills. While not robust, the model scores well as an authentic assessment, as questions are framed within a real world context:

formative assessment

Somewhat lacking is the spiraling of competencies – there is not as much incorporation of previous concepts as is merited within a field like programming, one that requires compounding and synthesizing little nibbles of knowledge you consume along the way. Alignment with course objectives is strong, but objectives could be more explicitly presented when introducing the scope and sequence of each new module.

Instructional Materials

As this course was devised by W3C, the authority of web standardization, the instructional materials are current and are optimally relevant. Every nook is scoured for applicable content – there is pertinent content for beginning and intermediate web designers, and the instructors examine each concept thoroughly through case studies.

This case study approach is an excellent way to build an intrinsic investment towards using best practices. Once you see and experience precisely why the crappy code is a harsh user experience, one’s empathy overrides any “meh, it’s good enough” impulses. The below code is the third method for polyfills, and the instructor takes pains to explain exactly why this method is best for usability:

instructional materials example

Conclusion

So there we go. Yes, only 4 of the 8 Quality Matters criteria were cited, but you get the gist. HTML5 took over a decade to standardize and ship, but the partnership with W3C and the edX platform promises an acceleration in adoption. W3C and edX clearly form a force for good in spreading web standards beyond the niches of Stack Overflow, and it doesn’t hurt that the content is made broadly accessible via solid scaffolding of concepts and a streamlined platform experience.

I look forward to exploring more edX pieces in the future, and perhaps you should, too; they are an up-and-coming producer of web development tutorials at a beginner and intermediate level, and one which scales nicely to advanced concepts.

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.