Interactive courses provide learners in-browser coding challenges with guided feedback.
Who can use this?
|+ Available as a plan add-on|
Important: Interactive courses are available to licensed learners on Professional and Enterprise business plans and individual Premium subscriptions.
Interactive courses are an in-browser, hands-on learning experience combining video, various coding challenges, and code editor for aspiring developers. After watching a video of a technology you're interested in, you'll take what you've learned and apply it to coding challenges right in your browser. After you've submitted an answer, we'll check all the work for you automatically and provide guided feedback if you happened to make a coding error.
Whether you're a new or aspiring developer or a hands-on learner, interactive courses can fit into your learning in a number of ways:
- If you're a new or aspiring developer, interactive courses provide a low barrier of entry. If you're uncertain of where to begin in your learning journey, you can jump right in, learn, and apply a concept—no setup required.
- If you want to make sure you're on the right track handling a certain technology, interactive courses allow for immediate practice and guided feedback in real-time. The guidance provided can help inform your expertise and give you the confidence in your gained knowledge.
- If you're a hands-on learner who needs more than video tutorials, interactive courses provide an immersive way to engage with the technology you're skilling up with. By leveraging problem-based challenges on real-world scenarios, you'll have focused practice on key concepts via coding challenges.
You can find a list of all of our interactive courses on our interactive courses page.
How do I add interactive courses to a channel?
Please see Adding content to your channel for instructions on adding interactive courses to channels.
Interactive courses have many unique parts to the learning experience; so we're going to break down the components of an interactive course step-by-step to help guide you along. We'll cover the following:
- The interactive courses landing page
- Interactive course videos, challenges, and code editor
We'll walk you through an interactive experience below.
Interactive courses landing page
When you choose an interactive course, you will be greeted with a landing page like the one below:
There are a couple of areas to note—the first being the right column. Here, you'll find all the info around the course: author, level, time, duration, and release date. This info aims to give you a clearer picture of how to block out your time as well as determine whether the content is up-to-date and relevant for your learning. We also provide an extensive list of Additional Learning options for exploring and expanding upon some of the concepts related to the technology you're working with.
Looking at the course title and header, you can also download the slides related to the interactive course you're about to take. Doing so will allow you to keep the information covered and help you reference that concept you learned.
The last area you'll find is the table of contents area below. This will list out all the concepts related to the course you're taking. Each concept is broken up into sections, or module of learning. Each module contains a video (or videos) along with interactive coding challenges tied in with those video lessons. If you'd prefer to jump straight into a coding challenge, you can do so. Just toggle the drop-down arrow to the right of each module and locate the challenge you'd like to try.
Interactive courses videos, challenges, and code editor
Each interactive course has both videos and challenges. The videos contain the actual instructor, on-screen, guiding you through a concept. The information that is being taught is covered in that downloadable slide option on the landing page.
After a video is watched, you'll move into the interactive elements of the course. This all takes place within the browser in a code editor we provide, so you won't need any kind of editor of your own. An example of what a typical interactive challenge and interface look like can be seen below. We've broken this up into parts to help you connect the dots:
A: Challenge overview: Covers the target goal of the challenge. It will include the module you're working with and a brief overview of what you'll be doing for the challenge.
B: Task section: Breaks down the particular goal into steps and includes a description of what you'll need to do. In the example above, there are 5 tasks needed to complete the challenge. When you complete a task, you'll move on until the challenge is completed. If you happen to get stuck, that's OK. The "Help me" dropdown includes a way to re-watch that particular portion of the video lesson covering that specific task, or, the answer to the entire solution.
C: Code editor: The main environment you'll be working in. This lives in your browser, so you won't need to download a single thing in order to use it. If you've used a code editor in the past, this one works similarly. When you're on a task, you'll use this editor to write the code and submit once you believe your code is correct. The code editor has a built-in code check and validation system that scans for syntax or other potential errors and provides guided feedback to help you out along the way. In the top right corner, you can resize the view to give you more work space and gain quick access to the table of contents.
A couple other neat features and shortcuts include:
- Line folding
- Syntax highlighting (on select courses)
- File tree system and technology icons for each file
- Multiple file opening
- CMD + Enter to submit code
D: Preview: Under the code editor, you'll find a couple options like "Slides" and the "Challenge answer". You will also spot a "Preview" section that will give you a preview of the code you're creating above. This is especially useful when working with front-end languages like HTML and CSS where you can see your code come to life as you work through building something like a website. Additionally, if you'd like to expand this area to fit your space, the top right will include an expand element. We also offer a way to customize your view by dragging (up or down) the black line between here and the code editor.
Question: I noticed that it takes a little bit of time to load up a course challenge. Why is that?
Answer: Good question, and we're sorry you're experiencing this. Although there is no current solution, prepping the environment for you on our end can take a few seconds depending on the course. We really appreciate the patience as we do this. If possible, we do recommend trying a different browser to see if that speeds up that loading for you.
Question: It appears my code was marked as incorrect or had an error but I know it's correct. The error message may be wrong. Can anyone help me with this?
Answer: We'd love to improve any errors that you receive and know are actually correct. Please email us using the link below and we'd be happy to take a look.
If you need help, please email email@example.com for 24/7 assistance.