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

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