Review: HTML/CSS lab via Codecademy


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


Start at someone else’s mid-way


When approaching self-study, the learner is essentially their own instructional designer. “You are in charge,” says the screen full of internet staring back at you. “Now make some learning happen.”

This is at once liberating and daunting. So many learning possibilities…but then again, aren’t instructional designers trained extensively on how to scope and sequence online learning over many semesters of Master’s level coursework? Sounds like a lot of stuff that we don’t have the time, or skill, for.

In simple terms, though, learning designers start out a course of study with three principal questions:

  • Where do I start?
  • How do I know when I’ve achieved proficiency?
  • What should the learning process look like between these two endpoints?

The best source for answers to these questions is, not surprisingly, other folks on the internet. But don’t just find folks who were in your shoes and then read about their trials and successes — join the conversation itself, in the process leveraging a pedagogical technique called social constructivism.

Social constructivism is an offshoot of the discovery-based, maker-empowered constructivist model, but multiplied by the collective wisdom and hive-mind heft that collaborative thinking can produce. To take a silly example: you could teach yourself a bit about architecture by making your own Lego castle, but you’d probably learn a lot more — and make a cooler castle, too — if you had some buddies along to bounce ideas off of.

Good thing we have the internet, right? All the buddies, all the time. And that’s how you can determine a starting point, or refine your learning process, or gauge proficiency. It quite neatly satisfies those three principal design concerns we highlighted above.

But you do have to take a few specific actions. Social constructivism, after all, requires the learner to be active in the formation and application of his or her knowledge. These steps, in order, are:

1. Define your tribe(s)

Who are you? Who who, who who. Nail that down now, because having the right identifying phrase or job descriptor will make all your RSS indexing and Google+ Communities scouring much more straightforward. For me, I knew I wanted to become a technology-minded educator. I discovered the term for that was “instructional technologist.” Who knew? Not me, until I started typing job descriptions into queries.

2. Map out goals

Determine the frequency with which you aim to participate in communities, and to what extent. And here’s the thing: you should literally map it out. In their seminal work Adding Some TEC-VARIETY, education psychologists Curtis Bonk and Elaine Khoo reiterate what we all sort of knew in the back of our minds: “Cognitive psychology has taught us that among the most important skills learners can have is the ability to organize and represent their knowledge in personally meaningful ways” (196).  Take out a piece of paper, make a chart for Monday through Friday, and chart out your weekly learning journey across various platforms. Is the beginning of the week best for batting around ideas in various sub-reddits, whereas by the weekend you’re more in the mood to produce publishable content for your blog? Map it out. And, just as importantly, map out your metrics for success. Are 10 tweets a week reflecting on trends in your specialization enough to demonstrate mastery, or familiarity, or…well, this is where I stop suggesting and you fill the rest in. Quantify what a solid output would look like, as well as what kind of output you are aiming to receive from others.

3. Determine digital media habits

You want to learn a lot, but not spread yourself too thin, both in terms of content and platforms. In the words of Bonk and Khoo, “The dilemma for instructional designers, therefore, is to find ways to reduce extraneous cognitive load while increasing interactivity in ways that are more germane to the learning process” (184). If you subscribe to 8 social media services for professional development purposes, the cognitive load may be too high, diminishing your retention because you’ve sapped your mental bandwidth with too much content across too many conversations. You’re only human, and you probably have plenty of other mentally taxing activities on the side. Target social media that are central to your field, and be a real presence in those chosen few. In my case, I attended a conference on education technology and took note of the top 2 social media platforms being used by thought leaders and presenters. These ended up being Twitter and WordPress, which, in addition to daily Panda dashboard check-in’s, makes for a diverse and informative — but manageable — set of 3 platforms on which to keep tabs.

4. Seek out feedback

The manner in which you get feedback on your learning process is in some ways more crucial than the feedback itself. For social constructivism to flourish, responses will need to be aggregated and arranged for perusal and (this is the crucial part) natural group interfacing free of professional or ideological baggage. As Bonk and Khoo point out, platforms like Piazza act as anonymizing feedback engines that organically collate ideas as they grow: “Importantly, learners can choose to be anonymous in Piazza, thereby freeing them up for participation. The nonhierarchical and interactive functionality of Piazza nurtures an environment rich with student questions and associated answers” (188). Bonk and Khoo suggest that one could extend these conversations into meta-cognitive reflection; once the ideas settle and a resolution is at hand, the intellectual product can be “returned” to the owner, who can then incorporate the new understandings and perspectives into his or her own learning process going forward.

5. Develop mentoring relationships

I have to be honest with you, I’m behind on this one. Turns out working full-time doesn’t afford a lot of time for critical exchange outside your current field. But Bonk and Khoo saw this one coming, too, and have a suggestion — backchanneling, or indirect conversations via digital media that are a conduit for more intimate feedback down the line. At a conference, for example, “There might also be a conference hashtag for Twitter activities and quick response (QR) code for mobile applications associated with the conference that can be photographed or scanned in. When audience members add an event hashtag to their tweets, others can search and review all the background tweets associated with the event” (204). This is all to say that it’s not enough to just look at those QR codes — actually utilize them when the situation presents itself. It may lead to a event or other informal, small group get-togethers that foster mentor-mentee relationships. The key is to crowd-source from a large pool, e.g., industry-wide conference or broad social platform, then hone in on the sub-groups that orbit or outright result from such a collection of minds.

Hopefully these 5 steps will get you on your way. I’ve seen social constructivism take me from the kid with no friends and no skills to the kid with some friends and some skills…and I reckon the best is yet to come. It will be interesting to see how interoperability and “software eating software” across social media platforms will come to shape what these apps do and how far they can reach across, and thereby integrate, professional and personal niches of social media. If WeChat in China is any indication, cross-service backchanneling is yet to really flourish in the US, and with it the development of more robust professional development communities.

Review: HTML5 via edX


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:


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


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.


My story

I have a common enough story. I was an English teacher for 7 years. Then I was ready to try something else. But I only knew how to be an English teacher.

I had no idea where to start. I had skill-up pity. I wallowed in it.

Don’t worry, I got over it. In fact, I started researching and undertaking various skill-up programs. Some free ones, some cheap ones, and some very, very expensive ones.

I’ll tell you about my journey. I’ll also offer some links and advice, in case they’re of use to you in your journey.

Submitted for the approval of the Midnight Society, this is the story of my ongoing skill-up experience.

Your second-best self


Before delving into self-study, it’s crucial to understand just what kind of learner you are. (Yes, very good; a human learner. Let’s keep the dad jokes at a minimum, shall we?)

When it comes to determining just how your brain learns best, Sternberg’s Triarchic Theory of Intelligence can be an incisive starting point. Three leaner types emerge from this hypothesis: analytical, creative, and practical. An analytical learner is one that does well with synthesizing complex information in a prescribed manner, such as economists. A creative learner adapts well to “out-of-the-box” and innovation-driven tasks such as graphic design or sales presentations. A practical learner deals well with concrete tasks informed by real world experience accrued over time in roles such as event planner.

The tricky part is not identifying which type you predominantly identify with. The tricky part is determining just how the less dominant types play into your overall learning schema, and how you can access these less obvious strengths in your course of self-education.

Myself, for example: I am primarily an analytical learner. Give me a study guide and a test, and I’ll do an acceptable job. I can teach myself to take a test by now, largely from years of schooling and routinizing this process. However, to truly tap into my full potential with self-directed study, it’s essential that I acknowledge my creative learning tendencies, less obvious though they may be.

For example, when learning responsive design grids for web design, I will only get so far if I follow the instructional video and do the required exercises. To truly grok the material, I need to tap into my visual mapping tendencies; without abstract and innovative idea mapping, I have a really hard time later on employing new permutations of the disparate ideas I’ve learned. I have to literally draw out further connections on a piece of paper – how this JQuery script could enhance or detract from this layout feature.

Design your primary and secondary learning schema with your field in mind. In a field like web design it is imperative that you debug your own mistakes. Without mapping out why things work and don’t in various combinations, my synapses feel withered when it comes to fixing my mistakes. My knowledge is just not broadly applicable enough to solve what needs to be solved. But if my field were, say, architecture, I might employ more of a practical leaner approach, as I have hands-on experience with pouring cement.

Now, this can widely vary for each task, learner, and delivery model. But do take the time to consider for yourself just as your teachers did long ago: note how you learn best – and 2nd best — and accommodate accordingly.

Future for higher ed: full-stack or a la cart?


Getting Smart, an edtech thinktank and consultancy, today came out with a small treatise on the current state of higher education. In sum: unless a university name has serious cache (think Ivy League), current practices will effectively bankrupt most higher education institutions in the next 15 years. There are various micro-reasons for this – bloated back offices, unattainable facility standards, diminishing freshman classes – but ultimately it boils down to high costs and low ROI.

The author, Ryan Craig, goes on to articulate what educators have been quietly shouting for years: “higher education may be the most complex product or service purportedly designed for mass consumption.”

The current higher education model entails increasingly unwieldly experiences and inconsistent user outcomes.

The way forward

Where to go from here? Clearly, major reformation is in order. Drawing from models in product and information delivery, two contenders come to mind:

Full-stack: University as a highly structured end-to-end learner experience. Based upon user experiences devised by wrap-around services and products like Apple and Uber, student experiences would be holistic like never seen before. Robusmt on-boarding roadmaps, streamlined interfacing with instructors and advisors, and readily incorporated feedback would be central foci.

A la cart: University as an agile, on-demand experience. Based upon lean, outcome-oriented services like Kayak and Ebay. This model of learning is already being implemented with efficacy in the tech skills world by coding bootcamps like General Assembly; pick your content, skill up, connect with mentors, and perfect those skills.

Where to watch

Will these models become prevalent? Only time will tell. But Craig points out the increasingly mobile-first habits of incoming freshman. Effective integration of services for mobile users could be a big determinant as to if truly full-stack and/or a la cart approaches take off. Case in point: if course advisory services are not accessible to full-stack students on-the-go, the model fails to meet users where they’re at, thereby failing the holistic experience litmus test.

As competency-based education models like Western Governor’s University process more cohorts, it will be interesting to see in which direction the learning models shifts. Will learner feedback drive demand for spare, just-in-time learning experiences and, with it, lower price points? Or will retention rates and post-graduate placement drive a more hands-on and holistic learning experience model?

Review: JQuery via Code School


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 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


+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.