Junior Pro Educators Code Camps Log In

PRO | Code Avengers

PRO

Fast-track your digital career
the easy, affordable way.

* No credit card required

// + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + //

What would you like to create?

Choose a path that suits you.

I'm not sure I'd like to try something first

In 15 mins

Build an app

This project uses:

This challenging and exciting project will teach you how to create a Photo Booth app. Using JavaScript, CSS and HTML you will connect buttons that let you use a camera, upload images and customize your photos by inserting stickers and applying filters.

html-css javascript

Learn a language (1-3 Months)

Use HTML & CSS

Build websites

What you'll need:

Learn HTML and CSS and you'll be able to build you own websites with full control over layout and style!

html-css

Build a career (6+ Months)

Become a

Web Developer

What you'll need:

Learn web development to get the skills to build fully interactive websites using HTML, CSS, and Javascript.

html-css javascript

Bite-sized learning

Pace yourself with learning modules that fit easily into your day and motivate you to practice, finish tasks and meet your goals.

Make & share live projects

Unleash your own ideas! Access to our Interactive Development Environment (IDE) enables you to build a portfolio as you learn and share your work online.

Coding concepts made simple

Go from absolute beginner to a proficient coder with simple, supportive teaching that effortlessly builds knowledge.

Get Code Avengers qualified
Get your dream job.

Frequently Asked Questions

How does the 7 day trial work?

The free trial gives you unlimited access to all our free courses and up to 5 lessons of our premium courses. No credit card is required to start a trial. If you would like to get full access to courses you will need to upgrade to a subscription.

What kind of skills do I need to use Code Avengers?

None! Code Avengers teaches both beginners and those with more experience. We’re continually adding content to our library.

Will I need any special software, hardware or books?

You won't need any special hardware or OS. You can access Code Avengers courses from any computer with a modern browser and Internet connection, although we recommend using Google Chrome. Please note: Code Avengers does not support Internet Explorer 11 or lower.

How long does it usually take for me to build something after learning?

While everyone learns at a different pace, students who put in several hours each day to apply what they’ve learned should be able to build their own projects in 6-12 months.

Am I tied to a contract?

There are absolutely no contracts with Code Avengers. You can cancel or pause your account at any time.

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 create?

In 15 mins

Build an app

html-css javascript

Use HTML & CSS

Build websites

html-css

Become a

Web Developer

html-css javascript

Bite-sized learning

Make & share live projects

Coding concepts made simple

Get Code Avengers qualifiedGet your dream job.

Frequently Asked Questions

How does the 7 day trial work?

What kind of skills do I need to use Code Avengers?

Will I need any special software, hardware or books?

How long does it usually take for me to build something after learning?

Am I tied to a contract?

Keyboard Shortcuts

Toolbox

My Notes

Loading Notes...

Get Code Avengers qualified
Get your dream job.