Last updated on December 11th, 2022 at 02:00 pm

Instructional Design and Coding: Part 1
This post is part 1 in a series of posts I will be creating on the topic of coding in the realm of instructional design. Stay tuned!
My Journey to Coding
Technology has always fascinated me. This is especially true for the internet. I still remember us getting internet service back in the 90s with AOL. Sitting in the basement of our home, I’d spend ages trying to dial-up and connect. I’d hang out in various chat rooms, immediately letting everyone know my A/S/L (age, sex, location).

As the internet evolved, I became nerdier and wanted to know more about how everything did what it did. This led me to discover coding and web development and I was hooked!
Everyone came to me to tweak their pages (remember MySpace, Xanga, and Geocities?) to add backgrounds, change fonts, and more. I learned on my own through experimentation. I would right click and copy the code from pages, then go through and one-by-one, I would change a color or attribute to learn what it was attached to. We didn’t have all the amazing resources we have now… like Free Code Camp!

Note: While I am referring to FreeCodeCamp.org, I will be separating each word for readability and accessibility throughout this article.
Why Should Instructional Designers Learn to Code?

Before I turn you off, I need you to know: I am not saying that every ID needs to learn to code. I think it can be really beneficial and most who have learned some agree.
I seem to meet folks that either have no desire to learn to code or the ones that wish they could learn to code. I’m appealing to the folks in the latter… but maybe some of you in the former might change your mind, though that is not my intent.
Every time I am asked about my success in instructional design, the question comes up: “What is something you feel that has given you an advantage in instructional design?” My answer is always my background in web development and coding! This is mainly for two reasons: working with authoring tools and developing your website (portfolio). I’m adding in a third reason, xAPI, although I’ve not yet started learning it – but it’s on my to-do list!
Familiarity with Code is Helpful with Authoring Tools

The first time I used Articulate Storyline and started to work with objects and triggers, I felt a sense of familiarity. I realized it was very similar to coding and used programming logic.

Want to learn more about programming logic? Check out the free course Think like a computer: the logic of programming by Open Class Rooms.
I saw that I caught on to Storyline very quickly; quicker than I’d anticipated. I think because I have a solid base in programming logic, it helped me to understand how to effectively work with different layers, objects, triggers, pop-ups, and more.
My first project was very simple. I’d followed a tutorial on YouTube on how to offer learners a way to choose a from 3 different avatars to represent them throughout their course. It was functional, basic, and… well, it existed.
With my second project, 360° Interactive Photo: Spanish & Esperanto Travel Vocabulary, I was recognized by Articulate! They featured my project on their E-Learning Examples page, as well as using it as an example in their Using 360° Images in Storyline 360 training!
Understanding HTML and CSS is Helpful in Developing Your Website

When building your website and your portfolio, there are lots of options available. Websites can be coded purely in HTML, CSS, and JavaScript. Obviously coding is needed for these websites.
Other more user-friendly options are WordPress, Drupal, Squarespace, Wix, Google Sites, and so on. Regardless of which platform you use, having a basic understanding of HTML and CSS can help you to make additional changes to your site that may not be readily available.
For example: if you find a WordPress theme for free that you really like, you will run across certain aspects that can not be altered unless you purchase the paid or pro version of the theme. Knowing some HTML and CSS, you can type in a little bit of code and override those settings, offering additional customization.
This especially comes in handy with trying to stick with your brand colors. Some themes (on all of the platforms) will only allow you to use a specific set of colors. Although I can’t speak directly to website builders besides WordPress and Drupal, I am sure that there are ways to alter the coding to include additional customizations not included with the theme out-of-the-box.
Knowing Some Code is Helpful with xAPI

Experience API (or xAPI as it is commonly called) makes it possible to collect data on a learner’s activities. You can customize xAPI to track learner engagement after participating in a live study group, how often learners open your video content, and so much more. You can understand how valuable this can be for any organization creating eLearning!
While I don’t know much about xAPI beyond what I mentioned, it is on my to-do list to learn. The format is very logical using statements with nouns, verbs, and objects to record almost any activity. Looking at the format of xAPI statements, it looks very similar to CSS, as you can see from the screenshot below.

To learn more about xAPI, be sure to check out all the amazing resources at xAPI.com.
What is Free Code Camp?

Free Code Camp is a nonprofit organization that provides free coding lessons online. All of the lessons are freely available without restrictions. They even issue certificates upon completion that are highly respected within the web development and coding communities. People who have received certificates have landed jobs at major companies, such as Microsoft, Spotify, and Amazon!
The lessons walk you step by step through each line of code. You see your code on one side of the page and your project on the other.

It’s loads of fun and very easy to follow. They’ve recently updated their site and included even more offerings, so I decided to get back in the game! Although most of what I am doing, I already know, I am getting to refresh my knowledge and stay current… plus, did I mention it’s fun?
You can take lessons at your own pace and earn certificates in Responsive Web Design, Data Visualization, Back End Development and APIs, Quality Assurance, and many more!
You also get your own profile page that you can share publicly. Your profile contains a brief bio, your social handles, certificates earned, total points, streaks in daily lessons, and a timeline of all lessons completed. Have a look at my profile on Free Code Camp!
Free Code Camp Project 1: Cat Photo App

Keep in mind, this is a beginner’s project. It’s a very simple and basic HTML project with no CSS to customize any part of the page. Free Code Camp does a great job by starting with the basics and then you gradually work your way to more advanced topics in coding.
Click the button below to open a modal box to see the project or view the Cat Photo App in a new tab.
Free Code Camp Project 1
What Are Your Thoughts?
Thank you so much for reading this far! I would love to know your thoughts on Free Code Camp and the value of coding for instructional designers! Feel free to comment below or reach out to me.
Stay awesome, do good, and let’s kick some ass together!