Teaching Code: A Getting Started Guide

Teaching Code: A Getting Started Guide
teaching coding

Teaching coding is more popular than ever, with hundreds of tutorials and resources on Coursera, Codecademy, Treehouse, edX, Udemy, Lynda, and even this blog! Large companies like Google have partnered with Udacity to build joint nano-degree programs, and coding bootcamps continue to thrive in most major cities in the US and Canada.

According to market research, in the last five years the number of coding bootcamps has grown 10.5 times. This year alone there will be approximately 22,949 graduates, up from 15,077 in 2016 (with an approximate growth rate of 52 percent).

Education is important, and for large organizations, agencies, and freelancers, understanding how to teach is an invaluable skill, as it can will help you level up your own team internally.

Additionally, teaching not only sets you, or your agency, apart as a thought leader and expert in your field — but it’s also a way to give back to the existing community, while levelling up your own skills. The best way to learn something is to teach it to someone else.

“The best way to learn something is to teach it to someone else.”

I have been working as a teacher as long as I have been a front end developer. I’ve taught workshops for companies, at conferences, and for non-profits. I’ve taught in college programs, and in coding bootcamps. I taught at the college-level for just over five years in various programs — everything from usability and accessibility, to Liquid and Sass. In addition, I’ve run and lead workshops for an organization called Ladies Learning Code.

All this to say that I’ve picked up a few teaching techniques along the way that I think would be useful to share, and hopefully will help you teach others how to code.

Things I’ve learned while teaching

teaching coding: things I learned

From building curriculum to catering to all types of learners, this list includes insights from my experience teaching that I’ve found particularly effective.

1. Set end goals.

Before starting out any type of curriculum, workshop, or lecture, ask yourself — what do I want my learners to understand at the end of this? Once you’ve understood the goals, it’s about working backwards. How many weeks, or hours do I have to teach this concept? What are the most important things a learner needs to know to accomplish the end goal?

I used this technique a lot when planning out workshops and full-semester courses. It helps to break the content down into key concepts and hit all the necessary points.

2. Teach in various mediums and techniques.

Not everyone learns the same way, so use a variety of mediums and techniques to accommodate different learning styles. The most common learning styles stem from the educational theorist Neil Fleming’s VARK model, which includes four modalities of learning.

These include: visual, auditory, reading/writing preference, and kinesthetic. What this means is that some people need a visual representation to understand a concept (visual), while others might need to hear you repeat the concept several times aloud in a lecture format (auditory). Some people may need to see it written down in words (reading/writing preference), and others prefer to practice or do the thing they are trying to learn (kinesthetic).

I have found that the best curriculum and workshops address all four of these modes of learning, especially when it comes to understanding code: slides or notes, with explanations of how something works, accompanied by actually typing code and seeing the result in a browser.

Analogies to the real world to solidify specific concepts are particularly useful, as well as speaking with your hands or using pictures. This helps to illustrate ideas and to round out harder-to-visualize concepts for learners, particularly when it comes to workflow, steps in a chain of events, or understanding CSS box model, flexbox, and grids 😉.

3. Be empathetic, and don’t assume.

When it comes to teaching others, whether in a group or individually — never assume anything. You should always teach to the lowest common denominator in the room, and from there if everyone is on the same page you can introduce more difficult concepts. This can be hard to do at times, but more advanced learners will find things to work on and explore, especially if you provide them with the direction to do so.

Make sure to explain acronyms, and avoid using them casually. Often learners are too afraid to ask what an acronym means, especially if it’s casually used to explain something. Provide bonus or additional challenges and exercises for more advanced students. Allow them to explore beyond what is in the core curriculum, especially if they are interested in learning it.

4. Be transparent, and authentic.

I believe it’s important to be transparent and authentic when teaching. Learners can tell when you don’t know the answer and are making something up. So admit when you don’t know something, but offer to solve the problem with them, or provide a solution later.

You don’t need to know everything, no one does. That’s what the internet is for.

"You don’t need to know everything, no one does. That’s what the internet is for."

5. The internet exists, so don’t pretend it doesn’t.

As per my previous point, the internet exists for us to use. Personally, I think it’s ridiculous to test someone’s programming skills, without the use of the internet. Asking someone to write the solution to a problem without being able to use the internet is unrealistic, it doesn’t reflect real life. No one remembers syntax perfectly, and a learner that knows how to use Google effectively, will be an equally effective problem solver and employee.

I’m a firm believer that teaching people problem solving techniques, to read and understand documentation, and how to troubleshoot on their own, will set them up for success later — especially when learning to code.

6. Build, break, and fix things. 💻

One of the best teachers and mentors that I’ve ever had, taught me that to understand how to code, you need to build, break, and fix things. For me, this manifests in Computational Thinking. Teaching learners how to understand a problem, and draw from concepts and techniques that they’ve already learned — to solve that problem, and see if they can iterate on it — is extremely valuable.

Computational Thinking includes: breaking a problem into parts or steps, recognizing and finding patterns or trends, developing instructions to solve a problem or steps in a task, and finally, generalizing those patterns and trends into rules, principles, or insights.

You might also like: Announcing the Shopify Partner Training Camp — Courses for Partners, by Partners.

Techniques for classes, workshops, and individuals

teaching coding: techniques

Depending on the situation or context, there will more suitable techniques for teaching new programming concepts. I’ve included what I think to be the top three techniques for teaching these concepts in different situations.

Project based learning

Project based learning is great for long-form workshops, and full-length courses. The initial goal for the workshop or course will be to complete a project, and all the concepts and exercises taught lend themselves to building that final project. You can see an example of this in the Ladies Learning Code workshop for HTML & CSS, or in any of Codecademy’s project-based courses.

Exercises that build

Exercises that build upon one another is a great teaching technique for short-form workshops, talks, but can also be woven into long-form workshops as well. An example of this is presenting a concept and an exercise that requires a technique that was just taught. The following exercise builds upon that by adding additional features or concepts learned afterwards, but still incorporates parts of the first.

This helps with repetition (which is great for remembering syntax), but also with having a learner break down concepts into parts, and applying them in a new context. A learner needs to understand a concept to be able to do this, which is different than just copy and pasting, or following along with live code.

store animating in

Free Shopify Theming Slide Deck

A few weeks ago, I taught a workshop in Bristol, England at Web Dev Conf on Shopify Theming. I’ve included the slides from that workshop, as they provide good examples of exercises that build upon one another.

Download workshop slides

Paired Programming

Paired programming is a learning technique that we use often at Shopify. Paired programming is when two people program together to solve a problem. There should be a “driver” and a “navigator”; the “driver” writes the code and is the one who owns the computer and keyboard.

The “navigator” keeps things on track, sees the bigger picture, and provides ongoing code review. Between both parties, these roles can switch throughout a paired programming session, and it’s important that the “navigator” give space for the “driver” to solve a problem and not take over.

Paired programming is particularly useful when onboarding new employees, and someone more senior is often the “navigator.” It can also be used as an interviewing technique, to get a better sense of a candidate's skill level, the type of questions they ask, how they think, and how they solve problems.

Community

teaching code: ladies learning code
Ladies learning code workshop.

I am a huge believer that community plays a large role in learning and levelling up skillsets. It’s important that people feel like they have a safe, and collaborative learning environment. You can find community both online and in person; whether through meetups, Stack Overflow, forums and more.

The most successful computer languages are those that are built upon a solid foundation of community and documentation, people learning together and helping one another learn. I’ve always encouraged students to find mentors, or attend and even try speaking at local meetups. It’s there that people network and create friendships with other developers, find job opportunities, or engage with existing projects.

Eager to join a community of experts where you can learn and level-up? Visit the Shopify Partners Facebook page and use the code "LEARN" to be approved right away.

Autodidactism for all!

Autodidactism is a fancy term for self-education, basically education without the guidance of a professional institution, like a school. As technology changes, so must we. Web development and web design is always evolving, with new libraries, languages, and specifications all the time. Two out of three developers are self-taught in some way, which makes it an essential skill.

Always be learning

It’s important to build a culture of learning within your company, startup, and even personally. I attended a talk once where Mathew Milan from Normative said, “Always be learning”, and it stuck with me. We need to teach the skill of self-education, especially in the web industry to stay up-to-date and informed.

You might also like: 8 Free Resources For Learning Web Design and How to Code.

Get teaching!

My goal with this article was to pass on some of the techniques I’ve found particularly effective over the years when teaching others. I think building a culture of teaching and learning within an organization helps grow the people in it, and makes for stronger teams.

If you’re curious about some of the training I’ve done, check out an Introduction to Theming for Wordpress Developers. Or, download my slides from Web Dev Conf on “How to Build an Online Store with Shopify and Liquid.”

store animating in

Free Shopify Theming Slide Deck

A few weeks ago, I taught a workshop in Bristol, England at Web Dev Conf on Shopify Theming. I’ve included the slides from that workshop, as they provide good examples of exercises that build upon one another.

Download workshop slides

What techniques have worked for you when teaching code? Tell us in the comments below!

About the Author

Tiffany is a Front End Developer Advocate Lead at Shopify. She specializes in front end development, user experience design, accessibility, and is passionate about inspiring young designers and developers. Previously, she was an Ottawa Chapter Lead for Ladies Learning Code and worked as a Front End Developer for Partnerships at Shopify.

Grow your business with the Shopify Partner Program

Learn more