Learn to Code for Free with FreeCodeCamp

A graphic shows a stream in a forest with mountains in the background. On a wooden sign is "Free Code Camp" followed by their logo of a campfire enclosed in parentheses.
Image description: A graphic shows a stream in a forest with mountains in the background. On a wooden sign is "Free Code Camp" followed by their logo of a campfire enclosed in parentheses.

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

A screenshot of a tweet reads, "Somehow, I'm old enough to remember dial-up, but young enough to rage-quit any website that takes longer than 5 seconds to load".
Image description: A screenshot of a tweet by Brooklyn Nash reads, "Somehow, I'm old enough to remember dial-up, but young enough to rage-quit any website that takes longer than 5 seconds to load".

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!

Light blue lightbulb with a small, green plant growing inside, which is Bela's logo.

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?

A woman sits at a desk with 2 computer monitors and a laptop. She is coding and focusing intently.
Image description: A woman sits at a desk with 2 computer monitors and a laptop. She is coding and focusing intently.

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

Image description: A woman wearing hijab is sitting at a computer desk, smiling while looking at the monitor.

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. 

Light blue lightbulb with a small, green plant growing inside, which is Bela's logo.

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

A computer monitor and a laptop sit on a white desk. Both screens are open to the same website for a design company.
Image description: A computer monitor and a laptop sit on a white desk. Both screens are open to the same website for a design company.

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

A woman sits at a desk with 2 computer monitors containing multiple charts, graphs, and other data analyses. She is pointing to one screen, analyzing the data.
Image description: A woman sits at a desk with 2 computer monitors containing multiple charts, graphs, and other data analyses. She is pointing to one screen, analyzing the data.

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.

A screenshot showing the format of several xAPI statements in a code editor.
Image description: A screenshot showing the format of several xAPI statements in a code editor.

To learn more about xAPI, be sure to check out all the amazing resources at xAPI.com.

What is Free Code Camp?

A diverse group os Free Code Camp students at a local study group in South Korea.
Image description: A diverse group of Free Code Camp students at a local study group in South Korea.

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.  

Image description: A screenshot showing the layout of the lessons in Free Code Camp.

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

A tablet lays on a table with random items around it, such as food, a flower, and paper clips. On the tablet screen is a screenshot of the Cat Photo App project.
Image description: A tablet lays on a table with random items around it, such as food, a flower, and paper clips. On the tablet screen is a screenshot of the Cat Photo App project.

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.  

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!

Leave a Reply

Your email address will not be published.

Scroll to top
Stay in the LoopLearn about new projects, posts, and resources added

Stay up-to-date with my content and development.  No worries - I hate spam, too, and I promise to never send any your way. 😊