Junior Pro Educators Code Camps Log In

JR | Code Avengers

JR

Kickstart your child's future
with at-home digital learning.

* No credit card required

What would you like to learn?

Choose a path that suits you.

Foundational (Ages 5-11)

The adventures of

Charlie
& Tilley

Intermediate (Ages 10-15)

The adventures of

Cody
& Ava

Advanced (Ages 13-16)

The adventures of

Lonnie
& Alex

At-Home digital Education

Create a future coder in your home with fun, easy courses that meet your national curriculum for digital technologies.

Real-world Problem Solving

Prepare kids for life with real-world challenges that develop creativity, logic, resilience, and confidence.

Gamified E-Learning

Story-based, interactive and engaging, our courses will captivate kids and keep them progressing.

Parent Tracking

Check in on your child's latest coding achievements to support their learning and success.

Make screen time
productive.

Frequently Asked Questions

What will my child learn with a Code Avengers subscription?

Code Avengers courses teach critical 21st century skills, including computer programming, critical thinking, and problem solving. Students learn how to logically sequence events, create playable games, and model real situations. They also learn computational thinking by developing algorithmic and design thinking abilities. Once students have a strong grasp of the fundamentals, they can transition to learning programming languages, such as JavaScript and Python and web languages such as HTML5 and CSS3, or build their theoretical knowledge with our Computer Science and Design courses on a Code Avenger PRO account.

Can my children share a single account?

Multiple kids cannot share the same account, because they will overwrite each other’s work.

How do I know my child is learning?

Code Avengers automatically tracks your child’s achievements as they work through lessons and activities. From your Parent Dashboard, you can view your children’s progress through the courses, the projects they’ve created, and the concepts they’ve learned.

Will my subscription renew automatically?

Yes, your subscription will renew automatically by default. After purchasing, you can turn off recurring billing and edit any other payment information from your Code Avengers account ‘Settings’ page.

What devices are Code Avengers courses supported on?

You can access Code Avengers courses from any computer with a modern browser and Internet connection . Some JR courses are also compatible with iPads.

download
new file
upload media
rename

delete

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

<!doctype html>
<title>{title}</title>
<meta name="viewport" content="width=device-width">
<link href="{fonts}" rel="stylesheet">
<style>
body {
  font-family: "Open Sans", sans-serif;
  color: white;
  background-color: black;
  margin: -1px 0 0 -1px;
  text-align: center;
  font-size: 14px;
}

canvas {
  background-color: white;
  border: 1px solid black;
}

table {
  position: absolute;
  width: 360px;
  height: 300px;
  background-color: black;
  top: 50%;
  opacity: 0.9;
  margin: auto;
  margin-top: -150px;
  left: 0;
  right: 0;
  cursor: pointer;
}

td {
  padding: 24px;
}

p {
  line-height: 28px;
}

.social-share img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

h1 {
  font-size: 28px;
}

#code {
  display: none;
}
</style>

<a href="{protocol}//{domain}"><img
    src="{protocol}//{domain}/image/RedLogoMedium.png"
    alt="Code Avengers logo" width="200" height="25"
    style="margin-top: 20px;"></a>
<br><span>presents</span>
<h1>"{title}" by {codename}</h1>
<iframe id="myApp" {events} width="{width}" height="{height}"></iframe>
<p>Learn to make apps, games and websites with <a
      style="color: #ef5555" href="/">CodeAvengers.com</a>

<table onclick="this.style.display='none';displayApp()">
<tr>
      <td>  
  <h2>Instructions</h2>
  <p>{instructions}
  
        <p>
          <b>Click to start</b>

</table>

<div id="code">
{content}
</div>

canvas {
  background-color: white;
  border: 1px solid black;
}

table {
  position: absolute;
  width: 360px;
  height: 300px;
  background-color: black;
  top: 50%;
  opacity: 0.9;
  margin: auto;
  margin-top: -150px;
  left: 0;
  right: 0;
  cursor: pointer;
}

td {
  padding: 24px;
}

p {
  line-height: 28px;
}

.social-share img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

h1 {
  font-size: 28px;
}

.fullscreen footer, .fullscreen header {
  display: none;
}

.fullscreen table {
  top: 170px;
}
</style>

<header>
	<a href="{protocol}//{domain}"><img
      src="{protocol}//{domain}/image/RedLogoMedium.png"
      alt="Code Avengers logo" width="200" height="25"
      style="margin-top: 20px;"></a>
	<br><span>presents</span>
	<h1>"{title}" by {codename}</h1>
</header>

<canvas id="paperscriptCanvas" tabindex="0"
    {canvasEvents} width="{width}" height="{height}"></canvas>

<footer>
	<p>Learn to make apps, games and websites with <a
        style="color: #ef5555;" href="/">CodeAvengers.com</a>

</footer>

<tr>
      <td>  
  <h2>Instructions</h2>
  <p>{instructions}
  
        <p>
          <b>Click to start</b>

</table>

<title>Code Avengers Profile</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Learn essential computer skills with Code Avengers">
<link rel="stylesheet" href="{file}">
<header>
	<a href="https://codeavengers.com"><img src="/images/logo.png"></a>
	<a href="/m/about.html">About us</a> | <a
      href="http://blog.codeavengers.com">Blog</a>
</header>
<section>
	<h2>My Profile</h2>
	<img src="/images/profile9.png" width="180" alt="profile">
	<a
      href="http://gas2.org/2010/10/21/meet-the-contenders-for-the-1000-pound-car/"
      target="_blank" title="My Car">
	<img src="/images/car.jpg" width="100">
    </a>
	<strong>Name</strong>: Supacoda<br>
	<strong>Birthday</strong>: 14<sup>th</sup> April<br>
	<strong>Height</strong>: 1.79m<br>
	<h3>My Super Powers</h3>
	<p>I have super endurance, once I start, I keep going until I finish!
	
    <p>I will eat anything and lots of it... if there is a plate with food on it, I will eat it!

<div class="js comments_comment {{#if parentId}}-reply{{else}}-parent{{/if}}" data-comment-id="{{id}}" data-user-id="{{userId}}">
    <div class="comments_comment-profile-pic-wrapper">
      <img class="js comments_comment-profile-pic" src="{{profileImage}}">
    </div>
    <div class="js comments_comment-content">
      <div class="comments_comment-profile-info">
        <span class="js comments_comment-profile-name">{{codeName}}</span>
        
        <span class="js comments_comment-timestamp">{{timestamp}}</span>
      </div>
      <p class="js comments_comment-text">{{comment}}
      <div class="js comments_comment-buttons">
        <span class="js comments_comment-replies-count" data-upvotes="{{upvotes}}">{{upvotes}}</span>
        <button class="js comments_comment-up-vote"></button>
        <button class="js comments_comment-reply"></button>
      </div>
    </div>
    {{#if parentID}}

{{else}}
      <div class="js comments_comment-replies">
        
      </div>
    {{/if}}
  </div>

<div class="guiders-preview">
    <img src="{{{image}}}" class="guiders-preview_image">
    <div class="guiders-preview_content">
      {{#if complete}}{{else}}
        <h4 class="guiders-preview_subtitle">{{subtitle}}</h4>
      {{/if}}
      <h2 class="guiders-preview_title">{{{title}}} {{#if complete}}{{{message}}}{{/if}}</h2>
      {{#if complete}}{{else}}
        <div class="guiders-preview_description"><p>{{{message}}}</div>
      {{/if}}
      {{#if complete}}
      <div class="guiders-preview_social-buttons">
        <a href="{{{twitterUrl}}}" target="_blank" onclick="ai.publish(true, null, event);" class="js guiders-preview_social-button -twitter"><i class="guiders-preview_social-icon icon-twitter"></i> {{{twitter}}}</a>
        <button class="js guiders-preview_social-button -facebook" onclick="ai.share.facebook();ai.publish(true, null, event);"><i class="guiders-preview_social-icon icon-facebook"></i> {{{facebook}}}</button>
      </div>
      {{/if}}
    </div>
  </div>  
  {{#if tour}}
    <p class="guiders-preview_action">{{{action}}}
  {{/if}}

{{#with pricing}}
<div id="pricing-popup">
  <div class="pricing">
    <h3 class="pricing_header">{{{header}}}</h3>
    <p class="pricing_info">
    
    {{{text}}}

<div class="pricing_sections">
    {{#each sections}}
      <div class="pricing_section-wrapper">
        <div class="pricing_section">
          <h3 class="pricing_section-header">{{header}}</h3>
          {{#if list}}
            {{#each list}}
              <p class="pricing_section-info">{{this}}
            {{/each}}
          {{else}}
            <p><span class="js- pricing_section-price">{{price}}</span> <span class="js- pricing_section-dom">{{dom}}</span> <span class="pricing_section-details">{{{details}}}</span>
            <p class="pricing_section-info">{{{text}}}</p>
          {{/if}}
        </div>
        {{#if button1}}
          <button class="pricing_button js signup-button">{{../button1}}</button>
        {{/if}}
        {{#if button2}}
          <button class="pricing_button -red js-quote-button" data-analytic="submit-quote">{{../button2}}</button>
        {{/if}}
      </div>
    {{/each}}
    </div>
    
  </div>
</div>
{{/with}}

<div id="quote" class="js quote">
  <div class="pricing">
    <h3 class="pricing_header">{{{header}}}</h3>
    <p class="pricing_info">{{{text}}}</p>
    <div class="js pricing_sections">
      {{#each inputs}}
        <div class="pricing_input-wrapper {{size}}">
          <label class="pricing_label">{{placeholder}}</label>
          {{#if list}}
            <select required name="{{name}}" class="js pricing_input">
            {{#each list}}
              <option value="{{#if name}}{{name}}" {{#equals name ../value}}selected{{/equals}}{{else}}{{this}}" {{#equals this ../value}}selected{{/equals}}{{/if}}>{{#if name}}{{name}}{{else}}{{this}}{{/if}}</option>
            {{/each}}
            </select>
          {{else}}
            <input required type="{{#if type}}{{type}}{{else}}text{{/if}}" name="{{name}}" placeholder="{{placeholder}}" class="js pricing_input" value="{{value}}">
          {{/if}}
        </div>
      {{/each}}
    </div>
    <button class="js-teacher-quote pricing_button -red" data-analytic="submit-quote-button Quote">{{{button}}}</button>
  </div>
</div>

<div class="track-popup -{{theme}}">
  <div class="track-popup_header">
    <div class="track-popup_header-left">
      <div class="track-popup_header-left-content">
        <h2 class="track-popup_level">
          {{#if logo}}
            <img src="{{{logo}}}" class="track-popup_logo">
          {{else}}
            {{{level}}}
          {{/if}}
        </h2>
        <h3 class="track-popup_name">{{name}}</h3>
        <p class="track-popup_description">{{description}}</p>
      </div>
    </div>
    <div class="track-popup_header-right">
      {{{trackBox}}}
      
      {{#if secondaryButton}}
        <a href="{{trackUrl}}" class="js track-popup_header-button">{{secondaryButton}}</a>
      {{/if}}
    </div>
  </div>
  <div class="js track-popup_tracks">
    {{#each courses}}
      <div class="track-popup_course">
        <div class="track-popup_course-left">
          <div class="track-popup_course-left-content">
            <h2 class="track-popup_course-name">{{name}} {{type}}</h2>
            <p class="track-popup_course-info">{{{description}}}</p>
          </div>
        </div>
        <div class="track-popup_course-right">
          {{{boxHtml}}}
          <a href="{{url}}" class="track-popup_course-button {{#if ../disableTrack}}is-disabled{{/if}}">{{../startNowButton}}</a>
        </div>
      </div>
    {{/each}}
  </div>
</div>

<div class="guides-info-section">
  <h3 class="guides-info-section_heading">Key</h3>
  <div class="js guides-info-section_key">
    <p class="js guides-info-section_key-text">There are five types of lesson segments:</p>
    <i class="guides-info-section_key-icon icon-puzzle"></i> <span class="guides-info-section_type">Concepts</span>: <p class="guides-info-section_key-description">Notes on the concepts covered in the CA lessons.</p>
    <i class="guides-info-section_key-icon icon-rocket"></i> <span class="guides-info-section_type">Activities</span>: <p class="guides-info-section_key-description">Off-line and online activities to supplement the CA lessons. </p>
    <i class="guides-info-section_key-icon icon-ca-logo"></i> <span class="guides-info-section_type">CA Lessons</span> = <p> class="guides-info-section_key-description"Online lessons created by CA.</p>
    <i class="guides-info-section_key-icon icon-ca-logo"></i> <span class="guides-info-section_type">CA Projects</span> = <p class="guides-info-section_key-description">Online projects created by CA to reinforce your learning.</p>
    <i class="guides-info-section_key-icon icon-ca-logo"></i> <span class="guides-info-section_type">CA Quizzes</span> = <p class="guides-info-section_key-description">Online quizzes created by CA to review previous lessons.</p>
    <p class="js guides-info-section_key-text">These small segments can be organised into three sections</p>
    <p><span>Prior Learning</span>: These are recap/review segments</p>
    <p><span>The Lesson</span>: This section leads you through the concepts, activities and CA lessons.</p> 
    <p><span>Extension</span>: These are additional concepts, activities and lessons.</p>
  </div>
</div>

<div class="js purchase-item {{type}} {{#if purchased}}has-purchased{{/if}} {{#if isComplete}}is-complete{{/if}} {{#if new}}-new{{/if}}" {{#if id}}data-id="{{id}}"{{/if}} {{#if plan}}data-plan="{{plan}}"{{/if}} {{#if item}}data-item="{{item}}"{{/if}} {{#if url}}data-url="{{url}}"{{/if}}>
    <img src="{{img}}" class="purchase-item_img">
    <p class="purchase-item_header">{{title}}</p>
    {{#if description}}
      <p class="purchase-item_text">{{description}}</p>
    {{/if}}
    <p class="purchase-item_price">{{price}}</p>
    <p class="purchase-item_type">USD {{per}}</p>
    <div class="purchase-item_buttons">
      {{#each buttons}}
        {{#if url}}
          <a href="{{url}}" {{#if target}}target="{{target}}"{{/if}} class="js purchase-item_button external-link" title="{{text}}">{{text}}</a>
        {{else}}
          <button class="js purchase-item_button {{hander}}" title="{{text}}">
            <span class="js show-spinner">{{text}}</span>
            <div class="js show-spinner" data-loader="circle-side"></div>
          </button>
        {{/if}}
      {{/each}}
    </div>
    {{#if info}}
      <p class="purchase-item_info">{{info}}</p>
    {{/if}}
  </div>

<div class="js payment-form">
    <div class="payment-form_content">
      {{{header}}}
      <div class="payment-form_inputs">
        <div class="js payment-form_input-wrapper -wide -radios">
          <div class="js payment-form_option" data-type="ccd">
            <label class="js payment-form_label" title="{{creditCard}}">{{creditCard}}</label> 
            <span class="js payment-form_option-radio is-active"></span>
          </div>
          <div class="js payment-form_option" data-type="paypal">
            <label class="js payment-form_label" title="Paypal">Paypal</label> 
            <span class="js payment-form_option-radio"></span> 
          </div>
        </div>
      </div>
      <form class="js payment-form_input-wrapper -wide ccd_form">

<div class="payment-form_inputs">
          <div class="payment-form_input-wrapper">
            <label class="js payment-form_label">{{firstName}} *</label>
            <input class="js payment-form_input -dark" type="text" data-recurly="first_name">
          </div>
          <div class="payment-form_input-wrapper">
            <label class="js payment-form_label">{{lastName}} *</label>
            <input class="js payment-form_input" type="text" data-recurly="last_name">
          </div> 
        </div>
        
        {{#if includeSignup}}
          <div class="payment-form_inputs">
            <div class="payment-form_input-wrapper">
              <label class="js payment-form_label">{{email}} *</label>
              <input class="js payment-form_input -dark" type="email">
            </div>
            <div class="payment-form_input-wrapper">
              <label class="js payment-form_label">{{password}} *</label>
              <input class="js payment-form_input" type="password">
            </div> 
          </div>
        {{/if}}

<div class="payment-form_inputs">
          <div class="payment-form_input-wrapper">
            <label class="js payment-form_label">{{cardNumber}} *</label>
            <div data-recurly="number"></div>
          </div>
          <div class="payment-form_input-wrapper">
            <label class="js payment-form_label">CVV *</label>
            <div data-recurly="cvv"></div>
          </div> 
        </div>
        <div class="payment-form_inputs">  
          <div class="payment-form_input-wrapper">
            <label class="js payment-form_label">{{month}} *</label>
            <div data-recurly="month"></div>
          </div>
          <div class="payment-form_input-wrapper">
            <label class="js payment-form_label">{{year}} *</label>
            <div data-recurly="year"></div>
          </div> 
          <input type="hidden" name="recurly-token" data-recurly="token">
        </div>
      </form>
      <div class="payment-form_input-wrapper -wide js code">
        <label class="js payment-form_label">{{couponCode}} </label>
        <input type="text" name="coupon" class="js payment-form_input">
      </div>
      
      {{#if includeSignup}}
        <div class="payment-form_input-wrapper">
          <span class="js payment-form_option-checkbox policy-consent -dark" data-value="yes"></span>
          <label class="js payment-form_label -checkbox -no-caps">
            {{{consent}}}
          </label>
        </div>
      {{/if}}

<div class="payment-form_buttons">
        <div class="js payment-form_error"></div>
        <button class="js payment-form_continue-button">
          <span class="payment-form_continue-button-text js show-spinner">{{buttonText}}</span>
          <div class="js show-spinner" data-loader="circle-side"></div>
        </button>
      </div>
    </div>
  </div>

<!doctype html>
<link rel="stylesheet" type="text/css" href="/css/presentation{min}.css?2.{id}">
<link rel="stylesheet" type="text/css" href="/css/styles{min}.css?2.{id}">
<script src="/js/presentation{min}.js?{id}"></script>
<title>{title}</title>

<body class="slide -{slideType}">
<header class="slide_header"> 
<i class="slide_logo icon-ca-logo"></i>
<span class="slide_title">{header}</span>
<div class="slide_controls">
  <button id="presentation-jump" class="js slide_controls-button -jump" onclick="window.opener.ai.presentation.previousSlide(true)"><i class="slide_controls-icon icon-left-arrow -double"></i><i class="slide_controls-icon icon-left-arrow -double"></i></button>
  <button id="presentation-prev" class="js slide_controls-button -prev" onclick="window.opener.ai.presentation.previousSlide(false)"><i class="slide_controls-icon icon-left-arrow"></i></button>
  <button id="presentation-next" class="js slide_controls-button -next" onclick="window.opener.ai.presentation.nextSlide(false)"><i class="slide_controls-icon icon-right-arrow"></i></button>
  <button id="presentation-skip" class="js slide_controls-button -skip" onclick="window.opener.ai.presentation.nextSlide(true)"><i class="slide_controls-icon icon-right-arrow -double"></i><i class="slide_controls-icon icon-right-arrow -double"></i></button>
</div>
</header>

<section class="_content">
<img class="filler-image" src="/image/guides/collection-2.png">
{content}
</section>

</body>

<div class="js- projects-popup -{{type}}">
  <div class="js- projects-popup_top">
    {{#if image}}
    <div class="js- projects-popup_image-wrapper">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
      <img src="{{image}}" class="js- projects-popup_image">
    </div>
    {{/if}}
    <div class="projects-popup_info">
      <div class="projects-popup_header">
        <span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
          <div class="projects-popup_progress-bar">
            <div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
  </div>
  <div class="js- projects-popup_bottom">
    <div class="projects-popup_info">
      <div class="projects-popup_header">
        <span class="js- projects-popup_title">{{{name}}}</span>
        {{#if time}}<span class="js- projects-popup_time">{{{time}}}</span>{{/if}}
      </div>
      {{#if description}}<p class="js- projects-popup_description">{{{description}}}</p>{{/if}}
      {{#compare progress '>' 0}}
        {{#equals type project}}
          <div class="projects-popup_progress-bar">
            <div class="js- projects-popup_progress {{{theme}}}" style="width: {{progress}}%"></div>
          </div>
        {{/equals}}
      {{/compare}}
    </div>
    {{#if image}}
    <div class="js- projects-popup_image-wrapper {{#if promo}}-promo{{/if}}">
      {{#if promo}}{{else}}<div class="projects-popup_image-overlay"></div>{{/if}}
      <img src="{{image}}" class="js- projects-popup_image">
    </div>
    {{/if}}
  </div>
</div>

{{#each this}}
    <div class="course-box -{{theme}}">
      <div class="course-box_content">
        <div class="course-box_top-bar">
          <div class="course-box_top-bar-left">
            <span class="course-box_type">{{level}}</span>
            <span class="course-box_title">{{{name}}}</span>
          </div>
          <div class="course-box_top-bar-right">
            <span>{{hours}} HRS</span>
            <span class="course-box_top-post"></span>
            <span class="course-box_preview-btn">Preview <i class="icon-play-full course-box_preview-btn-triangle"></i></span>
          </div>
        </div>
        <div class="course-box_details">
          <p class="course-box_description">{{{description}}}</p>
          <div class="course-box_buttons">
            <div class="course-box_buttons-left">
              {{#if progress}}
                <a href="{{url}}" class="button course-box_resume-button">Resume</a>
              {{else}}
                <a href="{{url}}" class="button course-box_resume-button">Start</a>
              {{/if}}
            </div>
            <div class="course-box_buttons-right">
              <button class="button course-box_details-button">View Details</button>
              <div class="course-box_content-footer">
                <div class="course-box_footer-info">
                  
                </div>
                <div class="course-box_footer-info">
                  {{difficulty}}
                </div>
                <div class="course-box_footer-info">
                  {{taskCount}} Tasks
                </div>
              </div>
            </div>
          </div>
          <div class="course-box_footer">
            <div class="course-box_footer-info">
                  
            </div>
            <div class="course-box_footer-info">
              {{difficulty}}
            </div>
            <div class="course-box_footer-info">
              {{taskCount}} Tasks
            </div>
          </div>
        </div>
      </div>
      <div class="course-box_preview">
        {{#if image}}
          <div class="course-box_preview-image">
            <image src="{{image}}" class="course-box_preview-image-image">
          </div>
        {{else}}
          <div class="course-box_preview-video">
            <div class="course-box_preview-video-play">
              <div class="course-box_preview-video-play-icon">
                <i class="icon-play"></i>
              </div>
            </div>
          </div>  
        {{/if}}
      </div>
      <div class="course-box_percentage-top">
        <span class="course-box_percentage-circle"></span>
        <div class="course-box_percentage-percent-wrapper">
          <span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
        <i class="icon-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
      <div class="course-box_percentage-bottom">
        <span class="course-box_percentage-circle"></span>
        <div class="course-box_percentage-percent-wrapper">
          <span class="course-box_percentage-percent" style="width: {{progress}}%"></span>
        </div>
        <i class="icon-star course-box_percentage-star"></i>
        <i class="icon-ribbon-small{{ribbon}} course-box_percentage-ribbon -percent{{progress}}"></i>
      </div>
    </div>
  {{/each}}

What would you like to learn?

The adventures of

Charlie & Tilley

The adventures of

Cody & Ava

The adventures of

Lonnie & Alex

At-Home digital Education

Real-world Problem Solving

Gamified E-Learning

Parent Tracking

Make screen timeproductive.

Frequently Asked Questions

What will my child learn with a Code Avengers subscription?

Can my children share a single account?

How do I know my child is learning?

Will my subscription renew automatically?

What devices are Code Avengers courses supported on?

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

Charlie
& Tilley

Cody
& Ava

Lonnie
& Alex

Make screen time
productive.